從高位圖表中刪除所有系列數據的正確方法？

Question

更新：這是一個顯示問題的jsfiddle：http://jsfiddle.net/pynju/1/

單擊星期一的藍色列。當細節視圖加載時，請注意01-07有3列（預期2）。點擊最高的酒吧返回原始視圖。請注意，xAxis上的標籤未被刪除。

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

我有一個具有2系列，顯示爲雙杆，並排的條形圖。

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 

最初的數據是與X軸是週數據的一天：週日 - 週一 - 週二 - 週三 - 週四 - 週五 - 週六

初始系列有一個新的數據的深入分析元素& DATA2 （見上文）

使用鑽取演示代碼作爲一個例子，我有這樣的代碼代替：

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); 
        } 
        } 
       } 
      }, 

設置的圖表處理程序：

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' 
      }); 
     } 
    } 

最初的圖表顯示完美的罰款：

當你點擊任何一個藍色條（具有向下鑽取數據集）中，事情變得靠不住的第一個7 x軸上的項：

這是因爲如果沒有被由代碼除去初始數據集：

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

當你點擊任何與重置爲原始數據集/系列的意圖條：

所以......很顯然，我使用remove系列代碼是行不通的。完全刪除圖表上的數據和我需要每次顯示的2系列數據的最佳方式是什麼？

Answer 1

試試這個刪除所有圖表系列，

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

它爲我工作。代碼

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

將無法​​工作，因爲chart.series.length每次remove()被稱爲下降。這樣，i永遠不會達到預期的長度。希望這可以幫助。

Answer 2

這可能只是告訴圖表重繪的一個簡單問題。當你刪除一個系列，請嘗試強制圖表重繪：

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

Answer 3

我找到了工作解決方案。試試這個：

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

它會完全刪除所有系列。

Answer 4

用for循環刪除HighCharts中所有系列的另一種方法是從最後開始。以下是如何做到這一點：

​​3210

我喜歡，因爲使用HighStock圖時，導航器通常是第一個系列走這條路線。我也更喜歡將一個變量設置爲導航器系列。在這種情況下，我將執行以下操作：

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

現在我可以輕鬆設置導航器系列。

下面是除去全部系列從Highchart的示例： http://jsfiddle.net/engemasa/srZU2/

這裏的重置與新的數據（包括導航系列）一個HighStock圖的一個例子： http://jsfiddle.net/engemasa/WcLQc/

Answer 5

下列方式圖表不會重繪每一次迭代。
所以你會得到更好的表現。

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

chart.redraw(); 

Answer 6

原因for (var i = 0; i < chart.series.length; i++)不工作是因爲你正在修改的陣列，而你遍歷它。爲了解決這個問題，你可以從右到左迭代數組，所以當你刪除一個元素時，數組的索引仍然會指向數組中的最後一個元素。

使用lodash的forEachRight，你可以這樣做：

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

chart.redraw();