Chart.js与React

Ele*_*ena 4 javascript charts reactjs chart.js react-chartjs

我想在我的项目中实现图表,我决定使用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;
Run Code Online (Sandbox Code Playgroud)

chartData是一个对象

我有一个错误:

core.js:64 Uncaught TypeError :(中间值)[chartType]不是函数

我也尝试了其他图表,但没有一个能够正常工作,所以我可能做错了什么,但我找不到什么

Shu*_*tri 5

React Chartjs也有依赖性Chart.js.安装就像

npm install --save chart.js@^1.1.1 react react-dom
Run Code Online (Sandbox Code Playgroud)

此外,由于Line是一个named export需要导入它作为

import {Line as LineChart} from 'react-chartjs';
Run Code Online (Sandbox Code Playgroud)

还要确保你的chartData是一个像这样的对象

{
    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,
        }
    ]
};
Run Code Online (Sandbox Code Playgroud)