点击传说应该显示在使用图表highchart.js自动剩下的所有传奇应该隐藏

Question

我有在highchart 10周的传说，如果我点击第一个传奇只是传说单击应该显示剩余的所有传说会自动隐藏...

下面是两位传奇人物码

$(function() {
  var chart = $('#container').highcharts({

    legend: {
      enabled: true
    },

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

    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]
    }, {
      data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
    }]
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

Answer 1

你需要对这个系列，这将显示/点击后隐藏各系列添加legendItemClick事件。

plotOptions: {
    series: {
        events: {
            legendItemClick: function (event) {
                var sr = this.chart.series;
                for(i = 0; i < sr.length; i++) {
                    if(this == sr[i])
                        sr[i].setVisible(true);
                    else
                        sr[i].setVisible(false);
                }
                return false;
            }
        }
    }
}

在这里找到修改后的代码：JSfiddle

Answer 2

var alias = this;
        series: {
      events: {
          legendItemClick: function (event) {
              var sr = this.chart.series;
              for(var i = 0; i < sr.length; i++) {
                 sr[i].setVisible(false, false);
                  if(this == sr[i])
                  {
                    if(alias.selectedLines.indexOf(this) != -1){
                      alias.selectedLines.splice(alias.selectedLines.indexOf(this), 1);
                    }
                    else{
                      alias.selectedLines.push(sr[i])
                    } 
                  }
              }
              for(var i = 0; i < alias.selectedLines.length; i++) {
                alias.selectedLines[i].setVisible(true, false);
              }
              this.chart.redraw()
              return false;
          }
      }
  }

这里我创建了一个名为selectedLines数组，它包含所有选定的传说。

可变SR系列包含，我们通过它来循环找到刚刚点击一个传奇的用户。如果选择的图例是在selectedLines已经存在，那么我们是从阵列中除去。即它点击第二次将取消选择。

如果传说是不是已经存在那么我们把它推到SelectedLines阵列。现在selectedLines阵列有种种传说点击我的用户。

我们已经隐藏在这一切的传说，所以我们只是通过selectedLines运行另一个循环，只显示选定的传说。

这一功能使用户在点击传说他们想查看一个接一个，剩下的将被隐藏。

PS：我已经使用调用setVisible（假的，假的），而不是隐藏（），因为隐藏（）重绘的每次，而不是调用setVisible（假的，假的）不会。最后，我们调用重绘（）来更新DOM。