react-chartjs-2-“ Chartjs反应失败的道具类型:无法读取未定义的属性'line'”

时间:2018-07-23 02:41:25

标签: javascript reactjs

我正在使用Chart.js,

当我尝试启动代码时,我的devtool控制台会返回我:

  

Chartjs反应失败的道具类型:无法读取未定义的属性'line'

我怎么可能已经安装了所有依赖项?

这是我的chart.js:

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

class Chart extends Component{
  constructor(props){
    super(props);
    this.state = {
      chartData:props.chartData
    }
  }

  static defaultProps = {
    displayTitle:true,
    displayLegend: true,
    legendPosition:'right',
    location:'City'
  }

  render(){
    return (
      <div className="chart">

        <Line
          data={this.state.chartData}
          options={{
            title:{
              display:this.props.displayTitle,
              text:'Largest Cities In '+this.props.location,
              fontSize:25
            },
            legend:{
              display:this.props.displayLegend,
              position:this.props.legendPosition
            }
          }}
        />

      </div>
    )
  }
}

这是我的app.js:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Chart from './components/Chart';

class App extends Component {
  constructor(){
    super();
    this.state = {
      chartData:{}
    }
  }

  {...}
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <Chart chartData={this.state.chartData} location="Massachusetts" legendPosition="bottom"/>
      </div>
    );
  }
}

export default App;

导出默认图表;

任何提示都会很棒, 谢谢

0 个答案:

没有答案