wefra/lib/d3-v6-oop/test_gauge_chart.js

33 lines
1.0 KiB
JavaScript
Raw Normal View History

var GaugeChart = {
init: function(svg, html_tag_attr, min, current, max){
console.log(min, current, max);
var startAngle = -Math.PI/2,
tau = Math.PI/2,
C = tau/max;
console.log(tau, max, C, (current*C));
var width = $(html_tag_attr).width(),
height = $(html_tag_attr).height(),
coeff = height / 2,
size = 15,
g = svg.append("g").attr("transform", "translate(" + ((width / 2) - size) + "," + (height - height/2) + ")");
var arc = d3.arc()
.innerRadius(height - coeff)
.outerRadius(height - coeff - size)
.startAngle(startAngle);
// Add the background arc, from 0 to 100% (tau).
var background = g.append("path")
.datum({endAngle: tau})
.style("fill", "#ddd")
.attr("d", arc);
// Add the foreground arc in orange, currently showing 12.7%.
var foreground = g.append("path")
.datum({endAngle: (current/max*C)/startAngle })
.style("fill", "orange")
.attr("d", arc);
},
};