reactjs图表实现

Question

我正在尝试在我的 react 应用程序中实现 折线图。我在搜索图表时发现了这个。

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 以使我的 Linechart 工作？

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]]
        }
    ]
}

对于条形图

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：