我试图创建一个双Y轴图表的RSI和价格,其中我想标签Y轴的RSI为:0,10,20...100
我正在使用Chartjs v3
问题是,尽管设置min
和max
和stepSize
为0,它并没有保持Y轴固定。我怎么做呢?下面是我的代码:
function createDoubleLineGraph(chartId,chartTitle,y1Label,y2Label,y1Color,y2Color) {
const ctx = document.getElementById(chartId).getContext('2d');
const chartObject = new Chart(ctx, {
type: 'line',
data: {
labels: ['Friday', 'Saturday', 'Sunday', 'Monday'],
datasets: [
{
yAxisID: 'A', // <-- the Y axis to use for this data set
label: y1Label,
data: [],
borderWidth: 1,
backgroundColor: y1Color,
borderColor: y1Color,
},
{
yAxisID: 'B', // <-- the Y axis to use for this data set
label: y2Label,
data: [],
backgroundColor: y2Color,
borderColor: y2Color,
ticks: {
beginAtZero: false,
},
}
]
},
options: {
plugins: {
title: {
display:true,
text:chartTitle,
font: {
weight:'bold',
size:'18',
}
},
},
responsive: true,
scales: {
x: {
grid: {display: false},
title: {
display: true,
text: 'Date',
font: {
weight:'bold',
size:'14',
}
},
ticks:{
display: true,
// autoSkip: true,
// maxTicksLimit: 10,
}
},
A: {
type: 'linear',
position: 'right',
ticks: { beginAtZero: true, color: 'red',min:0,max:100,suggestedMax: 100,stepSize:5},
// Hide grid lines, otherwise you have separate grid lines for the 2 y axes
grid: { display: false }
},
B: {
type: 'linear',
position: 'left',
ticks: { beginAtZero: true, color: 'black' },
grid: { display: false }
},
x: { ticks: { beginAtZero: true } }
}
}
});
return chartObject
}
1条答案
按热度按时间bjg7j2ky1#
在标记为“A”的Y轴的选项中,已将beginAtZero属性设置为true,这意味着即使数据中的最小值大于0,刻度也将始终从0开始。如果希望刻度固定在0到100之间,则应将beginAtZero设置为false,并使用min和max属性设置刻度的最小值和最大值。
以下是“A”Y轴的更新代码:
这将在0,10,20,...,100处创建刻度,步长为10,刻度将始终从0开始并在100结束。希望它能帮上忙!