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; 

は私と一緒にご負担ください：

は、ここに私のコードです。

でも、私は、複数の質問がある：

1. は、私は右の場所でライブラリをインストールしたのですか？ - npmを使用しましたが、node_modulesフォルダにあります。

2. ファイルへのパスが正しく書かれていますか？ gitHubが言っているように、このようなものでなければなりません：

   var LineChart = require（ "react-chartjs"）。

3. データとオプションをグローバル変数として配置しても問題ありませんか？

4. 端末からエラーメッセージが表示されない場合、私のコードには何が問題なのですか？

は、あなたが間違ったモジュールからBarchartをインポートしている素敵な一日

Answer 1

を持っています。あなたはBarChartコントロール

import {Bar} from 'react-chartjs'; 

からそれをインポートする必要がある。また、あなたが

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

として react-chartjs

npm install -S react-chartjs 

としてのインストール次にそれを使用して、依存関係

import Chart from 'chart.js'; 

としてchartjsを含める必要があり、

chart.js@1.1.1をプロジェクトに依存してインストールしてインポートしてください。

npm install -S chart.js@^1.1.1 

Answer 2

次のようにインストールしてください。Shubham Khatriの投稿に従ってください。それからちょうど次のように変更します。

この中へ

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

：

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

私は理由を知りませんが、それは動作します。