React-chartjs 忽略选项答案

【问题标题】：React-chartjs ignoring optionsReact-chartjs 忽略选项
【发布时间】：2016-11-25 19:22:07
【问题描述】：

我使用 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

【问题讨论】：

根据chartjs.org/docs/#line-chart-dataset-structure fill 是数据集上的一个属性，但这对我也不起作用。

标签： javascript reactjs react-chartjs

【解决方案1】：

您使用的是“数据集结构”，因此请查看有关 Line Chart Datasets 选项的文档。

他们建议您应该将“选项”与您的数据对象一起发送 - 在这种情况下发送到组件 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'
        }]
    }
}

【讨论】：

【解决方案2】：

Chart.js 第 2 版到第 3 版有变化对于 scales 命名空间是 options.scales

尺度：{ 是：{ 分钟：0，最大：100， } }, X： { 网格： { 显示：真， } }, 我们这样使用

【讨论】：