反应图忽略选项

Question

我已经得到了这个代码使用的反应-图表。它显示图形，但每次都忽略选项，不管我在那里放了什么。还有其他方法可以将选项添加到组件中吗？

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

Answer 1

您使用的是"dataset结构“，因此请查看线图数据集选项上的文档。

它们建议您将“选项”与数据对象一起发送--在本例中，应该将“选项”发送到组件data支柱。

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

或者，您可以为选项支柱提供一个带有Axis设置的更复杂的选项对象。

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

Answer 2

Chart.js版本2更改为版本3，因为scales名称空间是options.scales。

比例：{ y：{ min: 0，max: 100，}，x：{ grid：{ display: true，} }，我们这样使用