我有两个不同的图表。第一个图表代码如下所示:
function createLineGraph(chartId,data,labels,xLabel,yLabel,title) {
// Create a new Chart.js instance
var ctx = document.getElementById(chartId).getContext('2d');
const chartObject = new Chart(ctx, {
type: 'line',
data: {
labels: [],
datasets: [],
},
plugins: [miniLabelPlugin],
options: {
// tooltips: {enabled: true},
onHover(e, elements, chart) {
if (elements.length) {
for (const el of elements) {
const dsCount = chart.data.datasets.length;
for (let i = 0; i < dsCount; i++) {
if (i !== el.datasetIndex) {
// chart.setDatasetVisibility(i, false);
}
}
}
// chart.update();
} else {
const dsCount = chart.data.datasets.length;
for (let i = 0; i < dsCount; i++) {
// chart.setDatasetVisibility(i, true);
}
// chart.update();
}
},
hover: {mode: "point",intersect: true},
animation: {
duration: 0
},
plugins: {
title: {
display:true,
text:title,
font: {
weight:'bold',
size:'18',
}
},
legend: {
display: false,
}
},
layout: {
padding: {
right: 100,
}
},
responsive: true,
scales: {
x: {
ticks:{
display: true,
// autoSkip: true,
maxTicksLimit: 10,
},
title: {
display: true,
text: xLabel
},
grid: {
display: false,
text: xLabel
}
},
y: {
beginAtZero: true,
// min: 0,
// max: 725.5,
ticks: {
// stepSize: 5,
display: true,
// autoSkip:true,
},
title: {
display: true,
text: yLabel
},
grid: {
display: false,
}
}
}
}
});
return chartObject
}
第二张图表如下所示:
function createDVolGraph(chartId) {
var ctx = document.getElementById(chartId).getContext('2d');
const chartObject = new Chart(ctx, {
type: 'line',
data: {
labels:[],
datasets: [
{
yAxisID: 'A', // <-- the Y axis to use for this data set
label: 'Bitcoin Perpetual',
data:[],
borderWidth: 2,
borderDash:[2,2],
backgroundColor: 'black',
borderColor: 'black'
},
{
yAxisID: 'B',
label: 'dVol',
data:[],
backgroundColor: 'blue',
borderColor: 'blue'
}
]
},
options: {
responsive: true,
scales: {
x: {
ticks:{
display: true,
// autoSkip: true,
// maxTicksLimit: 10,
},
title: {
display: true,
},
grid: {
display: false,
}
},
A: {
type: 'linear',
position: 'left',
ticks: { beginAtZero: true, color: 'black' },
// Hide grid lines, otherwise you have separate grid lines for the 2 y axes
grid: { display: false }
},
B: {
type: 'linear',
position: 'right',
ticks: { beginAtZero: true, color: 'blue' },
grid: { display: false }
},
x: { ticks: { beginAtZero: true } }
}
}
});
return chartObject
}
第一张图表 X 轴如下所示:
第二张图表:
注意分钟的跳过,尽管 X 轴的数据完全相同,但一个人跳过 3 个其他人 6 个。
如何确保两者具有相同的 X 轴?
我正在使用 Charjs v3