时间戳

首页 > 解决方案 > HighChart 在点击图例上隐藏其他系列

javascript - HighChart 在点击图例上隐藏其他系列

问题描述

单击图例时，我需要在 HighChart（折线图）中隐藏其他系列，因此我尝试了当前隐藏其他系列线的方法，但是当我尝试单击同一图例时，它再次显示其他系列，这是不正确的.

$(function () {
    var chart;

    $(document).ready(function() {

        chart = new Highcharts.Chart({

            chart: {

                renderTo: 'container',

                type: 'line',

                marginRight: 130,

                marginBottom: 25

            },
            plotOptions: {
        line: {

                events: {
                    legendItemClick: function () {
                        chart.yAxis[0].addPlotLine({
                        value : 7.5,
                        color : 'green',
                        dashStyle : 'shortdash',
                        width : 2,
                        label : {
                            text : 'My PlotLine'
                        }
                    });

                     if (!this.visible)
                     return true;

                    var seriesIndex = this.index;
                    var series = this.chart.series;

                    for (var i = 0; i < series.length; i++)
                    {
                        if (series[i].index != seriesIndex)
                        {

                            series[i].visible ? series[i].hide() :                                                 series[i].show();
                        } 
                    }
                     return false;
                        //return false; // <== returning false will cancel the default action
                    }
                }
            ,
            showInLegend: true
        }
    },                
            title: {

                text: 'Monthly Average Temperature',

                x: -20 //center

            },

            subtitle: {

                text: 'Source: WorldClimate.com',

                x: -20

            },

            xAxis: {

                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',

                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

            },

            yAxis: {

                title: {

                    text: 'Temperature (°C)'

                },

                plotLines: [{

                    value: 0,

                    width: 1,

                    color: '#808080'

                }]

            },

            tooltip: {

                formatter: function() {

                        return '<b>'+ this.series.name +'</b><br/>'+

                        this.x +': '+ this.y +'°C';

                }

            },

            legend: {

                layout: 'vertical',

                align: 'right',

                verticalAlign: 'top',

                x: -10,

                y: 100,

                borderWidth: 0

            },


            series: [{

                name: 'Tokyo',

                data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]

            }, {

                name: 'New York',

                data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]

            }, {

                name: 'Berlin',

                data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]

            }, {

                name: 'London',

                data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]

            }]

        });

    });


});

简而言之，当我单击图例时，它应该只打开关注线，

示例小提琴

标签： javascriptjqueryhighcharts

解决方案

您可以像这样根据您的规范解决它：

var seriesIndex = this.index;
var series = this.chart.series;
if (this.visible && this.chart.restIsHidden) {
  for (var i = 0; i < series.length; i++) {
    if (series[i].index != seriesIndex) {
      series[i].show();
    }
  }
  this.chart.restIsHidden = false;
} else {
  for (var i = 0; i < series.length; i++) {
    if (series[i].index != seriesIndex) {
      series[i].hide();
    }
  }
  this.show()
  this.chart.restIsHidden = true;
}
return false;

这将检查单击的项目是否可见，其余的是否隐藏，如果是，则应显示全部。否则它应该隐藏除单击项目之外的所有项目。我使用自定义布尔值来跟踪其余部分是否隐藏。

工作 JSFiddle 示例：http: //jsfiddle.net/ewolden/93mLoc1f/14/

推荐阅读