如何使用 Chartjs 缩放、平移后重置图形/图表

Question

我最近向折线图添加了放大和平移功能。现在我想添加一个重置按钮或类似的东西，当按下图形时，它会恢复到正常位置/形状。目前我正在绘制它的动态数据，每 10 秒更新一次。

先感谢您。

Answer 1

尝试Chartjs-plugin-zoom

首先，获取Chart.js实例，然后您可以调用resetZoom该实例的函数来重置缩放和平移。

window.myLine = new Chart(ctx, config);

...

function resetZoom() {
  window.myLine.resetZoom();
}

...

<button onclick="resetZoom()">Reset Zoom</button>

我正在使用的版本chart.js是2.9.3和chartjs-plugin-zoom版本0.7.7

参见示例：

• Chartjs-插件-缩放示例
• codepen 上的 ChartJS 缩放和平移