如何使用 Highcharts 创建渐进式饼图答案

【问题标题】：How to create a progressive pie chart using Highcharts如何使用 Highcharts 创建渐进式饼图
【发布时间】：2021-06-04 06:04:24
【问题描述】：

我想使用 Highcharts 创建如下图所示的渐进式饼图。我知道创建基本的 Highcharts，但在为高级图表定制 Highcharts 方面经验有限。非常感谢您对处理我的案件的指导。谢谢

【问题讨论】：

标签： highcharts pie-chart gauge

【解决方案1】：

您可以使用多个带有数据标签的重叠饼图系列。示例：

const total = 69;
const target = 10;
const complete = 10;
const remaining = 59;

Highcharts.chart('container', {
    chart: {
        type: 'pie'
    },
    plotOptions: {
        pie: {
            borderWidth: 0,
            colorByPoint: false,
            color: 'transparent',
            dataLabels: {
                enabled: false,
                distance: -30,
                formatter: function() {
                    return Math.round(this.y * 100 / total) + '%';
                },
                style: {
                    fontSize: 20
                }
            },
            size: '80%'
        }
    },
    series: [{
        borderWidth: 1,
        borderColor: 'green',
        data: [{
                y: complete,
                color: 'green',
                dataLabels: {
                    enabled: true
                }
            },
            remaining
        ],
        innerSize: '40%'
    }, {
        data: [
            complete,
            {
                y: 1,
                color: 'red'
            },
            remaining - 1
        ]
    }, {
        size: '10%',
        color: 'red',
        dataLabels: {
            enabled: true
        },
        data: [target]
    }]
});

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

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

【讨论】：

非常感谢。您的回答极大地帮助了我解决我的问题。