使用 HighCharts 库的饼图切片半径答案

【问题标题】：Pie chart slice radius using HighCharts library使用 HighCharts 库的饼图切片半径
【发布时间】：2021-07-16 12:17:44
【问题描述】：

大家好，我正在使用 HighCharts 库来绘制图表，我想实现下面的饼图，但找不到合适的示例，请帮助我。

【问题讨论】：

标签： highcharts

【解决方案1】：

您可以为蓝点启用切片状态并使用与边框相关的属性：

    series: [{
        showInLegend: true,
        allowPointSelect: true,
        type: 'pie',
        data: [{
            y: 45,
            color: 'black',
            dataLabels: {
                enabled: false
            }
        }, {
            y: 55,
            color: 'blue',
            sliced: true,
            borderWidth: 5,
            borderColor: 'white',
            dataLabels: {
                format: '{point.y}%',
                distance: -60,
                style: {
                    fontSize: 24
                }
            }
        }]
    }]

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

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

【讨论】：

【解决方案2】：

我在这里为你创建了提取派：https://jsfiddle.net/markwan/qm8xzr93/3/

// Build the chart
Highcharts.chart('container', {
chart: {
    plotBackgroundColor: "#f5f5f5",
    backgroundColor: '#f5f5f5',
    plotBorderWidth: null,
    plotShadow: false,
    type: 'pie'
},
title: {
    text: ''
},
tooltip: {
    enabled: false
},
accessibility: {
    point: {
        valueSuffix: '%'
    }
},
plotOptions: {
    pie: {
        allowPointSelect: true,
        cursor: 'pointer',            
        showInLegend: true, 
    }
},
legend: {
  layout: 'vertical',
  align: 'right',
  verticalAlign: 'top',
  itemMarginBottom: 15,      
  x: 0,
  y: 150
},
series: [{
    name: 'Members',
    colorByPoint: true,
    data: [
    
         {
        name: 'Total Members: 1.000.000',
        y: 450000,
        color: "#393f4e",
        borderWidth: 1,
        borderColor: '#f5f5f5',
        dataLabels: {
            enabled: false,
                        
        }
    },
    {
        name: 'Targeted Members: 550.000',
        y: 550000,
        sliced: true,
        borderWidth: 15,
       
        borderColor: 'white',
        color: "#34b9d5",
        dataLabels: {
            enabled: true,
            format: '<b>{point.percentage:.0f}%</b>',
            distance: -70, 
            style: {
                fontSize: 30
            }
        }
       
    }]
}]
});

【讨论】：