将 HTMLPlugin 与 react-chartjs-2 v4 集成答案

【问题标题】：Integrate HTMLPlugin with react-chartjs-2 v4将 HTMLPlugin 与 react-chartjs-2 v4 集成
【发布时间】：2023-01-27 14:49:28
【问题描述】：

我正在尝试使用带有 react-chartjs-2 的插件来使用自定义标签。

这些是我正在使用的版本

"chart.js": "^3.9.1",
"react-chartjs-2": "^4.3.1",
"chartjs-plugin-datalabels": "^2.1.0",

复制代码错误：https://codesandbox.io/s/hungry-feather-yj81gq

这就是我尝试导入图表和实例的方式


import {
  ArcElement,
  Chart as ChartJS,
  Legend as ChartjsLegend,
  Tooltip,
  TooltipItem,
  TooltipModel,
} from 'chart.js';
import ChartDataLabels from 'chartjs-plugin-datalabels';
import { Doughnut } from 'react-chartjs-2';

我使用的示例已经在 Chartjs.org 的文档中

https://www.chartjs.org/docs/3.9.1/samples/legend/html.html

这就是组件的样子

const renderDoughnut = useCallback(() => {
    const doughnutSize = 300;
    return (
      <Doughnut
        data={{
          labels,
          datasets: [
            {
              hoverOffset: 6,
              data,
              backgroundColor: colors,
              datalabels: {
                anchor: 'center',
                backgroundColor: null,
                borderWidth: 0,
              },
            },
          ],
        }}
        width={doughnutSize}
        height={doughnutSize}
        options={{
          responsive: false,
          maintainAspectRatio: true,
          plugins: {
            htmlLegend: {
              // ID of the container to put the legend in
              containerID: 'legend-container',
            },
            datalabels: {
              backgroundColor: null,
              borderColor: 'white',
              borderRadius: 25,
              borderWidth: 2,
              color: 'white',
              display: () => true,
              font: {
                weight: 'bold',
              },
              padding: 3,
              formatter: Math.round,
            },
            legend: {
              display: false,
            },
            tooltip: tooltips,
          },
        }}
        plugins={[htmlLegendPlugin]}
      />
    );
  }, [colors, data, labels, tooltips]);

I got this error

no dom element was created with that id

错误在 /Users/reactnative/Sandbox/event-webapp/src/pages/home/Analytics/Components/Widgets/DoughnutChart/DoughnutChart.tsx ./src/pages/home/Analytics/Components/Widgets/DoughnutChart/DoughnutChart.tsx 210:12-213:13 [tsl] 错误 /Users/reactnative/Sandbox/event-webapp/src/pages/home/Analytics/Components/Widgets/DoughnutChart/DoughnutChart.tsx(210,13) TS2322: 类型 '{ htmlLegend: { containerID: string; };数据标签：{ 背景颜色：空；边框颜色：字符串；边界半径：数字；边框宽度：数字；颜色：字符串；展示：（） => 真；字体：{ 重量：“粗体”； };填充：数字；格式化程序：（x：数字）=>数字； };传奇： { ...; };工具提示：{ ...; }; }' 不是可分配给类型 '_DeepPartialObject<PluginOptionsByType<"doughnut">>'。目的 literal 只能指定已知的属性，而 'htmlLegend' 不会存在于类型 '_DeepPartialObject<PluginOptionsByType<"doughnut">>' 中。

有人可以展示将 htmlLegend 插件与 react-chartjs-2 一起使用吗？

复制代码错误：https://codesandbox.io/s/hungry-feather-yj81gq

谢谢

【问题讨论】：

标签： javascript reactjs charts plugins react-chartjs-2

【解决方案1】：

这里的问题是，您告诉htmlLegendPlugin 寻找 ID 为legend-container 的容器，但该容器不存在。

htmlLegend: {
  // ID of the container to put the legend in
  containerID: "legend-container"
},

你可以解决添加一个id为legend-container的简单div到App.tsx的错误：

export function App() {
  return (
    <>
      <div id="legend-container" />
      <Doughnut
        data={data}
        options={{
          responsive: false,
          maintainAspectRatio: true,
          plugins: {
            htmlLegend: {
              // ID of the container to put the legend in
              containerID: "legend-container"
            },
            legend: {
              display: false
            }
          }
        }}
        plugins={[htmlLegendPlugin]}
      />
    </>
  );
}

请参阅此处运行的示例：https://codesandbox.io/s/html-legend-plugin-chartjs-dn6eys

【讨论】：