Отображение аннотации длины построенной линии при наведении курсора на

Использование dygraphs Я буду строить серию, которая выглядит как лестница: последовательные горизонтальные и вертикальные линии. (С различной шириной и постоянной высотой).Отображение аннотации длины построенной линии при наведении курсора на

Я хотел бы, чтобы аннотация или метка отображали длину горизонтальной линии, когда она зависала. Как это можно сделать? Может быть, есть способ:

обеспечивает функцию обратного вызова, который вызывается, когда отрезок завис над
использования этого обратного вызова, чтобы добавить временную аннотацию (с функцией документированные аннотаций)

Или, может быть, есть лучший способ?

Пример:

<head><script 
    type="text/javascript" 
    src="http://dygraphs.com/dygraph-combined.js"></script> 
</head> 
<body> 
    <div id="graphdiv"></div> 
    <script type="text/javascript"> 
    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 
    }); 
</script> 
</body>

See here for further examples of step plots на сайте Dygraphs

Прогресса:

Я фокусирующий вокруг метода, который я нашел в the source code of dygraph.js: findClosestPoint(). К сожалению, он выполняет линейный (грубой) поиск точек, на видимом холсте (я думаю), но это будет сделано. Поэтому мне нужно работать:

Что это называет,
Какие из этих вызывающих абонентов, что я должен подключиться к
Как присоединить обратный вызов к нему

источник

2016-08-04 Jodes

Можете ли вы предоставить скрипку тому, что у вас есть до сих пор? –

@JonasGrumann, я добавил пример кода - не мог заставить его работать на jsfiddle, я предполагаю, потому что ему нужно https? – Jodes

Вы можете использовать js cdnjs.com. Ссылка находится на странице загрузки dygraphs или вы можете проверить скрипты в своем ответе. – Swippen

Вы можете использовать Аннотировать чтобы решить эту проблему достойно, я думаю (http://dygraphs.com/annotations.html)

Вот jsfiddle с возможным решением: Example fiddle

В основном вы добавляете АННОТАЦИИ как это:

g.setAnnotations([ 
    {  
     series: "seriesX", 
     x: 0, 
     shortText: "2" 
    }, 
    ...

что бы установить 2 в начале первой строки .. , то вы можете иметь 1 для длины seconf линии с другим там, и этой заметкой так на:

... 
{  
    series: "seriesX", 
    x: 2, 
    shortText: "1" 
} 
...

Я понимаю, что это не тогда, когда вы наведете линию, но это так близко, как вы получите с помощью dygraphs я думаю. Другим вариантом является прослушивание mousemove и использование div над графиком для правильной позиции на основе координат мыши/графовых коордов, но это намного больше кода.

Редактировать: Хорошо, я понимаю, если у вас много очков, которые выглядели бы ужасно. Вы можете показать и скрыть аннотацию на парении, как это: Updated fiddle

Я использовал JQuery, чтобы выбрать аннотацию также изменил текст немного, чтобы выбрать его более легко, если много точек имеют одинаковое название. Вы можете попробовать сделать выбор вручную другими способами, если вы не используете jQuery.

 g.updateOptions({ 
     annotationMouseOverHandler: function(annotation, point, dygraph, event) 
     {  
     var anno = $(".dygraphDefaultAnnotation[title='" + annotation.text +"']"); 
      //alert(annotation.text); 
      anno.removeClass("annotationHidden"); 
     }, 
     annotationMouseOutHandler:function(annotation, point, dygraph, event) 
     { 
     var anno = $(".dygraphDefaultAnnotation[title='" + annotation.text +"']"); 
      //alert(annotation.text); 
      anno.addClass("annotationHidden"); 
     } 
     });

А также создать массив аннотаций, используя цикл, чтобы он не был слишком большим.

источник

2016-08-10 14:33:19 Swippen

Спасибо ... Я думал так же, как и ваше первое предложение. Проблема в том, что график будет огромным, поэтому я выбрал Dygraphs, поскольку он дает масштабирование и панорамирование из коробки. Все аннотации создадут беспорядок и, возможно, ударят производительность. Я мог бы попытаться использовать исходный код для поиска возможного взлома. Он уже находит ближайшую серию и точки, поэтому, наверное, вам будет легко, как только вы знаете, как это сделать! – Jodes

@Jodes Отредактировано возможным способом обработки событий мыши, чтобы сделать его менее загроможденным, если много точек. вы также можете настроить, как выглядит аннотация с дополнительным классом, который всегда упоминается в аннотации, используя свойство cssClass аннотации. – Swippen

Блестящий! Спасибо огромное! Рассматривали ли вы участие в документации Dygraphs? Ему нужно еще 4 человека с голосованием по тегу, чтобы внести взносы. Это не известная библиотека, но очень полезная! Внезапное масштабирование и панорамирование - это то, что я не видел ни в одной другой библиотеке – Jodes

Отображение аннотации длины построенной линии при наведении курсора на

ответ

Смежные вопросы