Dygraph: постоянно выделять конкретную точку данных

Question

Я хочу выделить конкретную точку данных (например, зеленый кружок) в графе данных серии.Это должна быть статическая / постоянная точка выделения, независимая от наведения мыши.Например, необходимо выделить пиковую точку всех точек данных на графике.Я ожидаю способ использовать координаты x, y для информирования dygraph, чтобы выделить конкретную точку данных.

Answer 1

Для этого вы можете использовать опцию underlayCallback, которая позволяет рисовать на базовом холсте графика.

Приведенный ниже пример быстро извлечен из гораздо более сложного примера, который у меня есть - надеюсь, этодостаточно близко к работе, чтобы дать вам идею:

Чтобы выделить точку x = 5, y = 17

graph_options.underlayCallback = function(canvas, area, g) {

  // Convert data co-ordinates to canvas co-ordinates
  var xPoint = g.toDomXCoord(5);
  var yPoint = g.toDomYCoord(17);

  // Draw a red circle
  canvas.fillStyle = 'rgba(255, 0, 0, 1)';
  canvas.beginPath();
  canvas.arc(xPoint, yPoint, 20, 0, 2 * Math.PI, false);
  canvas.fill();
}

Выше будет нарисовать большой красный круг (радиус 20) в нужной точке данных,и «реальная» точка данных будет нарисована поверх нее и будет вести себя как любая другая.Этот метод работает достаточно быстро, чтобы иметь много выделенных точек, но не особенно замедляет процесс.