Highcharts Series - хотите показать / скрыть все кроме выбранной серии (изменение логики по умолчанию)

Question

По умолчанию Highcharts позволяет вам щелкнуть набор данных, чтобы скрыть или показать его.

Гораздо более полезным подходом было бы сделать обратную логику - то есть показать только выбранные серии и скрыть / показать невыбранные.

Глядя на пример здесь (http://jsfiddle.net/t2MxW/14/), становится ясно, что можно «перехватить» событие 'legendItemClick', я просто не уверен, как реализовать логику require

Можно заменить приведенный ниже скрипт, чтобы получить 3 набора данных.

Желаемый сценарий: чтобы можно было нажать на «яблоки» и показать / скрыть «груши» и «апельсины», например.

================= СТАРТ СТАРТ ============================ ===========

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

Ответ на вопрос с индексом Forked и добавлена ​​функциональность, чтобы иметь отдельные переключатели для каждой серии. http://jsfiddle.net/c4Zd8/1/

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

Answer 5

Если вы хотите сохранить нормальную функциональность, но также иметь возможность показать / скрыть все, то создайте кнопку или ссылку для метода 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()}), заключается в том, что он блокирует пользовательский интерфейс - используя тайм-аут, вы фактически увидите, что ряд скрытодин - и если вы хотите изменить что-то другое - например, измеритель процесса, он действительно будет работать.

Answer 6

Разветвленный, потому что я хотел, чтобы поведение изменилось. Первоначально, когда пользователь выбирал две серии, а затем пытался отменить выбор одной ... вся серия менялась местами. Прежде чем поменять видимость для серии, я проверяю, все ли серии видны «все остальное видимое» или «все остальное не видно».

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