React-chartjs 忽略选项
React-chartjs ignoring options
我使用 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
您使用的是 "dataset structure",因此请查看有关 Line Chart Datasets 选项的文档。
他们建议您将 "options" 与您的数据对象一起发送 - 在本例中为组件 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'
}]
}
}
Chart.js 版本 2 到版本 3 有变化
对于天平命名空间是 options.scales
体重秤:{
是:{
分钟:0,
最大值:100,
}
},
X: {
网格: {
显示:真实,
}
},
我们这样使用
我使用 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
您使用的是 "dataset structure",因此请查看有关 Line Chart Datasets 选项的文档。
他们建议您将 "options" 与您的数据对象一起发送 - 在本例中为组件 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'
}]
}
}
Chart.js 版本 2 到版本 3 有变化 对于天平命名空间是 options.scales
体重秤:{ 是:{ 分钟:0, 最大值:100, } }, X: { 网格: { 显示:真实, } }, 我们这样使用