高图循环百分比图

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]]

这是使用统计表的示例。 它要灵活得多，在这种情况下似乎是更自然的选择。

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
            }
        }]
    });
});

这样就形成了一个“完整”圆圈，其中填充了“已完成”部分。