尝试导入 chartjs-plugin-datalabels 时出现错误“TypeError: Cannot read property 'extend' of undefined”答案

【问题标题】：I'm getting the error "TypeError: Cannot read property 'extend' of undefined" when trying to import chartjs-plugin-datalabels尝试导入 chartjs-plugin-datalabels 时出现错误“TypeError: Cannot read property 'extend' of undefined”
【发布时间】：2021-08-12 21:45:56
【问题描述】：

错误文本：“TypeError: Cannot read property 'extend' of undefined （匿名函数） ./node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.js:587"

print of the error i'm getting

这就是我要导入包的组件。

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;

我尝试使用

【问题讨论】：

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

标签： reactjs chart.js extend

【解决方案1】：

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

我认为这次讨论会有所帮助。 https://github.com/chartjs/chartjs-plugin-datalabels/discussions/213#:~:text=chart.js%203%20compatibility

问题可能是 Chart.js 版本 3 和 chartjs-plugin-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",

我希望这会有所帮助。

【讨论】：

【解决方案2】：

我找到了解决办法

你需要注册chartDataLabel

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

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}/>
)

这篇文章帮助我找到解决方案

chartjs-plugin-zoom not working with my React project

【讨论】：