disable - legend series highcharts

Serie Highcharts: desea mostrar/ocultar todas las series EXCEPTO seleccionadas(inversión de la lógica predeterminada)

Question

Por defecto, Highcharts le permite hacer clic en un conjunto de series de datos para ocultarlo / mostrarlo.

Un enfoque mucho más útil sería hacer la lógica inversa, es decir, mostrar solo las series seleccionadas y ocultar / mostrar los no seleccionados.

Mirando el ejemplo aquí ( http://jsfiddle.net/t2MxW/14/ ), está claro que uno puede "interceptar" el evento ''legendItemClick'', simplemente no estoy seguro de cómo implementar la lógica requerida

Uno puede reemplazar el siguiente script para obtener 3 conjuntos de datos.

ESCENARIO DESEADO: para poder hacer clic en ''manzanas'' y mostrar / ocultar ''peras'' y ''naranjas'' por ejemplo.

================= PASTE INICIAR =============================== ========

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

Bifurcada porque quería que el comportamiento cambiara. Originalmente, cuando un usuario seleccionaba dos series y luego intentaba deseleccionar una ... toda la serie cambiaría la visibilidad. Antes de cambiar la visibilidad por la serie, verifico si todas las otras series son "todas las demás visibile" o "todas las demás no son visibles".

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

Answer 2

Cada evento en HighCharts contiene this valor que contiene el elemento actual (series en este caso). Puede seleccionar todas las series usando this.chart.series y manejarlas de la forma que desee. Prueba esta función.

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: https://jsfiddle.net/t2MxW/21971/

Answer 3

El solo hecho de compartir la respuesta de @ igor no funciona en mí, así que hice ajustes, aquí está el violín (derivado de la respuesta de @ igor)

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

Answer 4

La respuesta del índice bifurcado y la funcionalidad agregada para tener interruptores individuales para cada serie. http://jsfiddle.net/c4Zd8/1/

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

Answer 5

Quería hacer algo similar ... Quería tenerlo de modo que si presionas con el botón de control (o cmd-clic) en un elemento de leyenda, se oculten TODOS LOS OTROS elementos. (Pero deje los clics normales como su comportamiento predeterminado).

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 6

Si desea mantener la funcionalidad normal pero también puede mostrar / ocultar todo, cree un botón o un enlace para un método javascript show_all() / hide_all() .

este método inicializa un contador y comienza a mostrar / ocultar:

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

La razón por la que haces esto en lugar de hacer solo $.each(your_chart, function(i,v){v.hide()}) es que bloquea la interfaz de usuario; al usar el tiempo de espera, verás que la serie está oculta. por una, y si desea modificar otra cosa, como un medidor de proceso, realmente funcionará.