Chart.js: синхронизированное масштабирование и панорамирование на нескольких графиках
Страница пути имеет многострочный график от Chart.js. Каждый график способен индивидуально масштабировать и панорамировать.
Хотя я хочу сделать синхронное масштабирование и панорамирование. То есть, когда один график масштабируется, другие графики также синхронизируются с масштабированием.
Кто знает решение?
function bindData(parameter, divID) {
let tmp = [];
let myData = [];
for (let i = 0; i < dataset.length; i++) {
myData[i] = [];
tmp = dataset[i];
for (let j = 0; j < tmp.length; j++) {
if (tmp[j][parameter]) {
let obj = {};
if (tmp[j].device == deviceID[i]) {
var m = moment(tmp[j].logtime, "YYYY-MM-DDTHH:mm:ssZ");
obj["x"] = m.format("YYYY-MM-DD HH:mm:ss");
obj["y"] = tmp[j][parameter];
myData[i].push(obj);
}
}
}
}
drawLineChart(myData, divID);
}
function multipleData(data){
var array=[];
console.log("data.length:"+ data.length);
for(var i=0; i< data.length; i++){
array[i]=[];
var obj = {}
obj.label="DATA"+i;
obj.data=data[i];
array[i]=obj;
}
return array;
}
// --------------------------------------------
function drawLineChart(mydata, divID) {
var ctx = document.getElementById(divID).getContext("2d");
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: multipleData(mydata)
},
options: {
responsive: true,
scales: {
xAxes: [{
type: 'time',
time: {
displayFormat: 'h:mm',
}
}]
},
pan: {
enabled: true,
mode: 'x'
},
zoom: {
enabled: true,
mode: 'x',
}
},
});
}
Приведенный выше код является частью исходного кода. bindData
вызывается для установки данных, и drawLineChart
нарисован. В это время назначьте данные и установите параметры в multipleData
,