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
中分配数据并设置选项。