события наведения / вывода мыши на высоких диаграммах, запущенные в неправильное время

#javascript #highcharts

Вопрос:

У меня есть столбчатая диаграмма с событиями наведения и вывода курсора мыши в series.point.events, где мне нужно использовать текущую категорию наведенного столбца. Событие over запускается при входе в область столбца, но при наведении курсора на сам столбец запускается событие out . Правильно ли это поведение? Я неправильно использую события?

вот параметры диаграммы:

   var options = {
chart: {
  type: 'column'
},

xAxis: {
  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
    'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
  ]
},

tooltip: {
  shared: true,
  crosshairs: true
},

series: [{
  data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
  point: {
    events: {
      mouseOver: function(event) {
        setTimeout(() => {
          $mouseState.html("mouse state OVER: "   this.category);
        }, 2000);
      },
      mouseOut: function() {
        $mouseState.html("mouse state OUT: "   this.category);
      }
    }
  }
}]

};

*** тайм-аут используется только для отладки

http://jsfiddle.net/62yhg2hq/3/

Ответ №1:

То, что вы хотите, — это события, которые будут проходить под plotOptions

 plotOptions: {
        series: {
            cursor: 'pointer',
            point: {
                events: {
                    mouseOver: function(event) {
                        $mouseState.html("mouse state OVER: "    this.category);
                    },
                    mouseOut: function() {
                        $mouseState.html("mouse state OUT: "   this.category);
                    }
                }
            }
        }
    }

Обновленная скрипка с удаленной общей: истинной всплывающей подсказкой:

Обновленная скрипка

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

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

3. это помогает с событиями, так что спасибо! но есть ли способ показать фон наведения при входе в область столбца, не касаясь его? столбец может быть не виден, потому что его значение равно 0, но мне все равно нужно иметь возможность навести на него курсор.

4. @NinaMordakhay Поведение Highcharts похоже на это по замыслу, но если вы хотите, чтобы перекрестие xAxis было видно без событий, тогда вы могли бы использовать оболочку в этой демонстрации: jsfiddle.net/2rh6ta8d

Ответ №2:

Я считаю, что если вы удалите setTimeout, он будет работать нормально. Вы видите запуск «события наведения курсора мыши» через 2 секунды.

Пожалуйста, сделайте stickyTracking=false , потому что, если true, событие mouseOut в серии не запускается, пока мышь не переместится на другую серию. [http://api.highcharts.com/highcharts/plotOptions.bar.stickyTracking ]

И сделайте tooltip.shared=false , потому что всплывающая подсказка будет скрыта при перемещении мыши между рядами.

 $(function() {
var i=0;
var j=0;
var $mouseState = $('#mouseState');
var $mouseState2 = $('#mouseState2');
var options = {
chart: {
  type: 'column'
},

xAxis: {
  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
    'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
  ]
},

tooltip: {
  shared: false,
  crosshairs: true
},

series: [{
  data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
  stickyTracking: false,
  point: {
    events: {
      mouseOver: function(event) {

          $mouseState.html("mouse state OVER: "   this.category  " Number " i  );

      },
      mouseOut: function() {
     $mouseState2.html("mouse state OUT: "   this.category  " Number "  j  ); 
      }
    }
  }
  }]
};

$('#container').highcharts(options);
});

[http://jsfiddle.net/62yhg2hq/9 /]

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