Chart.js无响应

Question

我正在使用这个创业板https://github.com/jhudson8/react-chartjs创建图表。

我安装了这个模块，并像这样导入了其中的一部分：

var LineChart = require('react-chartjs').Line;

然后，在查看了文档http://www.chartjs.org/docs/#line-chart-data-structure之后，我尝试创建一个简单的线条图。

<LineChart data={chartData} options={{bezierCurve: false}} width="250" height="250"/>

但是，在浏览器中我得到：

Uncaught TypeError: (intermediate value)[chartType] is not a function

而且还

Uncaught TypeError: Cannot read property 'destroy' of undefined

我的整个组成部分是：

'use strict';

import React from 'react';
import FlipCard from 'react-flipcard';
var LineChart = require('react-chartjs').Line;

var SampleDisplay = React.createClass({

  getInitialState: function() {
    return {flipped: false};
  },

  mouseOut: function() {
    console.log("Mouse out!!!");
    this.setState({flipped: false});
  },

  mouseOver: function() {
    console.log("Mouse over!!!");
    this.setState({flipped: true});
  },

  render: function() {

    const chartData = {
      labels: ["Happiness", "Safety", "Weather"],
      datasets: [
          {
              label: "My First dataset",
              fillColor: "rgba(220,220,220,0.5)",
              strokeColor: "rgba(220,220,220,0.8)",
              highlightFill: "rgba(220,220,220,0.75)",
              highlightStroke: "rgba(220,220,220,1)",
              data: [65, 59, 80]
          }
      ]
    };

    const itemStyle = {
      display: 'block',
      width: '100%',
      height: '100%',
      backgroundImage: `url('${this.props.item.url}')`
    };

    const backGroundStyle = {
      backgroundImage: `url('${this.props.item.url}')`
    };

    return (<div className="gridItem" onMouseEnter={this.mouseOver} onMouseLeave={this.mouseOut}>
              {this.state.flipped
                ?
                <LineChart data={chartData} options={{}} width="250" height="250"/>
                :
                <div style={itemStyle}>

                </div>
              }
          </div>);
  }
});

module.exports = SampleDisplay;

Answer 1

您还需要安装React文档中概述的Chart.js NPM包。

您还必须包含chart.js，并将其作为依赖项进行响应。

npm install chart.js@1.0.2 --save

如果您已经安装了chart.js，则在v2.0时它是likey，这还不稳定，因此会产生错误。卸载v2并使用上面的行重新安装。