当 x 值与标签重合时,Chartjs 折线图会变得混乱
Chartjs line chart gets all scrambled up when an x value coincides with a label
我正在使用 react-chartjs-2
绘制折线图,但是当我使用以下代码时
const data = {
labels: [0, 11, 21, 31, 41, 50],
datasets: [
{
label: 'Radiant',
data: [1, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50].map((e) => ({
x: e,
y: Math.round(50 + Math.random() * 30),
})),
fill: false,
borderColor: 'green',
backgroundColor: 'green',
},
{
label: 'Dire',
data: [1, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50].map((e) => ({
x: e,
y: Math.round(50 + Math.random() * 30),
})),
fill: false,
borderColor: 'red',
backgroundColor: 'red',
},
],
};
我的最后一点显示了两次。
当我将标签修改为 0、10、20 等时,它变得更加疯狂,我得到以下结果。
我通过在 xAxes 中将类型设置为线性来修复它:
scales: {
xAxes: [
{
type: 'linear',
},
],
},
我正在使用 react-chartjs-2
绘制折线图,但是当我使用以下代码时
const data = {
labels: [0, 11, 21, 31, 41, 50],
datasets: [
{
label: 'Radiant',
data: [1, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50].map((e) => ({
x: e,
y: Math.round(50 + Math.random() * 30),
})),
fill: false,
borderColor: 'green',
backgroundColor: 'green',
},
{
label: 'Dire',
data: [1, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50].map((e) => ({
x: e,
y: Math.round(50 + Math.random() * 30),
})),
fill: false,
borderColor: 'red',
backgroundColor: 'red',
},
],
};
我的最后一点显示了两次。
当我将标签修改为 0、10、20 等时,它变得更加疯狂,我得到以下结果。
我通过在 xAxes 中将类型设置为线性来修复它:
scales: {
xAxes: [
{
type: 'linear',
},
],
},