如何处理图表中图例中的鼠标悬停事件? [英] how to handle mouse over event in legend in highcharts?

问题描述

我能够处理甜甜圈片中的mouseover/mouseout事件..请检查我的代码

I am able to handle mouseover/mouseout event in donut slices .. Please check my code

http://jsfiddle.net/nyhmdtb8/6/

每当我将鼠标悬停在任何切片上时，所有切片都会变灰，..我们可以在图例上的鼠标悬停上做同样的事情吗?

whenever I hover on any slice it grey out all slices expect the selected on ..can we do the same thing on mouse over of legend ?

我想选择任何图例，该图例应突出显示所选择的切片并全部变灰.

I want to select any legend it should highlight the selected slice and grey out all ..

$('#container').on('mouseenter','.highcharts-legend-item',function(event) {
  console.log(event)

}).on('mouseleave','.highcharts-legend-item',function(event) {

});

我需要在图例鼠标悬停上进行同样的操作

I need to this same thing on legend mousehover

mouseOver: function(e) {
                 var series = this.series;
                console.log(series)
               for (var i = 0; i < series.data.length; i++) {
                var point = series.data[i];
                console.log(point)
                if (point == this) {
                    console.log('yes')
                     point.update({color: series.chart.options.colors[this.index]});
                } else {
                    point.update({
                        color: '#CCCCCC'
                    });
                }
            }

            return false;
        },

推荐答案

Accordiong to this post, you can easily do it like this:

$('#container').highcharts({
    {
        // ... your params
    },
    function(chart) {
        $(chart.series).each(function(i, serie) {
            $(serie.legendItem.element).hover(function() {
                // on over
            }, function() {
                // on mouseout
           });
       });
    }
});

您可以在此处找到提供的示例: http://jsfiddle.net/vitorbarbosa/qpByN/

You can find a provided example here: http://jsfiddle.net/vitorbarbosa/qpByN/

您还可以检查链接的帖子的第一个答案及其示例: http://jsfiddle.net/highcharts/Ha3Wr/

You also may check the first answer of the post linked and its example: http://jsfiddle.net/highcharts/Ha3Wr/

这篇关于如何处理图表中图例中的鼠标悬停事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！