Граф графика искажается / частично смещается

Question

Я регулярно обновляю несколько графиков Dygraphs. Через некоторое время, обычно через несколько минут, некоторые или все из них будут повреждены, как показано на рисунке ниже. Я не смог связать это конкретное событие или браузер. Это происходит даже с простым графиком, где я просто перезагружаю данные, хранящиеся в CSV-файле. Я звоню updateOptions({ file: URL }) на графе объекта, где URL указывает на файл CSV, а затем вызывает resetZoom() на графике объекта для обновления осей. Поиск в Google не выявил никого, страдающего подобным поведением, так что я потерял понимание того, что вызывает это.

Обновление 1: это связано с минимизацией и максимизацией браузера.

Обновление 2: проблема не возникает в Firefox. Это происходит в Google Chrome и Internet Explorer, хотя через некоторое время в IE возникает дополнительная проблема зависания (проблема еще на один день).

Обновление 3: минимум рабочих примеров добавлено по адресу http://jsfiddle.net/williamshipman/tvxekq56/ и http://jsfiddle.net/williamshipman/af66qstt/. Повторно минимизируйте и максимизируйте окно браузера, через некоторое время происходит искажение. В первом примере используется AngularJS (как и моя собственная работа), а во втором демонстрируется та же ошибка в чистом JavaScript. Возможно, вам придется свести к минимуму и увеличить до десятка раз, чтобы увидеть ошибку, это кажется довольно случайным.

Answer 1

Корень проблемы

Контекст холста не полностью восстановлен после завершения рисования.

Решение 1. (обходное решение)

Инъекционное canvas_ctx_.restore() после розыгрыша и context.save() до. save() необходим, потому что библиотека восстанавливает контекст перед каждым рисованием (кроме начального).

let g = new Dygraph('graph', {
  underlayCallback: (context) => {
    context.save();
  },
  drawCallback: (dygraph) => {
    dygraph.canvas_ctx_.restore();
  },
});

Решение 2. (исправление библиотеки)

Вот мой коммит, который вы можете применить к библиотекам src/dygraph.js https://github.com/pawelzwronek/dygraphs/commit/c66ca37b82f14e096652a338cae8abf568b9c764

Answer 2

Для меня похожая проблема возникает, когда я показываю и скрываю ось 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();
};