将符号添加到自定义图例布局- Highcharts React

import React from 'react';
import HighchartsReact from 'highcharts-react-official';
import Highcharts from 'highcharts';

const CustomLegendLayout = () => {
  const options = {
    chart: {
      type: 'line',
    },
    legend: {
      layout: 'customLayout', // 设置自定义图例布局
    },
    series: [
      {
        name: 'Series 1',
        data: [1, 2, 3, 4, 5],
      },
      {
        name: 'Series 2',
        data: [5, 4, 3, 2, 1],
      },
    ],
  };

  const customLayout = (chart) => {
    const legend = chart.legend;
    const renderer = chart.renderer;

    // 渲染自定义符号
    const symbol = renderer.symbol('circle').attr({
      fill: 'red',
      stroke: 'black',
      'stroke-width': 1,
    }).add(legend.group);

    // 定位自定义符号
    symbol.alignTo(legend.allItems[0].legendItem, 'left', 0, 0);

    // 更新图例布局高度
    legend.update({
      legendHeight: legend.legendHeight + symbol.getBBox().height + 10,
    });
  };

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

export default CustomLegendLayout;