javascript - 在饼图上手动添加文本

Question

我的饼图中的 3 个切片属于同一类别。这是灰色切片（174、29、234）。是否可以在所有 3 个切片上覆盖文本。覆盖文本是否可以旋转或弯曲以覆盖灰色切片。

这是我的工作小提琴：https ://jsfiddle.net/1h8p257c/

Highcharts.chart('container', {
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
    },
    title: {
        text: 'Types of Actions'
},
    subtitle: {
        text: 'October 31, 2018'
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.y}</b>'
    },
    plotOptions: {
        pie: {
            size:230,
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                distance: -50,
                format: '{point.y:f}',
                color:'black'
            },
            showInLegend: true
        }
    },
    legend: {
      align: 'left',
      verticalAlign: 'middle',
      layout:'vertical'
    },
    series: [{
        name: 'Types',
        colorByPoint: true,
        data: [{
            name: 'Consent Order 1',
            y: 234,
            color:'#808080',
            legendIndex: 1
        }, {
            name: 'Consent Order 2',
            y: 29,
            color:'#C0C0C0',
            legendIndex: 2
        }, {
            name: 'Consent Order 3',
            y: 174,
            color:'#DCDCDC',
            legendIndex: 3
        },{
            name: 'Not Likely',
            y: 165,
            color:'#1E90FF',
            legendIndex: 4
        }, {
            name: 'No Testing',
            y: 2,
            color:'#FF0000',
            legendIndex: 5
                }]
    }]
});

标签： javascripthighcharts

Answer 1

如果它们都是同一类别，为什么不像这样组合它们：

Highcharts.chart('container', {
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
    },
    title: {
        text: 'Types of Actions'
},
    subtitle: {
        text: 'October 31, 2018'
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.y}</b>'
    },
    plotOptions: {
        pie: {
            size:230,
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                distance: -50,
                format: '{point.y:f}',
                color:'black'
            },
            showInLegend: true
        }
    },
    legend: {
      align: 'left',
      verticalAlign: 'middle',
      layout:'vertical'
    },
    series: [{
        name: 'Types',
        colorByPoint: true,
        data: [{
            name: 'Consent Order 1 - 3',
            y: 437,
            color:'#808080',
            legendIndex: 1
        }, {
            name: 'Not Likely',
            y: 165,
            color:'#1E90FF',
            legendIndex: 4
        }, {
            name: 'No Testing',
            y: 2,
            color:'#FF0000',
            legendIndex: 5
				}]
    }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://codehighcharts/modules/exporting.js"></script>
<script src="https://codehighcharts/modules/data.js"></script>
<script src="https://codehighcharts/modules/drilldown.js"></script>
<script src="https://codehighcharts/modules/export-data.js"></script>

<div id="container"></div>

还是分开很重要？