如何在缩放后重置图形/图表，使用chartjs平移

Question

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

先谢谢你。

Answer 1

有多种方法可以做到这一点：

尝试以下任何一种：

1.清除（）

2.销毁

myLineChart.destroy();

然后重新初始化图表：

var ctx = document.getElementById("myChartLine").getContext("2d");
myLineChart = new Chart(ctx).Line(data, options);

删除元素，然后将新元素重新添加到父容器

var resetCanvas=function（）{

   $('#results-graph').remove(); // this is my <canvas> element

   $('#graph-container').append('<canvas id="results-graph"><canvas>');

  canvas = document.querySelector('#results-graph'); 

  ctx = canvas.getContext('2d');

  ctx.canvas.width = $('#graph').width(); // resize to parent width

  ctx.canvas.height = $('#graph').height(); // resize to parent height

  var x = canvas.width/2;
  var y = canvas.height/2;
  ctx.font = '10pt Verdana';
  ctx.textAlign = 'center';
  ctx.fillText('This text is centered on the canvas', x, y);
};`

.更新（）

在图表实例上调用update（）将使用任何更新的值重新渲染图表，允许您编辑多个现有点的值，然后在一个动画渲染循环中渲染这些点。

也可参考：

如何从画布上清除图表，以便无法触发悬停事件？

图表js加载全新的数据

Answer 2

尝试chartjs插件缩放

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

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

...

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

...

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

图表。我使用的js版本是2.9。3和chartjs插件缩放版本0.7。7

见示例：

• chartjs-plugin-zoom样本
• chartjs缩放和平移代码