ReactJS应用程序中的Chart.js：没有终端错误，但没有渲染

Question

我目前正在尝试使用chart.js在ReactJS中呈现条形图

信息：

官方网页-http://www.chartjs.org/docs/

GitHub-https://github.com/reactjs/react-chartjs

我的问题是，即使我的终端没有给我任何错误，我的本地服务器没有呈现任何东西。

这是我的代码：

var React = require('react');
var BarChart = require('../../node_modules/chart.js/Chart.js');
var styles = require('./Styles.js');

var data={
  labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
  datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
          'rgba(255,99,132,1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1
  }]
};
var options={
  scales: {
      yAxes: [{
          ticks: {
              beginAtZero:true
          }
      }]
  }
};

var Graphs = React.createClass({
  render: function() {
    return (
      <div id='graphDiv'>
        <BarChart type='bar' data={data} options={options} />
      </div>
      );
    }
  });

module.exports = Graphs;

如果我犯了一些愚蠢的错误，请容忍我，这是我编写的第一个React应用程序，所以我有很多东西要学。

不过，我有很多问题：

>

我是否在正确的位置安装了库？-我使用了npm，它现在位于node_modules文件夹中

指向文件的路径是否正确写入？正如gitHub所说，应该是这样的：

VAR LineChart=需要（"react-chartjs"）。线；

可以将数据和选项作为全局变量放置吗？

如果我没有从终端得到任何错误消息，我的代码有什么问题？

祝你今天愉快

Answer 1

跟随Shubham Khatri的帖子。然后只需更改以下内容：

import {Bar} from 'react-chartjs';
import Chart from 'chart.js';

为此：

var BarChart = require('react-chartjs').Bar;
var Chart = require('chart.js');

我不知道为什么，但它起作用了。

Answer 2

您正在从错误的模块导入BarChart.您需要从BarChart导入它

import {Bar} from 'react-chartjs';

此外，还需要将chartjs作为依赖项包括在内

import Chart from 'chart.js';

然后将其用作

render: function() {
    return (
      <div id='graphDiv'>
        <Bar type='bar' data={data} options={options} />
      </div>
      );
    }
  });

安装react chartjsas

npm install -S react-chartjs

还要确保安装并导入图表。js@1.1.1作为项目中的依赖项。安装为

npm install -S chart.js@^1.1.1