制作固定轴与react-chartjs-2尺度

Question

我想用chart .js和React创建一个图表，它有一个持久的yAxis范围从-15到15,stepSize为5。作为一个例子，我复制了动态条形图，可以在这里找到:https://reactchartjs.github.io/react-chartjs-2//dynamic-bar

charjs.org的文档中提到了轴的最小和最大属性:https://www.chartjs.org/docs/3.2.0/samples/scales/linear-min-max.html但是react-chartjs-2似乎忽略了这些值。我试着:

1. 旧命名:scales.yAxis
2. 新命名:scales.y
3. 添加"scaleOverride: true"选项。scale和option.scales.y
6. 删除config.scale .y中除了min, max和stepsize以外的所有内容

我当前的App.js:

import React, { useEffect, useState } from 'react';
import { Bar } from 'react-chartjs-2';
const rand = () => Math.round(Math.random() * 20 - 10);
const genData = () => ({
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [
{
label: 'Scale',
data: [rand(), rand(), rand(), rand(), rand(), rand()],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
],
borderWidth: 1,
},
],
});
const options = {
scales: {
scaleOverride : true,
y: [
{
type: "time",
ticks: {
min: 0,
max: 150,
stepSize: 20
},

},
],
x: [
{
type: "Amp",
ticks: {
},

},
],
},
};
function App() {
const [data, setData] = useState(genData());
useEffect(() => {
const interval = setInterval(() => setData(genData()), 1000);
return () => clearInterval(interval);
}, []);
return (
<>
<Bar className="Linechart" data={data} options={options} />
</>
);
};
export default App;

有人能解释给我什么是正确的方式来设置y轴到一个固定的范围?提前谢谢。

Answer 1

这是一个简单的语法错误。使用这个配置可以工作:

const options = {
scales: {
y:
{
min: -15,
max: 15,
stepSize: 5,
},
x:
{

},
},
};

Answer 2

根据文档，使用这个

scales: {
y: {
min: -1,
max: 1,
ticks: {
stepSize: 1,
},
},
},

基本上，在ticks prop 中添加stepSize

Answer 3

上述公认的答案似乎对我不起作用。我找到了这个解决方案，使用react-chartjs-2库在柱状图的y轴上定制比例效果很好。

const chartOptions = {
scales: {
yAxes: [{
ticks: {
beginAtZero: false,
min: 0,
stepSize: 2,
callback: function(value) {
return `${value}`
}
}
}]
}
}

在你的柱状图中像这样使用这个对象:<Bar data={data} options={chartOptions} />