Question

我需要我的piechart数据标签连接器为直线而不是弯曲的，默认情况下是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%'
    },
    //...
}]

如何使Highcharts中的圆形图表的连接器（连接数据标签的线）看起来是直线而不是弯曲的？

1 个答案: