如何将chartjs-plugin-trendline与react-chartjs-2一起使用

Question

我想将“趋势”线添加到我的折线图中。我正在使用react-chartjs-2在我的网站上绘制图表。代码如下所示：

import { Line } from 'react-chartjs-2';
import trendlineLinear from 'chartjs-plugin-trendline';

const PatientInfectionChart = ({ data, labels }) => {
  const datasets = [
    {
      data: data.totalInfected,
      backgroundColor: 'rgb(233, 85, 0)',
      borderColor: 'rgba(233, 85, 0, 0.7)',
      label: 'Today Infected',
    },
    {
      data: data.todayRecovered,
      backgroundColor: 'rgb(23, 198, 113)',
      borderColor: 'rgba(23, 198, 113, 0.7)',
      label: 'Today Recovered',
      trendlineLinear: {
        style: 'rgb(23, 198, 113)',
        lineStyle: 'dotted',
        width: 2,
      },
    },
  ];
  return (
    <Line
      data={{ datasets, labels }}
      plugins={[trendlineLinear]}
      options={{
        maintainAspectRatio: false,
        scales: {
          y: {
            beginAtZero: true,
          },
        },
      }}
    />
  );
};

export default PatientInfectionChart;

但是，我得到以下错误：

Uncaught TypeError: Cannot read property 'ctx' of undefined
    at Object.afterDraw (chartjs-plugin-trendline.js:23)
    at callback (helpers.segment.js:89)
    at PluginService._notify (chart.esm.js:4737)
    at PluginService.notify (chart.esm.js:4724)
    at Chart.notifyPlugins (chart.esm.js:5788)
    at Chart.draw (chart.esm.js:5537)
    at chart.esm.js:66
    at Map.forEach (<anonymous>)
    at Animator._update (chart.esm.js:44)
    at chart.esm.js:34

我该怎么解决这个问题呢？

Answer 1

趋势线插件需要chart.js版本2，react chart.js使用版本3，因此您需要降级react-chartjs

命令：

纱线移除react-chartjs-2

纱线添加react-chartjs-2@2.11.2