带增长弧的 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();
}

带增长弧的 JS 仪表

JS Gauge with growing arc

javascript

charts

highcharts

kendo-dataviz

fusion