如何使用 react-chartjs-2 自定义图例答案

【问题标题】：How to custom legend with react-chartjs-2如何使用 react-chartjs-2 自定义图例
【发布时间】：2022-12-24 19:50:20
【问题描述】：

我正在尝试在 chartjs v3.3.0 中创建自定义图例模板，如下图所示。我似乎无法在 v3.3.0 中找到有关此选项的任何文档。它甚至可用吗？任何人都可以举例说明如何实现这一目标吗？

这是我的设置：

  plugins: {
    legend: {
      display: true,
      onClick: () => {
        console.log('do nothing');
      },
      position: 'bottom',
      labels: {
        usePointStyle: true,
        pointStyle: 'circle',
        // generateLabels: (chart) => {
        //   console.log(chart.legend);
        //   return [1, 2];
        // },
      },
    },
    title: {
      text: 'Gender',
      display: true,
    },
  },
},
type: 'doughnut',
data: {
  labels: defaultColors,
  datasets: [
    {
      label: 'label1',
      data: [1, 2],
      backgroundColor: getBackground,
      borderWidth: 0,
    },
  ],
},
width: 'auto',
height: '100%',

Sample Image

【问题讨论】：

标签： javascript chart.js

【解决方案1】：

如果要呈现自定义图例，则需要使用 htmlLegend。

您可以在 Pie 插件中定义插件本身（如代码所示）或在图表配置中定义插件，如 Chartjs 3x 文档中所示。

htmlLegendPlugin = {
id: "htmlLegend",
afterUpdate(chart) {
  const items = chart.options.plugins.legend.labels.generateLabels(chart);
  const ul = document.createElement("ul");
 items.forEach(item => {
    const li = document.createElement("li");
    const boxSpan = document.createElement("span");
    boxSpan.style.background = item.fillStyle;
    li.appendChild(boxSpan);
    li.appendChild(document.createTextNode(item.text));
    ul.appendChild(li);
  });
  const jsLegend = document.getElementById("js-legend");
  jsLegend.appendChild(ul);
}

};

   <Pie
      data={data}
      options={option}
      height={400}
      redraw={true}
      plugins={[this.htmlLegendPlugin]}
    />
 <div id='js-legend' className='whatever you wanna add'></div>

通过这种方式，您还可以将自定义 CSS 添加到您的图例中。

P.S 这是使用 React-chartjs-2。

【讨论】：