Highcharts系列 - 想要显示/隐藏所有EXCEPT所选系列（反转默认逻辑） [英] Highcharts Series - want to show/hide all EXCEPT selected series (reversal of default logic)

问题描述

默认情况下，Highcharts允许你点击一个数据系列集来隐藏/取消隐藏它。一个更有用的方法是做相反的逻辑 - 即只显示所选系列，并隐藏/取消隐藏未选中的内容。

查看这里的示例（ http://jsfiddle.net/t2MxW/14/ ），很明显可以'截取'legendItemClick'事件，我只是不知道如何实现需求逻辑

可以替换下面的脚本来获得3个数据集。

DESIRED情景：例如，能够点击苹果并显示/隐藏梨和橙子。

============ =====粘贴开始=======================================

  var chart = new Highcharts.Chart（{
图表：{
 renderTo：'container'
} ，
 xAxis：{
 categories：['Jan'，'Feb'， 3月'，'4月'，'5月'，'6月'，'7月'，'8月'，'9月'，'10月'，'11月'，'12月'] 
}，
 
 plotOptions：{
 series：{
 events：{
 legendItemClick：function（event）{
 var visibility = this.visible？ '可见'：'隐藏'; 
 if（！confirm（'该系列当前是'+ 
 visibility +'。你想改变它吗？'））{
 return false; 
} 
} 
} 
} 
}，
 
系列：[{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]}，
 {名称：'梨'，
数据：[19.9,81.5,96.4 ，119.2,124.0,166.0,155.6,138.5,116.4,144.1,95.6,54.4]}，
 
 {名称：'oranges'，
数据：[119.9,181.5,46.4,219.2 ，24.0,66.0,255.6,238.5,16.4,44.1,95.6,54.4]} 
] 
 
}）; 
  

解决方案

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

$ $ p $ legendItemClick：function（event）{
if（！this.visible）
返回false;

var seriesIndex = this.index;
var series = this.chart.series; （系列[i]。索引！=系列索引）
{b
$ b为（var i = 0; i< series.length; i ++）
{

series [i] .visible？
series [i] .hide（）：
series [i] .show（）;
}
}
返回false;
}


小提琴：http://jsfiddle.net/t2MxW/12908/

By default Highcharts allows you to click on a data series set to hide it / unhide it.

A much more useful approach would be to do the reverse logic - ie to show only the selected series and hide/unhide the non-selected.

Looking at the example here ( http://jsfiddle.net/t2MxW/14/ ), it is clear one can 'intercept' the the 'legendItemClick' event, I am just not sure how to implement the require logic

One can replace the below script to obtain 3 data sets.

DESIRED SCENARIO: to be able to click on 'apples' and show/hide 'pears' and 'oranges' for example.

================= 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]}
           ]   

});

解决方案

Every event in HighCharts contains this value which contains current element (series in this case). You can select all series using this.chart.series and handle them in any way you want. Try this function.

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

fiddle: http://jsfiddle.net/t2MxW/12908/

这篇关于Highcharts系列 - 想要显示/隐藏所有EXCEPT所选系列（反转默认逻辑）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！