Ukrywanie _groups_ z serii w Highcharts i jQuery: jak uzyskać akceptowalną wydajność?

Question

Używam Highcharts do reprezentowania grup szeregów czasowych. Punkty danych zebrane od tej samej osoby są połączone liniami, a punkty danych od osób należących do tej samej grupy mają ten sam kolor. Legenda Highcharts wyświetla poszczególne serie czasowe zamiast grup, a mam ponad sto szeregów czasowych, brzydkie i niepraktyczne jest ukrywanie i pokazywanie danych w ten sposób.

Zamiast tego zrobiłem przyciski i użyłem jQuery, aby powiązać je z funkcjami, które wyszukałyby pasujące kolory w szeregu czasowym i przełączały widoczność każdej pasującej serii.

Oto przykład z małego zestawu danych: http://jsfiddle.net/bokov/VYkmg/6/

Tutaj funkcja ukrywania serii z tego przykładu:

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

Powyższe prace. Problem polega na tym, że moje prawdziwe dane mogą mieć ponad sto indywidualnych serii czasowych i wygląda na to, że sprawdzenie koloru każdej serii jest naprawdę powolne. Czy ktokolwiek może zaproponować bardziej efektywny sposób rozwiązania tego problemu? Czy są jakieś wbudowane metody Highcharts, które już to robią? Czy mogę dać jQuery bardziej szczegółowy selektor?

Próbowałem kopać w element <svg> stworzony przez Highcharts, ale nie mogę dowiedzieć się, które elementy podrzędne odpowiadają serii na wykresie.

Dzięki.

Answer 1

Problem polega na tym, że Highcharts rysuje wykres po każdej zmianie serii. Sprawdziłem API, aby zobaczyć, czy istnieje param, który można przekazać, aby odroczyć to, ale nie wydaje się, aby tak było.

Zamiast tego można skrótową się metodę odświeżania, dopóki nie są gotowe, tak jak poniżej:

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

//do work 

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

Sprawdź pełną przykład here. Dla mnie było to około 10 razy szybciej, aby zrobić to w ten sposób.

Answer 2

Zamiast dzwonić pod numer show() lub hide() dla każdej serii, należy zadzwonić pod numer setVisible(/* TRUE OR FALSE HERE */, false);. Ten drugi parametr jest parametrem redraw i można uniknąć powodowania odświeżania (które jest wolne) dla każdej serii.

Następnie, po zakończeniu zmiany widoczności, zadzwoń pod numer chart.redraw()raz.

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