javascript - 带弧度的JS量规

有谁知道JavaScript图表库能够绘制如下量规：



我已经看过Highcharts，Kendo UI和FusionCharts，但找不到任何弧长非恒定的样本...但这也可能是因为我什至不知道要精确搜索什么。

我发现this post似乎朝着正确的方向发展，但是如果有现成的解决方案，我宁可不必自己绘制SVG。

最佳答案

万一其他人需要这样的东西，我最终自己使用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();
}