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

【问题标题】：Chart.js in ReactJS app: no terminal error, but no renderingReactJS 应用程序中的 Chart.js：没有终端错误，但没有渲染
【发布时间】：2017-01-03 16:47:34
【问题描述】：

我目前正在尝试使用 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 = require("react-chartjs").Line;
可以将数据和选项作为全局变量吗？
如果我没有从终端收到任何错误消息，我的代码有什么问题？

祝你有美好的一天

【问题讨论】：

标签： javascript node.js reactjs chart.js

【解决方案1】：

您正在从错误的模块导入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-chartjs 安装为

npm install -S react-chartjs

还要确保在您的项目中安装并导入chart.js@1.1.1 作为依赖项。安装为

npm install -S chart.js@^1.1.1

【讨论】：

嘿，谢谢您的回答；-) 所以我按照您的建议进行了导入并添加了 chartjs 依赖项。我还在渲染模块中将“BarChart”更改为“Bar”。但是它仍然给我留下了一个空白窗口。关于进口的几个问题：我怎么知道我需要从哪里进口东西？因为 'react-chartjs' 和 'chartjs' 没有路径名 - 我什么时候必须使用 'libraryname' 什么时候必须使用 './path/name.js' ？
当您安装 react-chartjs 或任何像 npm install -S react-chartjs 这样的模块时，它会进入您的默认 node_modules 文件夹，然后您无需指定路径，而是直接使用名称。只有当您有需要导入的自定义组件时，您才使用路径
另外确保你已经安装了文档中提到的 react-chartjs 和 chartjs 的正确版本
嗯，好的。也许这就是问题所在，然后我浏览了我的 node_modules 文件夹，但似乎找不到任何名为“react-chartjs”的东西。我只需要找出它应该来自哪里。
如果我有问题：npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules/chokidar/node_modules/fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform对于 fsevents@1.0.15：想要 {"os":"darwin","arch":"any"}（当前：{"os":"linux","arch":"x64"}）npm WARN test1@ 1.0.0 没有描述 npm WARN test1@1.0.0 没有存储库字段。 安装后在我的终端中？

【解决方案2】：

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

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

进入这个：

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

我不知道为什么，但它有效。

【讨论】：