将HTMLPlugin与react-chattjs-2 v4集成

Question

我正试图使用带有react-chattjs-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]);

我收到这个错误

没有使用该id 创建dom元素

中的错误/Users/reactactive/SSandbox/event-webapp/src/pages/home/Analytics/Components/Widgets/DoughnutChart/DoughutChart.tsx./src/pages/home/Analytics/Components/Widgets/DoughnutChart/DoughutChart.tsx210:12-213:13[tsl]中的错误/Users/reactnative/SSandbox/event-webapp/src/pages/home/Analytics/Components/Widgets/DoughnutChart/tsx(210,13(TS2322:类型"｛htmlLegend:｛containerID:string；｝；"；数据标签：｛backgroundColor:null；borderColor:string；borderRadius:数字；borderWidth：数字；color:字符串；显示：((=>真实；字体：{weight:"bold"；}；padding:数字；格式化程序：(x:number(=>数字；}；图例：｛…；｝；工具提示：｛…；｝；｝'不是可分配给类型'_DepPartialObject<插件选项ByType<quot；甜甜圈">gt；'。对象literal只能指定已知属性，而"htmlLegend"不指定存在于类型"_DepPartialObject<插件选项ByType<quot；甜甜圈">gt；'。

有人能展示一下使用带有react-chattjs-2的htmlLegend插件吗。

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

谢谢

Answer 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