[英]Chart.js How to synchronize pan and zoom in multiple chats
I want to synchronize pan and zoom on multiple charts.我想在多个图表上同步平移和缩放。 I'm been using Chart.js with chartjs-plugin-zoom.
我一直在使用 Chart.js 和 chartjs-plugin-zoom。
charjs-plugin-zoom calls an event with the onZoom callback function. charjs-plugin-zoom 使用 onZoom 回调 function 调用事件。 So, the values at both ends of the X axis are obtained in this way with the callback function.
所以,X轴两端的值就是通过回调function这样的方式得到的。
onZoom: function () {
var minVal = myChartA.getDatasetMeta(0).dataset._scale.chart.scales['x-axis-0']._table[0].time;
var maxVal = myChartA.getDatasetMeta(0).dataset._scale.chart.scales['x-axis-0']._table[1].time;
leftEnd = minVal;
rightEnd = maxVal;
updateChart();
}
Then update the chart with the updateChart function.然后使用 updateChart function 更新图表。
I thought that other charts should be updated with the values of both ends of the X axis obtained by the updateChart function.我以为其他图表应该用updateChart function得到的X轴两端的值来更新。 Call update () with Chart.helpers.each to update all charts.
使用 Chart.helpers.each 调用 update() 来更新所有图表。
function updateChart() {
Chart.helpers.each(Chart.instances, function (instance) {
instance.oprions = {
scales: [{
xAxes: {
time: {
min: leftEnd,
max: rightEnd
}
}
}]
};
instance.update();
});
}
However, the expected result was not obtained.然而,并没有得到预期的结果。 Zoom-PAN reflected only the chart that was operated.
Zoom-PAN 仅反映已操作的图表。
I think that onZoom callback function gets both edge of X-Axis, and updates chart every frame.我认为 onZoom 回调 function 获取 X 轴的两个边缘,并每帧更新图表。 Charts can only be updated with options, so Chart.helpers.each can be used to update all charts at once.
图表只能使用选项更新,因此 Chart.helpers.each 可用于一次更新所有图表。 If both ends of the X axis to be updated are global variables, all graphs can be referenced.
如果要更新的 X 轴两端都是全局变量,则可以引用所有图形。
Is this method incorrect?这种方法不正确吗? Is the option update method wrong?
选项更新方法错了吗? Is the update timing wrong?
更新时间错了吗?
UPDATE更新
I found out how to update the chart by referring to https://www.chartjs.org/docs/latest/developers/updates.html .我通过参考https://www.chartjs.org/docs/latest/developers/updates.html了解了如何更新图表。
Actually, X-axis scales rage of multiple charts has changed, but max zoomed and stopped working again.实际上,多个图表的 X 轴刻度范围已经改变,但最大缩放并再次停止工作。
Reason is not to update reference.原因是不更新参考。 What is?
什么是? The sample code is written as "need to update the reference" as comment.
示例代码写为“需要更新引用”作为注释。 What's mean?
什么意思?
Sample code calles below:下面的示例代码调用:
xScale = chart.scales['newId'];
"newId" is re-assigned as scales id. “newId”被重新分配为 scales id。
But mine is min and max value of scale.但我的是规模的最小值和最大值。 How??
如何??
I figured out how to do this.我想出了如何做到这一点。 It's not a big deal if I know.
如果我知道的话,这没什么大不了的。
Callback function updateChart() should be like this:回调 function updateChart() 应该是这样的:
function updateChart() {
Chart.helpers.each(Chart.instances, function (instance) {
instance.options.scales.xAxes[0].time.min = leftEnd;
instance.options.scales.xAxes[0].time.max = rightEnd;
instance.update();
});
}
Point is that my data is time series data so that scale option should be use "time".重点是我的数据是时间序列数据,因此比例选项应该使用“时间”。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.