Как сделать так, чтобы соединители (линии, соединяющие метки данных) круговой диаграммы в Highcharts выглядели прямыми, а не изогнутыми?

Question

Мне нужно, чтобы соединители моей круговой диаграммы данных были прямыми, а не изогнутыми, что по умолчанию для круговой диаграммы Highcharts

что я хочу изображение с прямыми соединительными линиями

в настоящее время это выглядит так пирог по умолчанию с изогнутыми соединительными линиями

Вот мой код

 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, как показано в этой демонстрации JSFiddle .Это полезно в сочетании с crookDistance ( API ).Если вы хотите придать ей определенную форму, вы также можете сделать ее функцией, которая возвращает путь SVG, как показано в этой демонстрации JSFiddle .

Пример использования в опциях:

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