无法读取chartJS库的undefined的属性(阅读'prototype')

wtzytmuj  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(196)

我按照https://chartjs-chart-matrix.pages.dev/integration.html#bundlers-webpack-rollup-etc创建矩阵。我逐字粘贴了代码:

import { Chart } from "chart.js";
import { MatrixController, MatrixElement } from "chartjs-chart-matrix";
Chart.register(MatrixController, MatrixElement);

然后按CTRL+S,我会得到:“无法读取未定义的属性(阅读'prototype')”错误
我还使用了nextjs和typescript,如果有帮助的话

68bkxrlz

68bkxrlz1#

可能有点晚了,但我留下了我找到的解决方案,以供将来参考。一些ChartJS插件不能很好地与NextJS SSR一起工作,所以你需要动态导入你的图表组件。
因此,如果您定义了一个组件,如下所示:

import { Chart } from "chart.js";
import { Bar } from 'react-chartjs-2';
import { MatrixController, MatrixElement } from "chartjs-chart-matrix";

Chart.register(
  MatrixController,
  MatrixElement
  ...
);

const ChartComponent = () => (
  <Bar
    data={data}
    options={options
    ...
  />
)

您应该像这样导入它:

import dynamic from 'next/dynamic';

const BarChart = dynamic(
  () => import('<path-to-chart-component'),
  { ssr: false }
);

相关问题