javascript - Highcharts 圆形百分比图表

Question

我正在使用 Highcharts，我想知道 highcharts 是否有可能制作这样的圆形图表:

我有这个，但它填满了整个圆圈，而不仅仅是圆圈的 60%(这是 fiddle :http://jsfiddle.net/fccuw47y/1/)。

$(function() {
    // Create the chart
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'pie'
        },
        title: {
            text: ''
        },
        plotOptions: {
            pie: {
                shadow: false
            }
        },
        series: [{
            name: 'Browsers',
            data: [["Total",60]],
            size: '100%',
            innerSize: '95%',
            showInLegend:false,
            dataLabels: {
                enabled: false
            }
        }]
    });
});

Answer 1

我们刚刚在 Highcharts 中使用 solidgauge 类型实现了一个外观相似的图表。

您可以使用饼图，但饼图总是会填充 100%。这是野兽的本性。如果您想使用饼图，则必须为其提供剩余部分(空白区域)的数量。例如，您的 series.data 必须是

[["Total", 60], ["Empty", 40]]

这是一个使用 solidgauge 类型图表的示例。它更加灵活，在这种情况下似乎是更自然的选择。

http://jsfiddle.net/morqp9at/