如何使用 highcharts 制作圆环图？

Question

我想创建一个如下图所示的圆环图：

到目前为止我已经这样做了：

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'subscribers-graph',
        type: 'pie'
     },
    title: {
        verticalAlign: 'middle',
        floating: true,
        text: '70% <br> 750K <br> Utilized',
    },
    plotOptions: {
        pie: {
            innerSize: '100%'
        },
        series: {
            states: {
                hover: {
                    enabled: false
                },
                inactive: {
                    opacity: 1
                }
            }
        }
    },
    series: [{
        borderWidth: 0,
        name: 'Subscribers',
        data: [
            {
                y: 30,
                name: "Online",
                color: {
                    linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
                    stops: [
                        [0, '#4679F8'],
                        [1, '#57B2A5']
                    ]
                },
            },
            {
                y: 20,
                name: "Offline",
                color: "#DDF4E4",
            }
        ],
        size: '100%',
        innerSize: '75%',
        showInLegend: false,
        dataLabels: {
            enabled: false
        }
    }],
    credits: {
        enabled: false
    }
});

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="subscribers-graph" style="height: 300px"></div>

现在我如何添加一条内部曲线和如图所示的填充路径，或者还有比 highcharts 更好的选择吗？请提出建议。

Answer 1

您可以添加另一个具有适当 size 和 innerSize 属性的系列：

series: [{
    ...
}, {
    size: '65%',
    innerSize: '95%',
    dataLabels: {
        enabled: false
    },
    data: [{
        y: 30
    }, {
        y: 20,
        color: 'rgba(0,0,0,0)'
    }]
}]

现场演示： http://jsfiddle.net/BlackLabel/e40a15hf/

API参考：https://api.highcharts.com/highcharts/series.pie

如何使用 highcharts 制作圆环图？

How to make a donut chart using highcharts?

highcharts

donut-chart