chart.js之在ReactJS應用：沒有終端錯誤，但沒有渲染

我目前正在試圖渲染使用chart.js之chart.js之在ReactJS應用：沒有終端錯誤，但沒有渲染

在ReactJS條形圖

信息：

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;

請多多包涵，如果我做了一些愚蠢的錯誤，這是第一個作出反應的應用程序，我的編碼，所以我有很多東西需要學習。

我有多個問題，雖然：

爲什麼我安裝該庫在正確的地方？ - 我用npm，它現在位於node_modules文件夾中
是否正確寫入文件的路徑？因爲gitHub說它應該是這樣的：

var LineChart = require（「react-chartjs」）。
可以將數據和選項放置爲全局變量嗎？
如果我沒有收到來自終端的任何錯誤消息，我的代碼有什麼問題？

有一個愉快的一天

來源

2017-01-03 nootaku

你是從錯誤的模塊中導入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

還要確保在項目中安裝並導入[email protected]作爲依賴項。安裝它爲

npm install -S [email protected]^1.1.1

來源

2017-01-03 16:52:29

嘿男人謝謝你回答;-) 所以我做了像你建議的輸入，並添加了chartjs依賴項。我還在渲染模塊中將「BarChart」更改爲「Bar」。然而它仍然留給我一個空白的窗口。有關輸入的一些問題，雖然：我怎麼知道我需要從哪裏輸入東西？因爲'react-chartjs'和'chartjs'沒有路徑名 - 我何時必須使用'libraryname'以及何時必須使用'./path/name.js'？ – nootaku

當您安裝react-chartjs或任何模塊（如npm install -S react-chartjs）時，它將進入默認的node_modules文件夾，然後您不需要指定路徑，而直接使用該名稱。只有當你有一個需要導入的自定義組件時，才使用路徑 –

另請確保你已經安裝了react-chartjs和chartjs正確的版本，正如文檔 –

按照Shubham Khatri的職位。然後，只需更改以下：

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

進入這個：

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

我不知道爲什麼，但它的工作原理。

來源

2017-01-03 18:07:02 nootaku

chart.js之在ReactJS應用：沒有終端錯誤，但沒有渲染

回答

相關問題