javascript - Dygraph 图形变形/部分移动

Question

我会定期更新几个 Dygraphs 图表。一段时间后，通常是几分钟，其中一些或全部被损坏，如下图所示。我无法将此与特定事件或浏览器联系起来。即使在我只是重新加载存储在 CSV 文件中的数据的简单图形中，也会发生这种情况。我在图形对象上调用 updateOptions({ file: URL })，其中 URL 指向 CSV 文件，然后调用 resetZoom()在图形对象上更新轴。谷歌搜索没有发现任何人遭受类似行为，所以我不知道是什么原因造成的。

更新 1:它与最小化和最大化浏览器相关联。

更新 2: 这个问题不会在 Firefox 中出现。它确实发生在 Google Chrome 和 Internet Explorer 中，尽管 IE 有一段时间后卡住的额外问题(另一天的问题)。

更新 3:在 http://jsfiddle.net/williamshipman/tvxekq56/ 添加了最少的工作示例和 http://jsfiddle.net/williamshipman/af66qstt/ .反复最小化和最大化浏览器窗口，一段时间后出现失真。第一个示例使用 AngularJS(就像我自己的作品)，而第二个示例在纯 JavaScript 中演示了相同的错误。您可能需要最小化和最大化十几次才能看到错误，这看起来很随机。

Answer 1

对我来说，当我显示和隐藏 Y2 轴时会出现类似的问题。 这一行帮助了我:ctx.clearRect(0, 0, this.width, this.height);

文件:dygraph-canvas.js

var DygraphCanvasRenderer = function(dygraph, element, elementContext, layout) {
  ...
  ctx = this.dygraph_.hidden_ctx_;
  ctx.clearRect(0, 0, this.width, this.height); // <== clear whole canvas before cliping
  ctx.beginPath();
  ctx.rect(this.area.x, this.area.y, this.area.w, this.area.h);
  ctx.clip();
};