Question

我经常更新几张Dygraphs图表。经过一段时间后，通常需要几分钟，部分或全部会被破坏，如下图所示。我无法将此特定事件或浏览器绑定。即使使用简单的图形，我只是重新加载存储在CSV文件中的数据。我在图表对象上调用updateOptions({ file: URL })，其中URL指向CSV文件，然后在图表对象上调用resetZoom()以更新轴。谷歌搜索没有透露任何人遭受类似的行为，所以我迷失了造成这种情况的原因。

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

更新2： Firefox中不会出现此问题。它确实发生在谷歌浏览器和Internet Explorer中，虽然IE在一段时间后会出现另外的冻结问题（另一天会出现问题）。

更新3：在http://jsfiddle.net/williamshipman/tvxekq56/和http://jsfiddle.net/williamshipman/af66qstt/添加的最低工作示例。重复最小化并最大化浏览器窗口，一段时间后发生失真。第一个例子使用AngularJS（就像我自己的工作一样），而第二个例子演示了纯JavaScript中的相同错误。你可能不得不最小化并最大化十几次才能看到这个bug，它看起来很随意。

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();
};

Answer 2

问题的根源

完成所有绘制后，Canvas上下文未完全恢复。

解决方案1。（解决方法）

完成绘制后canvas_ctx_.restore()并context.save()之前注入save()。需要let g = new Dygraph('graph', { underlayCallback: (context) => { context.save(); }, drawCallback: (dygraph) => { dygraph.canvas_ctx_.restore(); }, });因为库在每次绘制之前恢复上下文（初始绘制除外）。

src/dygraph.js

解决方案2。（库修复）

这是我的提交，您可以申请lib function custom_date_format($date_a, $date_b){ $start_date = strtotime($date_a); $end_date = strtotime($date_b); if ($end_date != '') { $year1 = date('Y', $start_date); $year2 = date('Y', $end_date); $month1 = date('m', $start_date); $month2 = date('m', $end_date); if ($start_date < $end_date) { if ($year1 != $year2) { $holiday_date = date('F j, Y', $start_date) . ' to ' . date('F j, Y', $end_date); } else { if ($month1 != $month2) { $holiday_date = date('j F', $start_date) . ' - ' . date('j F', $end_date) . ' '. date('Y', $end_date); } else { $holiday_date = date('j', $start_date) . ' - ' . date('j', $end_date) . ' '.date('F', $end_date).' '. date('Y', $end_date); } } } else { $holiday_date = 'Invalid date range.'; } } else { $holiday_date = date('F j, Y', $start_date); } return $holiday_date; } https://github.com/pawelzwronek/dygraphs/commit/c66ca37b82f14e096652a338cae8abf568b9c764

Dygraph图变形/部分偏移

2 个答案: