图表.js与 React 一起

Question

我想在我的项目中实现图表，我决定使用 react-chart.js

我一开始就试图在我的组件中添加一个示例，所以我添加了以下代码：

var MyChart = React.createClass({
  render: function() {
    console.log(chartData)
    return <LineChart data={chartData} options={null} width="600" height="250"/>
  }
});
module.exports = MyChart;

图表数据是一个对象

我有一个错误：

核心.js：64 未捕获的类型错误：(中间值([图表类型] 不是 一个函数

我也尝试了其他图表，但没有一个有效，所以我可能做错了什么，但我找不到什么

Answer 1

React Chartjs也依赖于Chart.js。像这样安装它

npm install --save chart.js@^1.1.1 react react-dom

另外，由于Line是named export因此您需要将其导入为

import {Line as LineChart} from 'react-chartjs';

还要确保你的图表数据是一个对象，类似于

{
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fill: false,
            pointHoverRadius: 5,
            pointRadius: 1,
            pointHitRadius: 10,
            data: [65, 59, 80, 81, 56, 55, 40],
            spanGaps: false,
        }
    ]
};