正确的方法来删除高图表的所有系列数据?

更新:这是一个jsfiddle,显示问题: http : //jsfiddle.net/pynju/1/

点击星期一的蓝色列。 加载详细视图时,注意01-07有3列(预期2)。 点击最高的酒吧回到原始视图。 请注意,xAxis上的标签没有被删除。

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

我有一个条形图,有两个系列,并排显示为双杠。

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轴为星期日 – 星期一 – 星期二 – 星期三 – 星期四 – 星期五 – 星期六

最初的系列有一个新的元素和一个新的data&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(); } 

当您点击任何一个栏,打算重置为原始数据集/系列: 重置数据到原始设置 - 损坏的显示

所以…很明显,我使用的删除系列代码不起作用。 什么是完全删除图表上的数据和我需要显示每个时间取决于被点击的2系列数据的最佳方法是什么?

试试这个删除所有的图表系列,

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

这个对我有用。 代码

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

将不起作用,因为每次调用remove()时都会减lesschart.series.length 。 这样, i永远不会达到预期的长度。 希望这可以帮助。

以下方式图表不会重绘每个迭代。
所以你会得到更好的performance。

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

使用for循环删除HighCharts中所有系列的另一种方法是从头开始。 以下是如何做到这一点:

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

我更喜欢走这条路线,因为使用HighStock图表时,导航仪通常是第一个系列。 我也喜欢保持一个variables设置为导航系列。 在这种情况下,我将执行以下操作:

 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/

for (var i = 0; i < chart.series.length; i++)不起作用的原因是因为您在循环播放数组时正在修改数组。 为了解决这个问题,你可以遍历数组从右到左,所以当你删除一个元素时,数组的索引仍然会指向数组中的最后一项。

使用lodash forEachRight ,你可以这样做:

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

告诉图表重绘可能只是一个简单的问题。 删除一个系列时,请尝试强制图表重绘:

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

我find了工作解决scheme。 尝试这个:

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

它会完全删除所有系列。