[英]How to display specific data range on my chart's dataset using Zoom and Pan on Chart.js 3.+?
[英]Chart.js How to synchronize pan and zoom in multiple chats
我想在多個圖表上同步平移和縮放。 我一直在使用 Chart.js 和 chartjs-plugin-zoom。
charjs-plugin-zoom 使用 onZoom 回調 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();
}
然后使用 updateChart function 更新圖表。
我以為其他圖表應該用updateChart function得到的X軸兩端的值來更新。 使用 Chart.helpers.each 調用 update() 來更新所有圖表。
function updateChart() {
Chart.helpers.each(Chart.instances, function (instance) {
instance.oprions = {
scales: [{
xAxes: {
time: {
min: leftEnd,
max: rightEnd
}
}
}]
};
instance.update();
});
}
然而,並沒有得到預期的結果。 Zoom-PAN 僅反映已操作的圖表。
我認為 onZoom 回調 function 獲取 X 軸的兩個邊緣,並每幀更新圖表。 圖表只能使用選項更新,因此 Chart.helpers.each 可用於一次更新所有圖表。 如果要更新的 X 軸兩端都是全局變量,則可以引用所有圖形。
這種方法不正確嗎? 選項更新方法錯了嗎? 更新時間錯了嗎?
更新
我通過參考https://www.chartjs.org/docs/latest/developers/updates.html了解了如何更新圖表。
實際上,多個圖表的 X 軸刻度范圍已經改變,但最大縮放並再次停止工作。
原因是不更新參考。 什么是? 示例代碼寫為“需要更新引用”作為注釋。 什么意思?
下面的示例代碼調用:
xScale = chart.scales['newId'];
“newId”被重新分配為 scales id。
但我的是規模的最小值和最大值。 如何??
我想出了如何做到這一點。 如果我知道的話,這沒什么大不了的。
回調 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();
});
}
重點是我的數據是時間序列數據,因此比例選項應該使用“時間”。
JSFillde已更新。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.