Skip to content

Highcharts鼠标移到legend上高亮当前数据,置灰其它数据 #2

@natee

Description

@natee
/**
     * 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;
                type = this.chart.userOptions.chart.type;
            if(type == 'pie'){ //pie default
                return;
            }
            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));

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions