reactjs圖表執行

Question

我試圖實施折線圖在我的反應應用程序。我在搜索圖表時發現這一點。

https://github.com/reactjs/react-chartjs

我已經使用這段代碼，但目前尚不清楚如何使用chartData和chartOptions

var LineChart = require("react-chartjs").Line; 

var MyComponent = React.createClass({ 
    render: function() { 
    return <LineChart data={chartData} options={chartOptions} width="600" height="250"/> 
    } 
}); 

我怎樣才能申報chartData和chartOptions序，讓我的線型圖的工作？

Answer 1

您需要在您的React組件中將chartData和chartOptions定義爲對象。樣本chartData看起來像

折線圖

var chartOptions: { 
     // Boolean - If we should show the scale at all 
    showScale: true, 
    // Boolean - Whether to show a dot for each point 
    pointDot: true, 
    showLines: false, 
    title: { 
     display: true, 
     text: 'Chart.js Bar Chart' 
    }, 
    legend: { 
     display: true, 
     labels: { 
      boxWidth: 50, 
      fontSize: 10, 
      fontColor: '#bbb', 
      padding: 5, 
     } 
    } 

var chartData = { 
    labels: [['Sunday', 'Monday'], ['Sunday', 'Tuesday']], 
    datasets: [ 
     { 
      color: "#4D5360", 
      highlight: "#616774", 
      borderColor: "rgba(179,181,198,1)", 
      pointBackgroundColor: "rgba(179,181,198,1)", 
      pointBorderColor: "#fff", 
      pointHoverBackgroundColor: "#fff", 
      pointHoverBorderColor: "rgba(179,181,198,1)", 
      label: 'Current lag', 
      fill: false, 
      lineTension: 0.1, 
      fillColor: "rgba(151,187,205,0.2)", 
      strokeColor: "rgba(151,187,205,1)", 
      pointColor: "rgba(151,187,205,1)", 
      pointStrokeColor: "#fff", 
      scaleOverride: true, scaleStartValue: 0, scaleStepWidth: 1, scaleSteps: 30, 
      data: [[5, 8], [3, 11]] 
     } 
    ] 
} 

對於BARCHART

var chartData = { 
     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 chartOptions = { 
     scales: { 
      yAxes: [{ 
       ticks: { 
        beginAtZero:true 
       } 
      }] 
     } 
    } 

見docs here對物體屬性的詳細信息：