如何调整Highcharts饼图中动态数据标签（如6.02%）的位置？

我需要调整Highcharts饼图中动态生成的「6.02%」数据标签的位置，但数据为动态生成，不知该如何操作。

我的实现代码如下：

Highcharts.chart('container' + this.random, {
    credits: {
        enabled: false
    },
    title: {
        text: this.graphtitle,
        align: 'left',
        style: {
            fontSize: '12px',
        },
    },
    chart: {
        height: this.graphheight,
        width: 500,
        animation: false,
        backgroundColor: 'transparent',
    },
    plotOptions: {
        pie: {
            dataLabels: {
                enabled: true,
                color: '#000',
                align: 'left',
                format: '{point.y} %', // added percentage sign here
                overflow: 'justify', // prevent labels from being cut off
                distance: 10, // increase distance between labels
                x: -40,
                y: -20,
                //css
                style: {
                    fontSize: '10px',
                    textOutline: 0,
                },
                connectorWidth: 0,
            },
            animation: true,
            showInLegend: true,
        },
    },
    yAxis: {
        labels: {
            staggerLines: 2,
            enabled: true,
            align: 'left',
            padding: 0,
            reserveSpace: true
        },
    },
    legend: {
        layout: 'vertical',
        verticalAlign: 'bottom',
        align: 'right',
        symbolHeight: 10,
        symbolRadius: 0,
        symbolPadding: 1,
        itemMarginTop: 10,
        itemMarginBottom: 5,
        textOutline: 0,
        itemStyle: {
            fontSize: '10px',
            textOutline: 0,
        }
    },
    series: [{
        enableMouseTracking: false,
        type: 'pie',
        innerSize: '65%',
        colors: this.graphcolors,
        data: this.graphdata,

    },],

});

饼图效果：

我尝试了以下方法但未生效，希望得到其他可行方案：

chart.series[0].data[1].update({
    dataLabels: {
        align: 'center',
        verticalAlign: 'middle',
        inside: true
    }
});

可行解决方案 #

方法一：初始化数据时为特定点配置数据标签 #

由于数据是动态生成的，可在构造graphdata数组时，为需要调整位置的点单独添加dataLabels配置。若「6.02%」对应数组中索引为1的元素，示例如下：

// 动态生成graphdata时，为目标点添加配置
this.graphdata = [
    ['类别1', 93.98],
    ['类别2', 6.02, {
        dataLabels: {
            align: 'center',
            verticalAlign: 'middle',
            inside: true,
            x: 0,
            y: 0
        }
    }]
];

方法二：图表加载完成后动态更新（修正原有方法） #

之前的更新方法未生效，大概率是因为获取图表实例时机不对，或未触发重绘。可通过chart.events.load事件在图表渲染完成后执行更新：

Highcharts.chart('container' + this.random, {
    // ... 保留原有配置
    chart: {
        height: this.graphheight,
        width: 500,
        animation: false,
        backgroundColor: 'transparent',
        events: {
            load: function() {
                const targetPoint = this.series[0].data[1];
                targetPoint.update({
                    dataLabels: {
                        align: 'center',
                        verticalAlign: 'middle',
                        inside: true,
                        x: 0,
                        y: 0,
                        style: {
                            fontSize: '10px',
                            textOutline: 0
                        }
                    }
                }, false); // 暂不重绘
                this.redraw(); // 手动触发重绘
            }
        }
    },
    // ... 保留原有配置
});

方法三：通过formatter动态判断调整 #

若无法确定目标点的索引，可通过数据值或名称在formatter函数中动态设置标签位置：

plotOptions: {
    pie: {
        dataLabels: {
            enabled: true,
            color: '#000',
            align: 'left',
            overflow: 'justify',
            distance: 10,
            x: -40,
            y: -20,
            style: {
                fontSize: '10px',
                textOutline: 0,
            },
            connectorWidth: 0,
            formatter: function() {
                // 根据点的y值或name判断是否为目标标签
                if (this.point.y === 6.02) {
                    this.point.dataLabels.options.align = 'center';
                    this.point.dataLabels.options.verticalAlign = 'middle';
                    this.point.dataLabels.options.inside = true;
                    this.point.dataLabels.options.x = 0;
                    this.point.dataLabels.options.y = 0;
                }
                return this.point.y + ' %';
            }
        },
        animation: true,
        showInLegend: true,
    },
}

内容的提问来源于stack exchange，提问作者Wahaj Ahmed