highcharts鼠标移到legend上高亮当前数据列并置灰其它列

默认鼠标移到legend上会实现hover当前数据的样式,其它的保持不变,这个插件是在改变当前数据列样式的同时改变其它数据列。

/**
     * Highcharts plugin for setting a lower opacity for other series than the one that is hovered
     * in the legend
     */
    (function (Highcharts) {
        var each = Highcharts.each;
        
        Highcharts.wrap(Highcharts.Legend.prototype, 'renderItem', function (proceed, item) {
            
            proceed.call(this, item);
            
            
            var series = this.chart.series,
                element = item.legendGroup.element;
            
            element.onmouseover = function () {
               each(series, function (seriesItem) {
                    if (seriesItem !== item) {
                        each(['group', 'markerGroup'], function (group) {
                            seriesItem[group].attr('opacity', 0.25);
                        });
                    }
                });
            }
            element.onmouseout = function () {
               each(series, function (seriesItem) {
                    if (seriesItem !== item) {
                        each(['group', 'markerGroup'], function (group) {
                            seriesItem[group].attr('opacity', 1);
                        });
                    }
                });
            }           
            
        });
    }(Highcharts));

原文:https://highcharts.uservoice.com/forums/55896-general/suggestions/3166396-improve-series-highlight-on-legend-hover-event-by

你可能感兴趣的:(Highcharts,highlight,hover,legend)