Właściwy sposób na usunięcie wszystkich danych serii z wykresu wysokiej jakości?

Question

AKTUALIZACJA: Oto jsfiddle, które pokazuje problem: http://jsfiddle.net/pynju/1/

Kliknij niebieską kolumnę w poniedziałek. Po załadowaniu widoku szczegółów zwróć uwagę, że 01-07 ma 3 kolumny (oczekiwane 2). Kliknij najwyższy pasek, aby wrócić do oryginalnego widoku. Zauważ, że etykiety na xAxis nie są usuwane.

===============

Mam wykres słupkowy, który ma 2 serii, wyświetlany jako pary prętów, jeden obok drugiego.

series: [{ 
     showInLegend: false, 
     data: dowChartData 
     },{ 
     showInLegend: false, 
     data: avgUserDowChartData 
     }], 

.

dowChartData = [                                                                                                                                                                                                                                                                                                                                                 { 
       y: 98.74, 
       color: '#0072ff', 
       drilldown: { 
        name: 'Category Engagement - Sunday', 
        categories: ['00','01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23'], 
        data: [0,637,0,0,0,173,48.54,48.54,0,0,0,0,0,0,102.24,166.36,706.59,699.18,298.32,184.14,97.08,1539,0,1224.56], 
        color: '#0072ff', 
        data2: [506.80686467275,354.56354558498,333.25158689567,234.19283190879,234.82132336088,220.03247578171,222.86420797556,218.14034615202,170.42559544164,171.54776353196,249.24788461442,345.14915669555,206.65543589797,243.38811965637,367.02593304906,378.83677778129,467.45739743621,424.26264387522,639.60922934374,679.71299714907,373.26353846375,480.94380626458,551.82326068362,466.77469230724], 
        color2: '#C00' 
       } 
      } 
AND SIMILAR 

.

avgUserDowChartData = [                                                                                                                       { 
       y: 142.35, 
       color: '#C00' 
      }, 
AND SIMILAR 

Wstępne dane jest dzień danych tydzień z istoty Oś X: niedziela - poniedziałek - wt - śr - czw - pt - sobota

początkowa seria element drążenia z nowymi danymi & data2 (patrz powyżej)

Używając kodu demo drążenia jako przykład, tego kodu w miejsce:

column: { 
       borderWidth: 0, 
      cursor: 'pointer', 
      point: { 
       events: { 
        click: function(event) { 
        var drilldown = this.drilldown; 
        if (drilldown) { // drill down 
         setChart(dowChart, drilldown.name, drilldown.categories, drilldown.data, drilldown.color, drilldown.data2, drilldown.color2); 
        } else { // restore 
         setChart(dowChart, '', dowCategories, dowChartData); 
        } 
        } 
       } 
      }, 

Zestaw obsługi wykres:

function setChart(chart, name, categories, data, color, data2, color2) { 
     chart.xAxis[0].setCategories(categories); 
//  chart.series[0].remove(); 
     for (var i = 0; i < chart.series.length; i++) { 
      chart.series[i].remove(); 
     } 
     chart.addSeries({ 
     showInLegend: false, 
     name: name, 
     data: data, 
     color: color || 'white' 
     }); 
     if (typeof(data2) != undefined && data2.length > 0) { 
      chart.addSeries({ 
      showInLegend: false, 
      name: name, 
      data: data2, 
      color: color2 || 'white' 
      }); 
     } 
    } 

Początkowe wyświetlacz wykres perfekcyjnie:

Po kliknięciu na którykolwiek z niebieskie paski (zbiór danych, który ma drążenia), robi się słaby na pierwszą 7 pozycji oś x:

To tak jakby początkowe zestawy danych nie są usuwane przez kod:

for (var i = 0; i < chart.series.length; i++) { 
      chart.series[i].remove(); 
     } 

Po kliknięciu na jeden z barów z zamiarem przywróceniu oryginalnego zbioru danych/seria:

Więc ... to jasne, że kod seria usuń używam nie działa. Jaki jest najlepszy sposób na całkowite usunięcie danych z wykresu i serii 2, które muszę wyświetlać za każdym razem, w zależności od kliknięcia?

Answer 1

spróbować usunąć wszystkie serie wykresu,

while(chart.series.length > 0) 
    chart.series[0].remove(true); 

to działa na mnie. kod

for (var i = 0; i < chart.series.length; i++) 

nie będzie działać, ponieważ chart.series.length zmniejsza się za każdym razem remove() jest tzw.W ten sposób i nigdy nie osiągnie oczekiwanej długości. Mam nadzieję że to pomoże.

Answer 2

Może to po prostu być prostą sprawą, aby wykres przerysować. Po usunięciu serię, spróbuj wymusić wykres, aby przerysować:

for (var i = 0; i < chart.series.length; i++) { 
    chart.series[i].remove(true); //forces the chart to redraw 
} 

Answer 3

Znalazłem działające rozwiązanie. Wypróbuj to:

for (var i = 0; i < chart.series.length; i++) { 
    chart.series[0].remove(); 
} 
chart.redraw(); 

To spowoduje całkowite usunięcie wszystkich serii.

Answer 4

Innym sposobem na usunięcie wszystkich serii w HighCharts z pętlą for jest rozpoczęcie od końca. Oto jak to zrobić:

var seriesLength = chart.series.length; 
for(var i = seriesLength - 1; i > -1; i--) { 
    chart.series[i].remove(); 
} 

Wolę pójść tą drogą, ponieważ przy użyciu wykresu HighStock, nawigator jest zwykle pierwsza seria. Wolę też ustawić zmienną na serię nawigatora. W takim przypadku wykonaj następujące czynności:

var seriesLength = chart.series.length; 
var navigator; 
for(var i = seriesLength - 1; i > -1; i--) { 
    if(chart.series[i].name.toLowerCase() == 'navigator') { 
     navigator = chart.series[i]; 
    } else { 
     chart.series[i].remove(); 
    } 
} 

Teraz mogę łatwo ustawić serię nawigatora.

Oto przykład usunięcia wszystkich serii od A Highchart: http://jsfiddle.net/engemasa/srZU2/

Oto przykład zerowania wykres HighStock się nowe dane (w tym cyklu nawigacyjnego): http://jsfiddle.net/engemasa/WcLQc/

Answer 5

następujący sposób wykres nie będzie przerysowywać każdej iteracji.
Dzięki temu uzyskasz lepszą wydajność.

while(chart.series.length > 0) { 
    chart.series[0].remove(false); 
} 

chart.redraw(); 

Answer 6

Powodem for (var i = 0; i < chart.series.length; i++) nie działa to, bo jesteś zmieniając tablicę podczas jesteś zapętlenie nad nim. Aby obejść ten problem, można iterować po tablicy od prawej do lewej, więc po usunięciu elementu indeks tablicy nadal wskazuje ostatni element w tablicy.

Korzystanie lodash na forEachRight, można zrobić:

_.forEachRight(chart.series, chartSeries => { 
    chartSeries.remove(false); 
}); 

chart.redraw();