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á.