Nascondere _gruppi_di serie in Highcharts e jQuery: come ottenere prestazioni accettabili?

Question

Sto usando Highcharts per rappresentare gruppi di serie temporali. Pertanto, i punti dati raccolti dallo stesso individuo sono collegati da linee e i punti dati di individui appartenenti allo stesso gruppo condividono lo stesso colore. La legenda Highcharts mostra ogni singola serie temporale invece di gruppi, e ho oltre un centinaio di serie temporali, per il fatto che è brutto e poco pratico nascondere e mostrare i dati in questo modo.

Invece ho creato pulsanti e utilizzato jQuery per associarli a funzioni che cercavano i colori corrispondenti tra le serie temporali e alternano la visibilità di ciascuna serie corrispondente.

Ecco un esempio con un piccolo insieme di dati: http://jsfiddle.net/bokov/VYkmg/6/

Ecco la funzione serie da nascondere tale esempio:

$("#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"); 
}); 

Le opere di cui sopra. Il problema è che i miei dati reali possono avere oltre un centinaio di serie temporali individuali e sembra che controllare il colore di ciascuna serie sia molto lento. Quindi, qualcuno può suggerire un modo più efficiente per risolvere questo problema? Esistono alcuni metodi di Highcharts incorporati che lo fanno già? Oppure, posso dare a jQuery un selettore più specifico?

Ho provato a scavare nell'elemento <svg> creato da Highcharts ma non riesco a capire quali elementi figlio corrispondono alle serie nel grafico.

Grazie.

Answer 1

Il problema qui è che Highcharts sta ridisegnando il grafico dopo ogni cambio di serie. Ho controllato l'API per vedere se c'era un parametro che potevi passare per posticiparlo, ma non sembra essere il caso.

Invece, è possibile stub il metodo redraw fino a quando non si è pronti, in questo modo:

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

//do work 

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

Partenza il pieno esempio here. Per me, è stato circa 10 volte più veloce per farlo in questo modo.

Answer 2

Piuttosto che chiamare show() o hide() per ciascuna serie, chiamare setVisible(/* TRUE OR FALSE HERE */, false);. Questo secondo parametro è il parametro redraw ed è possibile evitare di causare un ridisegno (che è lento) per ciascuna serie.

Quindi, dopo aver modificato la visibilità, chiamare chart.redraw()una volta.

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