为什么某些 react-chartjs-2 选项被忽略了?
Why are some react-chartjs-2 options being ignored?
我有一个简单的折线图,我试图将网格线从默认的灰色更改,但是选项对象似乎是有选择地工作的。也许我遗漏了一些基本的东西,但我已经摆弄了几个小时,却无法让它工作,感谢任何帮助!我正在使用“react-chartjs-2”。
下面是我传递数据和选项的 render() 方法。
render() {
const data = {
labels: this.state.realTimes,
datasets: [
{
label: "Price",
data: this.state.Prices,
fill: false,
backgroundColor: "rgb(255, 255, 255)",
borderColor: "rgba(255, 255, 255)"
}
]
};
const options = {
scales: {
yAxis: {
beginAtZero: true, //this works
gridLines: {
color: "rgba(171,171,171,1)", //this doesn't
lineWidth: 0.5
}
}
}
};
return (
<div>
{this.state.loading ? (
this.loading()
) : (
<Line data={data} options={options} width={600} height={160} />
)}
</div>
);
}
将 scales.yAxis.gridLines
更改为 scales.yAxis.grid
即可。
see Grid Line Configuration from Chart.js documentation or the Grid Configuration samples page.
请查看下面的可运行 JavaScript 代码,看看它是如何工作的。
请看
new Chart('line-chart', {
type: 'line',
data: {
labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
datasets: [{
label: 'My Dataset',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.2
}]
},
options: {
scales: {
yAxis: {
beginAtZero: true,
grid: {
color: 'rgb(0 ,0 ,255)',
lineWidth: 0.5
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
<canvas id="line-chart" height="100"></canvas>
React chart.js 未与 chart.js 同步,因此您无法使用 v3。请使用 v2 语法,因为这是 react-chartjs 使用的语法。
https://www.chartjs.org/docs/2.9.4/axes/styling.html#grid-line-configuration
如果您将 yAxes: {gridLines: {color: 'red'}}
更改为 yAxes: [{gridLines: { color: 'red'}}]
,它应该会按预期工作
我有一个简单的折线图,我试图将网格线从默认的灰色更改,但是选项对象似乎是有选择地工作的。也许我遗漏了一些基本的东西,但我已经摆弄了几个小时,却无法让它工作,感谢任何帮助!我正在使用“react-chartjs-2”。
下面是我传递数据和选项的 render() 方法。
render() {
const data = {
labels: this.state.realTimes,
datasets: [
{
label: "Price",
data: this.state.Prices,
fill: false,
backgroundColor: "rgb(255, 255, 255)",
borderColor: "rgba(255, 255, 255)"
}
]
};
const options = {
scales: {
yAxis: {
beginAtZero: true, //this works
gridLines: {
color: "rgba(171,171,171,1)", //this doesn't
lineWidth: 0.5
}
}
}
};
return (
<div>
{this.state.loading ? (
this.loading()
) : (
<Line data={data} options={options} width={600} height={160} />
)}
</div>
);
}
将 scales.yAxis.gridLines
更改为 scales.yAxis.grid
即可。
see Grid Line Configuration from Chart.js documentation or the Grid Configuration samples page.
请查看下面的可运行 JavaScript 代码,看看它是如何工作的。
请看
new Chart('line-chart', {
type: 'line',
data: {
labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
datasets: [{
label: 'My Dataset',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.2
}]
},
options: {
scales: {
yAxis: {
beginAtZero: true,
grid: {
color: 'rgb(0 ,0 ,255)',
lineWidth: 0.5
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
<canvas id="line-chart" height="100"></canvas>
React chart.js 未与 chart.js 同步,因此您无法使用 v3。请使用 v2 语法,因为这是 react-chartjs 使用的语法。
https://www.chartjs.org/docs/2.9.4/axes/styling.html#grid-line-configuration
如果您将 yAxes: {gridLines: {color: 'red'}}
更改为 yAxes: [{gridLines: { color: 'red'}}]
,它应该会按预期工作