如何在Highcharts中制作饼图的连接器（连接数据标签的线条）看起来是直线而不是弯曲？

Question

我需要我的饼图数据标签连接器是直线而不是弯曲的连接器，默认情况下是Highcharts的饼图

我想要什么image with straight connector lines

目前它看起来像这个default pie with curved connector lines

这是我的代码

 Highcharts.chart('pieChart', {
    chart: {

        height: 274,
        borderColor: ''
    },
    tooltip: {
        enabled: false
    },
    colors: [
    ''
    ],
    plotOptions: {
        pie: {
            allowPointSelect: true,
            startAngle: 170,
            borderWidth:0,
            dataLabels: {
                enabled: true,
                format: '<b>{point.percentage:f}%</b><br>{point.name} ',
                style: {
                    fontWeight:'normal',
                }
            },
            colors: [
            '#8cdfff', 
            '#a6e6ff', 
            '#67d5ff',
            '#3ac9ff', 
            '#00b5fa', 
            ],
        }
    },
    series: [{
        data: [{
            name: 'No Reason',
            y: 12
        }, {
            name: 'Sick',
            y: 13
        }, {
            name: 'Sent away',
            y: 15
        }, {
            name: 'Paid Leave',
            y: 20
        }, {
            name: 'Vacation',
            y: 40
        }],
        sliced: true,
        selected: true,
        dataLabels: {
            style: {
                fontFamily: 'Inter UI',
                fontSize: '12px',
                color: '#282d32',
            }
        },

        point: {
            events: {
                mouseOver: function (e) {
                    this.dataLabel.css({
                        fontWeight: "bold"
                        // color: "#4d5c61"
                    });
                },
                mouseOut: function (e) {
                    this.dataLabel.css({
                        fontWeight: "normal"
                        // color: "#808f9e"
                    });
                }
            },
        },
        type: 'pie'
    }],

    title: {
        text: '',
    },
    subtitle: {
        text: ' ',
    }
});

如果某种灵魂可以帮助我，我会非常感激。

Answer 1

默认选项位于series.pie.dataLabels.connectorShape（API）中。您可以选择fixedOffset（默认值），straight crookedLine或返回SVG路径的函数。

您可能想要选择crookedLine，如this JSFiddle demo中所示。这对于与crookDistance（API）结合很有用。如果你想使它成为一个特定的形状你也可以使它成为一个返回SVG路径的函数，如this JSFiddle demo所示。

选项中的示例用法：

series: [{
    dataLabels: {
        connectorShape: 'crookedLine',
        crookDistance: '70%'
    },
    //...
}]