Question

我在高潮图中有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（false，false）代替hide（），因为hide（）每次都会重绘，而setVisible（false，false）不会重绘。最后，我们调用redraw（）来更新DOM。

单击的图例应显示剩余的所有图例应使用highchart.js自动隐藏在图表中

2 个答案: