Ocultar _grupos_ de series en Highcharts y jQuery: ¿cómo obtener un rendimiento aceptable?

Question

Estoy usando Highcharts para representar grupos de series temporales. Por lo tanto, los puntos de datos recopilados del mismo individuo están conectados por líneas, y los puntos de datos de individuos que pertenecen al mismo grupo comparten el mismo color. La leyenda de Highcharts muestra cada serie de tiempo individual en lugar de grupos, y tengo más de cien series temporales, por lo que es feo y poco práctico ocultar y mostrar datos de esa manera.

En su lugar creé botones y usé jQuery para asociarlos con funciones que buscarían coincidencias de colores entre las series temporales y alternar la visibilidad de cada serie coincidente.

Aquí se muestra un ejemplo con un pequeño conjunto de datos: http://jsfiddle.net/bokov/VYkmg/6/

Aquí es la función de serie-ocultación de ese ejemplo:

$("#button").click(function() { 
    if ($(this).hasClass("hideseries")) { 
     hs = true; 
    } else { 
     hs = false; 
    } 
    $(chart.series).each(function(idx, item) { 
     if (item.color == 'green') { 
      if (hs) { 
       item.show(); 
      } else { 
       item.hide(); 
      } 
     } 
    }); 
    $(this).toggleClass("hideseries"); 
}); 

Los trabajos anteriores. El problema es que mis datos reales pueden tener más de cien series de tiempo individuales y parece que verificar el color de cada serie es muy lento. Entonces, ¿alguien puede sugerir una forma más eficiente de resolver este problema? ¿Hay algunos métodos incorporados de Highcharts que ya hacen esto? O bien, ¿puedo darle a jQuery un selector más específico?

Intenté profundizar en el elemento <svg> creado por Highcharts, pero no puedo determinar qué elementos secundarios corresponden a las series en el gráfico.

Gracias.

Answer 1

El problema aquí es que Highcharts está redibujando el gráfico después de cada cambio de serie. Revisé la API para ver si había un parámetro que podría pasar para diferir eso, pero ese no parece ser el caso.

su lugar, puede apagar el método redibujado hasta que esté listo, así:

var _redraw = chart.redraw; 
chart.redraw = function(){}; 

//do work 

chart.redraw = _redraw; 
chart.redraw(); 

Salida el ejemplo completo here. Para mí, fue 10 veces más rápido hacerlo de esta manera.

Answer 2

En lugar de llamar a show() o hide() para cada serie, llame al setVisible(/* TRUE OR FALSE HERE */, false);. Este segundo parámetro es el parámetro redraw, y puede evitar causar un redibujado (que es lento) para cada serie.

Luego, una vez que haya terminado de cambiar las visibilidades, llame al chart.redraw()una vez.

http://api.highcharts.com/highcharts#Series.setVisible