Reactjs I'；“我得到了错误”；TypeError:无法读取属性'；扩展'；“未定义”的定义；尝试导入chartjs插件数据标签时

错误文本：“TypeError:无法读取未定义的属性'extend' （匿名函数） ./node_modules/chartjs plugin datalabels/dist/chartjs plugin datalabels.js:587“

这就是我试图导入包的组件

import { Divider } from "@material-ui/core";
import { Bar } from "react-chartjs-2";
import "chartjs-plugin-datalabels";

const FieldsData = (props) => {
  const getFirstChart = () => {
    const labels = props.fails
      ? props.fails.failsByOcurrence.map((fail) => {
          return fail.label;
        })
      : [];
    const colors = ["#e8e15f", "#e8e15f", "#e64f3e", "#e64f3e", "#e64f3e"];
    const data = {
      labels,
      datasets: [
        {
          label: "Intensidade de falhas por intervalo de comprimento",
          barPercentage: 0.6,
          data: props.fails
            ? props.fails.failsByLengthClass.map((x) => {
                return x.value;
              })
            : [],
          backgroundColor: colors,
        },
      ],
    };
    const chartConfig = {
      data: data,
      options: {
        responsive: false,
        plugins: {},
      },
    };
    return (
      <div style={{ width: "90%", margin: "0 auto" }}>
        <Bar data={data} options={chartConfig} />
      </div>
    );
  };

  return (
    <div>
      <Divider style={{ margin: "0.5rem 0" }} />
      {getFirstChart()}
    </div>
  );
};

export default FieldsData;

从“@material ui/core”导入{Divider}”；
从“react-chartjs-2”导入{Bar}；
导入“chartjs插件数据标签”；
常量字段数据=（道具）=>{
常量getFirstChart=（）=>{
const labels=props.fails
？道具失败失败当前映射（（失败）=>{
返回fail.label；
})
: [];
常量颜色=[“e8e15f”、“e8e15f”、“e64f3e”、“e64f3e”、“e64f3e”]；
常数数据={
标签，
数据集：[
{
标签：“压缩间隔期间的强度”，
百分比：0.6，
数据：道具失败
？道具失败。失败ByLengthClass.map（（x）=>{
返回x.value；
})
: [],
背景颜色：颜色，
},
],
};
常量chartConfig={
数据：数据，
选项：{
回答：错，
插件：{}，
},
};
返回(
);
};
返回(
{getFirstChart（）}
);
};
导出默认字段数据；

---

我尝试使用一个小于3.0.0的chart.js。尝试使用chart.js包而不是react-chartjs-2，但我总是遇到这个错误。

同样的现象也发生在我身上

我认为这次讨论会有帮助。

问题可能是Chart.js版本3和chartjs插件datalabels主分支版本之间存在依赖关系

我用这个命令解决了这个问题

npm install -S chartjs-plugin-datalabels@next

这就是我的依赖关系的工作方式

"chart.js": "^3.3.2",
"chartjs-plugin-datalabels": "^2.0.0-rc.1",
"react-chartjs-2": "^3.0.3",

---

我希望这会有帮助。

我找到了一个解决方案

您需要注册chartDataLabel

import { Bar, Chart } from "react-chartjs-2";
import ChartDataLabels from "chartjs-plugin-datalabels";

const数据={
标签：标签，
数据集：[
{
标签：“标签”，
数据：数据，
背景颜色：[
"rgba(255,99,132,0.2)",，
“rgba（54162235,0.2）”，
"rgba(255,206,86,0.2)",，
“rgba（751921920.2）”，
“rgba（153102255,0.2）”，
"rgba(255,159,64,0.2)",，
],
边框颜色：[
"rgba(255,99,132,1)",，
“rgba（54162235,1）”，
"rgba(255,206,86,1)",，
"rgba(751921921)",，
"rgba(153102255,1)",，
"rgba(255,159,64,1)",，
],
边框宽度：1，
数据标签：{
颜色：“#FFCE56”，
主持人:"结束",，
对齐：“开始”，
颜色：功能（上下文）{
返回context.dataset.backgroundColor；
},
字体：函数（上下文）{
var w=context.chart.width；
返回{
尺寸：w<512？12:14，
重量：'粗体'，
};
}
}
},
],
};

返回(
)

这篇文章帮助我找到了解决办法

---

请添加codesandbox或其他内容，以及上下文和部分代码，以帮助您。我现在已编辑了问题。很抱歉，缺少代码和详细信息。请以文本形式发布错误。代码/错误的图片并不是毫无用处的，因为它们是不可搜索的，并且给视力有限的用户增加了挫败感。我已经添加了错误文本。谢谢你的提示，这是我第二次在这里问问题了。谢谢

Chart.register(ChartDataLabels); // REGISTER PLUGIN

  const data = {
    labels: labels,
    datasets: [
      {
        label: 'label',
        data: data,
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)',
        ],
        borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)',
        ],
        borderWidth: 1,
        datalabels: {
          color: '#FFCE56',
          anchor: 'end',
          align  : 'start',
          color: function(context) {
            return context.dataset.backgroundColor;
          },
          font: function(context) {
            var w = context.chart.width;
            return {
              size: w < 512 ? 12 : 14,
              weight: 'bold',
            };
          }
        }
      },
    ],
  };

return (
<Bar data={data}/>
)