Обновлять аннотации динамически в выбранной точке на графиках? - PullRequest
Новая
       40

Обновлять аннотации динамически в выбранной точке на графиках?

0 голосов
/ 02 апреля 2020

Рассмотрим пример использования аннотаций на графиках (взят из Отображение аннотации длины построенной линии при наведении на ):

https://jsfiddle.net/6xbj847x/1/

По сути, он устанавливает некоторые фиксированные аннотации; и затем, у него есть стандартное взаимодействие графиков, где, если указатель мыши находится близко к точке, точка становится «выделенной», что обозначено точкой.

То, что я хотел бы иметь, динамически обновлены аннотации в месте расположения выбранной точки. В приведенном выше примере это означает, что когда указатель мыши находится ближе всего, скажем, к точке x = 3, отображается только соответствующая аннотация (здесь «.5»):

ex1

... и когда указатель мыши находится ближе всего, скажем, к точке x = 2, предыдущая аннотация исчезает, и отображается только соответствующая аннотация (здесь «1»):

ex2

По сути, аннотация должна следовать за выбранной точкой данных (отмеченной точкой).

Обратите внимание, что решение на основе из: заполнить все аннотации в начале, спрятать их все, а затем при наведении курсора мыши, когда точка данных выделена, просто показать уже существующую аннотацию, не совсем урезать ее для меня - возможно, мне придется иметь дело с десятками тысяч очков, и я не хотел бы, чтобы десятки тысяч аннотаций запирали память.

Кроме того, я хочу, чтобы функциональность легенды оставалась такой же, как в примере - так что обходной путь с legend: "follow" (как на * 1031) *http://dygraphs.com/tests/legend-values.html) не принимаются способный для меня в этом случае (даже если он обычно визуально напоминает вид поведения, который я хочу от аннотаций в этом случае).

В принципе, в принципе, я мог бы управлять массивом аннотаций и изменять его соответственно всякий раз, когда изменения выбора (выбирается новая точка данных), что можно сделать из обработчика legendFormatter:; тогда я мог бы позвонить g.setAnnotations(annotations_list, suppressDraw); проблема заключается в том, что:

http://dygraphs.com/jsdoc/symbols/Dygraph.html#setAnnotations

setAnnotations (ann, suppressDraw)

Обновление списка аннотаций и перерисовать график .

Итак, если я позвоню .setAnnotations из legendFormatter, начнется перерисовка, которая в конечном итоге снова вызывает legendFormatter, что вызывает .setAnnotations et c - я получаю рекурсивную l oop, и браузер в конечном итоге зависает.

Если я попытаюсь предотвратить это, вызвав suppressDraw = true, то замораживание рекурсии не произойдет - но ничего не отрисовывается.

Итак, так ли это можно добиться такого рода динамического c перерисовывания аннотаций при наведении мыши - и если да, то как?

Вставка исходного кода jsfiddle на всякий случай:

HTML: 

Graph
<div id="graphdiv"></div>

JS: 

var g = new Dygraph(document.getElementById("graphdiv"),
    [
        [0, 1],     // Starts at height 1, step width is 2
        [2, 2],     // step width is 1
        [3, 3],     // step width is 0.5
        [3.5, 4],   // step width is 0.25
        [3.75, 5],  // remainder is at height 5
    ],
    {
        stepPlot: true,
        labels: ["XX","YY"],
        series: {
            "YY": {stepPlot: true}
        }
    });
g.ready(function() {
    g.setAnnotations([
    {      
      series: "YY",
      x: 0,
      shortText: "2"
    },
    {      
      series: "YY",
      x: 2,
      shortText: "1"
    },
    {      
      series: "YY",
      x: 3,
      shortText: ".5"
    }
    ]);    
  });
...