highcharts-ng — добавление всплывающего окна к элементам легенды

#javascript #jquery #angularjs #twitter-bootstrap #highcharts

#javascript #jquery #angularjs #twitter-bootstrap #highcharts

Вопрос:

Я пытаюсь добавить всплывающее окно к элементам легенды для одной из моих диаграмм. Я использую twitter bootstrap и пробовал метод javascript, а также метод шаблона, но безуспешно. Когда я пытаюсь использовать метод javascript для события загрузки диаграммы, chart.legend.Массив AllItems всегда пуст, что странно, потому что, если я печатаю свойство chart.legend на консоли, я вижу свойство AllItems длиной 4. Если я напечатаю диаграмму.легенда.Свойство AllItems для консоли показывает длину как 0. В любом случае массив AllItems не загружается при срабатывании события загрузки диаграммы. Метод javascript для всплывающего окна приводит к $(…).popover не является ошибкой функции, потому что «.highcharts-legend-item» не определен при загрузке. Похоже, что все свойства и элементы диаграммы фактически не загружаются при срабатывании этого события.

событие загрузки

   events: {
      load: function(e) {
         $(".highcharts-legend").popover({trigger:'hover', placement:'bottom', title:'Title!', content:'Content'}).hover(function() {
         $('.popover').appendTo($(document.body));
      });

      }
  

шаблон

 legend: {
    align: 'left',
    verticalAlign: 'bottom',
    layout: 'vertical',
    x: 0,
    y: 2,
    labelFormatter: function () {
      return '<span>'   this.name   '</span><i class="fa fa-info-circle"></i>';
    },
    useHTML:true
  

Редактировать
Я забыл загрузить popover.js из bootstrap, но это не полностью устранило проблему. Единственный раз, когда я могу отобразить всплывающее окно, — это передать селектор «.highcharts-legend» в jquery. Попытка использовать «.highcharts-legend-item» или любой дочерний элемент «.highcharts-legend» не отображает всплывающее окно. Есть идеи?

Комментарии:

1. Если эти элементы еще не отображаются, то как насчет использования setTimeout( function () { .. popover code here .. }, 0) ? Я думаю, вы не можете делегировать такие события, как $('.highcharts-legend').on('mouseover', '.highcharts-legend-item', callback) ?

2. Исправлено с помощью setTimeout! Спасибо, чувак!!