I'm getting the error "TypeError: Cannot read property 'extend' of undefined" when trying to import chartjs-plugin-datalabels

Question

错误文本：“类型错误：无法读取未定义的属性 'extend' （匿名函数） ./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;

我试过使用 chart.js < 3.0.0。尝试使用 chart.js 包而不是 react-chartjs-2，但我总是收到此错误。

Answer 1

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

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

问题可能是 Chart.js 版本 3 和 chartjs-plugin-datalabels master 分支版本之间的依赖关系。

我用这个命令解决了问题

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",

希望对您有所帮助。

Answer 2

我找到了解决办法

您需要注册图表数据标签

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

这个post帮我找到解决办法

I'm getting the error "TypeError: Cannot read property 'extend' of undefined" when trying to import chartjs-plugin-datalabels

I'm getting the error "TypeError: Cannot read property 'extend' of undefined" when trying to import chartjs-plugin-datalabels

extend

reactjs

chart.js