Highcharts循环百分比图表

Question

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

我有这个，但它填满整个圈子而不是圈子的60％（这里是小提琴：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/

Answer 2

您可以将系列数据点的颜色设置为透明：

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

这给了一个完整的＆＃34; ＆＃34;完成＆＃34;部分填写。