Highcharts Gantt - Показывать всплывающую подсказку при наведении пути зависимости - PullRequest
Новая
       28

Highcharts Gantt - Показывать всплывающую подсказку при наведении пути зависимости

0 голосов
/ 11 февраля 2020

Я пытаюсь найти подход для добавления всплывающих подсказок на пути зависимости Highcharts Gantt; но я не уверен, что лучший подход, так как кажется, что нет собственного свойства конфигурации для взаимодействия с путями и конечными точками зависимости.

Я начинаю с подхода привязки события mouseenter к визуализированный .highcharts-point-connecting-path класс; однако возвращенный объект, похоже, не имеет идентифицирующих атрибутов data, чтобы помочь t ie mouseenter объекту, который содержит данные всплывающей подсказки. 

$('#gchart-container').on('mouseenter','.highcharts-point-connecting-path',function(event) {
    console.log( this );
});

// returns
// <path fill="none" opacity="1" stroke="#3ABFDA" stroke-width="1" class="highcharts-point-connecting-path highcharts-color-4" d="M 17.5 125.5 L 30.5 125.5 L 30.5 100.5 L 30.5 100.5 L 30.5 25.5 L 17.5 25.5"></path>

Поскольку у меня уже есть все исходные данные серии, хранящиеся в моем объекте $data, если есть способ добавить пользовательские свойства данных в зависимость серии, которая будет отображаться на узле HTML, то это решение будет работать. Например, добавив пользовательский атрибут, такой как data-series-id или что-то еще: 

// <path fill="none" data-series-id="aa33233dd" opacity="1" stroke="#3ABFDA" stroke-width="1" class="highcharts-point-connecting-path high..... blah blah blah"></path>

Затем можно получить доступ к $data['aa33233dd'], чтобы получить соответствующую информацию ... в теории.

Есть идеи? Или есть способ лучше сделать это?

1 Ответ

1 голос
/ 11 февраля 2020

Я думаю, что лучшим подходом будет создание этой пользовательской функции внутри обратного вызова загрузки, где вы можете иметь доступ ко всей диаграмме.

Вот мое руководство: https://jsfiddle.net/BlackLabel/1v0oquaf/

Код: 

 chart: {
    events: {
      load() {
        let chart = this;

        setTimeout(function() {
          chart.pathfinder.connections[0].pathfinder.group.element.onmouseover = function() {
            console.log(chart)
          }
        }, 100)
      }
    }
  },

Я использую setTimeout, потому что кажется, что функция загрузки срабатывает раньше путь был рендеринга.

API: https://api.highcharts.com/gantt/chart.events.load

...