如何在Highcharts中为各系列分别设置数据标签与图例左右对齐？

我想在React应用中创建特定样式的图表，但在Highcharts里找不到能把图例文本分别设置在左右两侧的选项：

• Highcharts的align参数只能统一设置左对齐或右对齐；
• 需要根据需求将图例分别显示在左右两侧。

请问怎么在Highcharts中实现这个需求？

用户当前的配置代码：

const options: Highcharts.Options = {
    chart: {
        type: 'bar',
        height: 125,
    },
    title: {
        text: '',
    },
    xAxis: {
        categories: ['basket compostion'],
        visible: false,
    },
    yAxis: {
        labels: {
            enabled: false,
        },
        visible: false,
        min: 0,
        title: {
            text: null,
        },
    },
    tooltip: {
        pointFormat:
            '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.0f}%</b><br/>',
        shared: true,
    },
    legend: {
        align: 'right',
        verticalAlign: 'bottom',
        labelFormatter() {
            const alignment = this.index === this.chart.series.length - 1 ? 'Right Aligned' : 'Left Aligned';
            return `<div>${this.name} (${alignment})</div>`;
        },
        itemStyle: {
            fontSize: '14px',
        },
    },
    plotOptions: {
        bar: {
            stacking: 'percent',
            dataLabels: {
                enabled: true,
                align: 'left',
            },
            borderRadius: 5,
        },
    },
    series: [
        {
            name: 'other products',
            color: '#5041af',
            type: 'bar',
            data: [
                {
                    y: 81.2,
                    custom: { info: 47.29 },
                },
            ],
        },
        {
            name: 'focus',
            index: 0,
            color: '#21145f',
            type: 'bar',
            className: 'series-data-label',
            data: [
                {
                    y: 18.2,
                    custom: { info: 10.14 },
                },
            ],
        },
    ],
};

return (
    <div>
        <HighchartsReact highcharts={Highcharts} options={options} />
    </div>
);

下面提供两种可行的实现方式：

方法一：自定义图例项定位（推荐） #

通过legend.itemPositioner回调函数手动计算每个图例项的坐标，指定特定系列的图例放在左侧或右侧。修改后的配置如下：

const options: Highcharts.Options = {
    chart: {
        type: 'bar',
        height: 125,
    },
    title: {
        text: '',
    },
    xAxis: {
        categories: ['basket compostion'],
        visible: false,
    },
    yAxis: {
        labels: {
            enabled: false,
        },
        visible: false,
        min: 0,
        title: {
            text: null,
        },
    },
    tooltip: {
        pointFormat:
            '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.0f}%</b><br/>',
        shared: true,
    },
    legend: {
        verticalAlign: 'bottom',
        // 自定义每个图例项的位置
        itemPositioner: function (itemWidth, itemHeight, itemIndex) {
            const chart = this.chart;
            // 把最后一个系列的图例放在右侧，其余放在左侧
            if (itemIndex === chart.series.length - 1) {
                return {
                    x: chart.chartWidth - itemWidth - 10, // 右侧偏移10px
                    y: chart.legend.y + itemIndex * itemHeight
                };
            } else {
                return {
                    x: 10, // 左侧偏移10px
                    y: chart.legend.y + itemIndex * itemHeight
                };
            }
        },
        labelFormatter() {
            return `<div>${this.name}</div>`;
        },
        itemStyle: {
            fontSize: '14px',
        },
    },
    plotOptions: {
        bar: {
            stacking: 'percent',
            dataLabels: {
                enabled: true,
                align: 'left',
            },
            borderRadius: 5,
        },
    },
    series: [
        {
            name: 'other products',
            color: '#5041af',
            type: 'bar',
            data: [
                {
                    y: 81.2,
                    custom: { info: 47.29 },
                },
            ],
        },
        {
            name: 'focus',
            color: '#21145f',
            type: 'bar',
            className: 'series-data-label',
            data: [
                {
                    y: 18.2,
                    custom: { info: 10.14 },
                },
            ],
        },
    ],
};

方法二：配置多个独立图例 #

利用Highcharts支持多图例的特性，分别创建左对齐和右对齐的图例，各自绑定对应的系列：

const options: Highcharts.Options = {
    chart: {
        type: 'bar',
        height: 125,
    },
    title: {
        text: '',
    },
    xAxis: {
        categories: ['basket compostion'],
        visible: false,
    },
    yAxis: {
        labels: {
            enabled: false,
        },
        visible: false,
        min: 0,
        title: {
            text: null,
        },
    },
    tooltip: {
        pointFormat:
            '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.0f}%</b><br/>',
        shared: true,
    },
    // 配置两个图例，分别对应不同系列
    legend: [{
        align: 'left',
        verticalAlign: 'bottom',
        seriesIndex: [0], // 绑定第一个系列
        itemStyle: {
            fontSize: '14px',
        }
    }, {
        align: 'right',
        verticalAlign: 'bottom',
        seriesIndex: [1], // 绑定第二个系列
        itemStyle: {
            fontSize: '14px',
        }
    }],
    plotOptions: {
        bar: {
            stacking: 'percent',
            dataLabels: {
                enabled: true,
                align: 'left',
            },
            borderRadius: 5,
        },
    },
    series: [
        {
            name: 'other products',
            color: '#5041af',
            type: 'bar',
            data: [
                {
                    y: 81.2,
                    custom: { info: 47.29 },
                },
            ],
        },
        {
            name: 'focus',
            color: '#21145f',
            type: 'bar',
            className: 'series-data-label',
            data: [
                {
                    y: 18.2,
                    custom: { info: 10.14 },
                },
            ],
        },
    ],
};

注意：该方法要求Highcharts版本在5.0及以上，因为从这个版本开始支持多图例配置。

内容的提问来源于Stack Exchange，提问作者90CK