javascript - 弧を描くJSゲージ

Question

次のようなゲージを描画できる JavaScript グラフ作成ライブラリを知っている人はいますか?

すでに Highcharts、Kendo UI、FusionCharts を見てきましたが、弧の幅が一定でないサンプルは見つかりませんでした...しかし、それは正確に何を検索すればよいかさえわからないためでもあります。 .

正しい方向に進んでいるように見えるこの投稿を見つけましたが、すぐに使えるソリューションがある場合は、自分で SVG を描画する必要はありません。

Answer 1

他の誰かがそのようなものを必要とする場合に備えて、私は D3 を使用して自分で構築しました。完全なアニメーション サンプルは、http://jsfiddle.net/0288wscf/11/で入手できます。

var domain = [1, 100];

var angleScale = d3.scale.linear().domain(domain).range([minAngle, maxAngle]);
var radiusScale = d3.scale.linear().domain(domain).range([radius - minWidth, radius - maxWidth]);
var colorScale = d3.scale.linear().domain(domain).range([minColor, maxColor]);

var svg = d3.select("body").append("svg")
    .attr("width", 2 * radius)
    .attr("height", 2 * radius);

var gauge = svg.append("g")
    .attr("transform", "translate(" + radius + "," + radius + ")")

var arc = d3.svg.arc()
    .innerRadius(radiusScale)
    .outerRadius(radius)
    .startAngle(angleScale)
    .endAngle(angleScale);

function update(n) {    
    var ticks = gauge.selectAll(".tick").data(d3.range(1, n), function(d) { return d; });

    ticks.enter()
         .append("path")
         .attr("class", "tick")
         .attr("stroke", colorScale)            
         .attr("d", arc)
         .attr("stroke-width", tickThickness)
         .attr("opacity", 0)
         .transition()
         .delay(enterDuration)
         .attr("opacity", 1);

    ticks.exit()
         .transition()
         .delay(exitDuration)
         .remove();
}