2016-11-25 70 views
1

我得到了這個代碼使用react-chartjs。它顯示圖表,但無論我放在哪裏,每次都忽略選項。是否有另一種方法可以將選項添加到組件中?React-chartjs忽略選項

import React, { PropTypes } from 'react' 
var LineChart = require("react-chartjs").Line; 

var data = { 
    labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'], 
    datasets: [{ 
    label: 'apples', 
    data: [12, 19, 3, 17, 6, 3, 7] 
    }] 
}; 

var options = { 
    lineTension : 0, 
    fill : false, 
    showLines : false 
}; 

const Graph =() => (
    <span> 
    <h1>Heart Graph</h1> 
    <LineChart data={data} options={options} width="600" height="250"/> 
    </span> 
) 

export default Graph 
+0

根據http://www.chartjs.org/docs/#line-chart-dataset-structure'fill'是數據集上的一個屬性,但這對我也不起作用。 – kev

回答

1

您使用的是「數據集結構」,所以檢查出的文檔的選項Line Chart Datasets

他們建議您應該將「選項」與您的數據對象一起發送 - 在這種情況下,請發送給組件data prop。

var data = { 
    labels: ["January", "February", "March", "April", "May", "June", "July"], 
    datasets: [ 
     { 
      label: "My First dataset", 
      data: ['data1', 'data2'], 
      fill: false, 
      lineTension: 0.1, 
      ... 

或者,您可以使用Axis設置將更復雜的選項對象提供給選項prop。

options: { 
    scales: { 
     xAxes: [{ 
      type: 'linear', 
      position: 'bottom' 
     }] 
    } 
}