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

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>

还是分开很重要？

Answer 2

您可以使用Highcharts.SVGRenderer向图表添加其他文本：

    events: {
        load: function(){
            var center = this.series[0].points[2].shapeArgs;

            this.renderer.text(
                'someText', 
                center.x + this.plotLeft - 20, 
                center.y + this.plotTop + 50
            ).attr({
                fill: 'red',
                'font-size': '20px',
                rotation: -45,
                zIndex: 10
            })
            .add();
        }
    }

实时演示：https://jsfiddle.net/BlackLabel/t04gqy2h/

API：https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text

在饼图上手动添加文本

2 个答案: