Question

默认情况下，Highcharts允许您单击数据系列集以隐藏它/取消隐藏它。

更有用的方法是执行反向逻辑 - 即仅显示所选系列并隐藏/取消隐藏未选择的系列。

查看此处的示例（http://jsfiddle.net/t2MxW/14/），很明显可以“拦截”'legendItemClick'事件，我只是不确定如何实现require逻辑

可以替换以下脚本来获取3个数据集。

渴望的场景：能够点击“苹果”并显示/隐藏“梨子”和“橘子”。

================= PASTE START ============================ ===========

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    plotOptions: {
        series: {
            events: {
                legendItemClick: function(event) {
                    var visibility = this.visible ? 'visible' : 'hidden';
                    if (!confirm('The series is currently '+ 
                                 visibility +'. Do you want to change that?')) {
                        return false;
                    }
                }
            }
        }
    },

    series:[{name: 'apples',
            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]},
    {name:'pears',
    data: [19.9, 81.5, 96.4, 119.2, 124.0, 166.0, 155.6, 138.5, 116.4, 144.1, 95.6, 54.4]},

           {name:'oranges',
    data: [119.9, 181.5, 46.4, 219.2, 24.0, 66.0, 255.6, 238.5, 16.4, 44.1, 95.6, 54.4]}
           ]   

});

Answer 1

HighCharts中的每个事件都包含this值，其中包含当前元素（本例中为系列）。您可以使用this.chart.series选择所有系列，并以您想要的任何方式处理它们。试试这个功能。

legendItemClick: function(event) {
    if (!this.visible)
        return false;

    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;
}

小提琴：https://jsfiddle.net/t2MxW/21971/

Answer 2

我想做类似的事情...我想拥有它，这样如果你控制点击（或cmd-点击）一个图例项目，它将隐藏所有其他项目。（但将普通点击作为默认行为）。

plotOptions: {
    series: {
        events: {
            legendItemClick: function(e) {
                // Upon cmd-click of a legend item, rather than toggling visibility, we want to hide all other items.
                var hideAllOthers = e.browserEvent.metaKey;
                if (hideAllOthers) {
                    var seriesIndex = this.index;
                    var series = this.chart.series;

                    for (var i = 0; i < series.length; i++) {
                        // rather than calling 'show()' and 'hide()' on the series', we use setVisible and then
                        // call chart.redraw --- this is significantly faster since it involves fewer chart redraws
                        if (series[i].index === seriesIndex) {
                            if (!series[i].visible) series[i].setVisible(true, false);
                        } else {
                            if (series[i].visible) series[i].setVisible(false, false);
                        }
                    }
                    this.chart.redraw();
                    return false;
                }
            }
        }
    }
}

Answer 3

只是分享原因@ igor的答案对我不起作用，所以我做了调整，这里是小提琴（从@ igor的答案分开）

http://jsfiddle.net/index/Nkeep/

Answer 4

如果您想保持正常功能，但也能够显示/隐藏所有功能，请创建一个按钮或show_all() / hide_all() javascript方法的链接。

此方法初始化计数器并开始显示/隐藏：

counter = 0;
setTimeout(process_hide, 1);

function process_hide()
{
    your_chart.series[counter].hide();
    counter+=1;
    if (counter < read_chart.series.length) {
        setTimeout(process_hide, 1);
    }
}

你执行此操作而不是仅执行$.each(your_chart, function(i,v){v.hide()})的原因是它会锁定UI - 使用超时你实际上会看到系列被逐个隐藏 - 如果你想要修改某些东西否则 - 就像一个过程仪表，它实际上可以工作。

Answer 5

分叉索引的答案和添加的功能，以便为每个系列进行单独切换。 http://jsfiddle.net/c4Zd8/1/

$.each(allSeries, function(index, series) {
    if (selected == index) {
        if (series.visible == true) {
            series.hide();
        }
        else {
            series.show();
        }
    }
});

Answer 6

分叉，因为我希望改变行为。最初当用户选择了两个系列，然后试图取消选择一个...整个系列会交换可见性。我查看是否所有其他系列都是＆＃34;所有其他可见的＆＃34;或者＆＃34;所有其他不可见的＆＃34;首先交换系列的可见性。

http://jsfiddle.net/nd0dcdmz/3/

legendItemClick: function(e) {
    var seriesIndex = this.index;
    var series = this.chart.series;

    // test for if all other series besides one selected are visible or not visible
    var allElseVisible = series.every(
      s => (s.index == seriesIndex ? true : s.visible),
    );
    var allElseNotVisible = series.every(
      s => (s.index == seriesIndex ? true : !s.visible),
    );

    // if everything else is deselected or selected ... swap visibility
    // else swap the visibility of selected object.
    if (allElseVisible || allElseNotVisible) {
      series.map(s => {
        if (s.index != seriesIndex) {
          s.visible ? s.hide() : s.show();
        }
      });
    } else {
      return true;
    }

    return false; // overrides default behavior
},

Highcharts系列 - 想要显示/隐藏所有EXCEPT所选系列（默认逻辑的反转）

6 个答案: