2017-04-06 46 views
2

我要實現我的項目的圖表,我決定用反應-chart.js之chart.js之彼此反應

我在一開始就試圖在我的組件添加一個例子,所以我加了此代碼:

var MyChart = React.createClass({ 

    render: function() { 
    console.log(chartData) 
    return <LineChart data={chartData} options={null} width="600" height="250"/> 
    } 
}); 

module.exports = MyChart; 

chartData是一個對象

我有一個錯誤:

core.js:64 Uncaught TypeError: (intermediate value)[chartType] is not a function

我ALS o嘗試過其他圖表,但他們都沒有工作,所以我可能做錯了什麼,但我找不到什麼

+0

爲r的對象named export?從哪裏進口LineChart? –

+0

參照這個。它可能有幫助。 https://github.com/reactjs/react-chartjs/issues/112 –

回答

3

React Chartjs也依賴於Chart.js。 像

npm install --save [email protected]^1.1.1 react react-dom 

此外,由於Line安裝它是你需要導入爲

import {Line as LineChart} from 'react-chartjs'; 

另外,還要確保你的chartData是像你使用ReCharts

{ 
    labels: ["January", "February", "March", "April", "May", "June", "July"], 
    datasets: [ 
     { 
      label: "My First dataset", 
      fill: false, 
      pointHoverRadius: 5, 
      pointRadius: 1, 
      pointHitRadius: 10, 
      data: [65, 59, 80, 81, 56, 55, 40], 
      spanGaps: false, 
     } 
    ] 
}; 
+0

它的工作原理!謝謝^ _^ –

+0

你知道我是否可以重用這個組件?當我將添加到容器時,我的應用不起作用 –

+0

只要您提供了正確的數據和選項,就應該能夠重用此組件 –