Интерактивная подсветка региона с помощью dygraph.js - PullRequest
Новая
       10

Интерактивная подсветка региона с помощью dygraph.js

0 голосов
/ 07 марта 2019

Для проекта, над которым я работаю, я пытаюсь интерактивно выделить определенные области графика, который я построил, используя dygraphs.js.Вот что я пытаюсь: enter image description here enter image description here

Так что каждый раз, когда пользователь нажимает на флажок, часть графика будетподсвечен.На веб-сайте dygraphs приведен пример (без взаимодействия с пользователем) с использованием приведенного ниже кода: 

var g = new Dygraph(
      document.getElementById("div_g"),
      data,
      {
        labels: ['X', 'Est.', 'Actual'],
        animatedZooms: true,
        underlayCallback: function(canvas, area, g) {
          var bottom_left = g.toDomCoords(highlight_start, -20);
          var top_right = g.toDomCoords(highlight_end, +20);

          var left = bottom_left[0];
          var right = top_right[0];

          canvas.fillStyle = "rgba(255, 255, 102, 1.0)";
          canvas.fillRect(left, area.y, right - left, area.h);
        }

      }

Они используют параметр underlayCallback, который вызывается до рисования диаграммы и предоставляет контекст холста для рисования.on (http://dygraphs.com/options.html#underlayCallback).

Однако, так как мой график уже существует, когда нажата кнопка выделения, я не могу использовать этот метод. Чтобы сделать эту работу, мне придется заново рисовать полные графики каждый раз, когда пользователь нажимаетна кнопке выделения. Кто-нибудь знает способ сделать эту работу более интерактивной и динамичной?

1 Ответ

0 голосов
/ 07 марта 2019

Вы можете получить холст для графика из переменной graph с помощью:

var canvas = g.canvas_ctx_;

Тогда вы можете рисовать на нем, как вам угодно.

...