React Js 和 Chart Js（折线图）

Question

我正在尝试从反应组件中的图表 js 添加折线图。我尝试了以下代码，但它显示白屏并且没有错误。我不知道我做错了什么。我浏览了 chart.js 文档并感到困惑。请给我建议如何显示图表。我正在使用 react-chartjs-2 版本 4.0.0 和 chart.js 版本 3.7.0.

import React from "react";
import {Line} from 'react-chartjs-2';

const data = {
    labels: ['January', 'February', 'March', 'April', 'May'],
    datasets: [
      {
        label: 'Rainfall',
        fill: false,
        lineTension: 0.5,
        backgroundColor: 'rgba(75,192,192,1)',
        borderColor: 'rgba(0,0,0,1)',
        borderWidth: 2,
        data: [65, 59, 80, 81, 56]
      }
    ]
  }

  const config = {
    type: 'line',
    data: data,
    options: {
      responsive: true,
      plugins: {
        legend: {
          position: 'top',
        },
        title: {
          display: true,
          text: 'Chart.js Line Chart'
        }
      }
    },
  };

const SavingsChart = () => {
    return (
          <Line
            data={data}
            options={config}
          />
      );
};

export default SavingsChart;

Answer 1

您可以尝试在文件开头添加这一行，似乎可以解决此问题： import Chart from "chart.js/auto";

Answer 2

您应该注册来自 chart.js

的图表

看例子here

import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';

ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);

Answer 3

您可以在 render() 方法中创建图表。

render() {
  return (
    <Line 
      data={this.state.data}
      options={this.state.options}
    />
  );
}

请查看以下内容StackBlitz，看看它如何与您修改后的代码一起使用。

React Js 和 Chart Js（折线图）

React Js and Chart Js (Line Chart)

reactjs

chart.js

react-chartjs-2