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

Ответ 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;
}

скрипт: http://jsfiddle.net/t2MxW/12908/

Ответ 2

Я хотел сделать что-то подобное... Я хотел иметь его так, чтобы, если вы управляете щелчком (или cmd-click) элементом легенды, он будет скрывать ВСЕ ДРУГИЕ элементы. (Но оставляйте обычные клики по умолчанию).

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

Ответ 3

Просто поделите причину @igor ответ не работает на меня, поэтому я внес коррективы, вот скрипка (разветвленная от ответа @igor)

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

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

Ответ 5

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

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

Ответ 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
},