2

我将 react-chartjs 图表的数据和选项配置为

var lagData = [{
    options: {
      // 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 Line Chart'
    },
    legend: {
        display: true,
        labels: {
           boxWidth: 50,
           fontSize: 10,
           fontColor: '#bbb',
           padding: 5,

        }
    }
},
    data: {
        labels: ['1', '2', '3', '4'],
        datasets: [
            {
                label: 'Current lag',
                fill: false,
                lineTension: 0.1,
                backgroundColor: "rgba(75,192,192,0.4)",
                borderColor: "rgba(75,192,192,1)",
                borderCapStyle: 'butt',
                borderDashOffset: 0.0,
                borderJoinStyle: 'miter',
                pointBorderColor: "rgba(75,192,192,1)",
                pointBackgroundColor: "#fff",
                pointBorderWidth: 1,
                pointHoverRadius: 5,
                pointHoverBackgroundColor: "rgba(75,192,192,1)",
                pointHoverBorderColor: "rgba(220,220,220,1)",
                pointHoverBorderWidth: 2,
                pointRadius: 1,
                pointHitRadius: 10,
                spanGaps: false,
                fillColor: "rgba(220,220,220,0.2)",
                strokeColor: "rgba(220,220,220,1)",
                pointColor: "rgba(220,220,220,1)",
                pointStrokeColor: "#fff",
                scaleOverride: true, scaleStartValue: 0, scaleStepWidth: 1, scaleSteps: 30,
                data: [50, 35, 60, 67]
            }
        ]
    }
}]

我在我的代码中使用它

<Line data={lagData[0].data} options={lagData[0].options} width="600" height="300" />

这就是我导入库的方式

import {Line, Bar} from 'react-chartjs';
import Chart from 'chartjs';

令人惊讶的是，数据被绘制到图表上，但选项根本不会影响图表。我无法完全弄清楚问题所在。我的格式是错误的还是我错过了一些非常愚蠢的东西。

任何帮助表示赞赏。

更新

更改import Chart from 'chart.js';为后import Chart from 'chartjs';，会呈现一些直接配置showScale, pointDot, showLines，例如一些数据集选项，但title and legends仍然不显示。

4

1 回答 1

0

react-chartjs 不支持 Chart.js V2。

请参考 Chart.js v1.1.1 的文档。（https://github.com/chartjs/Chart.js/tree/v1.1.1/docs）

如果你想使用 Chart.js V2，请尝试 chartjs-v2 分支。

npm i react-chartjs@git://github.com/reactjs/react-chartjs.git#chartjs-v2

有关更多信息，请访问https://github.com/reactjs/react-chartjs/issues/134#issuecomment-233499768

于 2018-01-04T17:29:52.597 回答