有没有办法将 highchart 中每个系列的 highchart 数据标签和图例左右对齐

Question

我想在反应应用程序中创建一个类似于下面的图表。但没有得到选择 在高图中左右移动文本。

1. 参数在高图表中可用（左对齐或右对齐）。
2. 根据需求自定义图例显示在左侧和右侧。 有人知道我们如何才能在 highchart 中实现下面的图表吗？ [![待创建的图表][1]][1]

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>
);


  [1]: https://i.sstatic.net/9bTeAFKN.png

Answer 1

没有直接的 API 选项可以实现此目的，但您可以通过翻译图例项来模拟对齐。

  chart: {
    events: {
      render: function () {
        const chart = this,
          legend = chart.legend,
          items = legend.allItems

        const leftItem = items[0],
          rightItem = items[1]

        const leftItemBBox = leftItem.legendItem.group.element.getBBox(),
          rightItemBBox = rightItem.legendItem.group.element.getBBox()

        leftItem.legendItem.group.attr({
          translateX:
            -chart.plotWidth / 2 + chart.plotLeft + leftItemBBox.width,
        })

        rightItem.legendItem.group.attr({
          translateX:
            chart.plotWidth / 2 - chart.plotLeft + rightItemBBox.width,
        })
      },
    },
  },

演示： https://jsfiddle.net/BlackLabel/pm5wotu6/