Javascript 从highcharts图表中删除所有系列数据的正确方法？

更新：下面是一个JSFIDLE，它显示了问题：

单击周一的蓝色栏。加载详图视图时，请注意01-07有3个柱（预期为2个）。单击最高的栏返回到原始视图。请注意，不会删除xAxis上的标签

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

我有一个条形图，它有两个系列，以成对的条形并排显示

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

初始数据为一周中的一天数据，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'
          });
      }
   }

函数集图表（图表、名称、类别、数据、颜色、数据2、颜色2）{
chart.xAxis[0].setCategories（categories）；
//chart.series[0]。删除（）；
对于（变量i=0；i0）{
chart.addSeries({
showInLegend:false，
姓名:姓名,，
数据：数据2，
颜色：color2 | |“白色”
});
}
}

初始图表显示得非常好：

当您单击任何蓝色条（具有向下展开功能的数据集）时，前7个x轴项目的情况变得不稳定：

就像初始数据集没有被代码删除一样：

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

for（var i=0；i

当您单击任何一个条形图以重置为原始数据集/序列时：

---

所以。。。很明显，我使用的remove series代码不起作用。根据单击的内容，完全删除图表上的数据和每次需要显示的2个系列的最佳方法是什么？

可能只是简单地告诉图表重新绘制。删除序列时，请尝试强制图表重新绘制：

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

for（var i=0；i

尝试删除所有图表系列

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

它对我有用。代码

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

for（var i=0；i

---

无法工作，因为每次调用

remove（）

时，

chart.series.length

都会减少。这样，

i

就永远不会达到预期的长度。希望这有帮助。

我找到了有效的解决方案。试试这个：

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

for（var i=0；i

---

它将完全删除所有系列。

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

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

我更喜欢走这条路线，因为当使用HighStock图表时，导航器通常是第一个系列。我还更喜欢为navigator系列保留一个变量集。在这种情况下，我将执行以下操作：

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

现在我可以轻松设置navigator系列

以下是从Highchart中删除所有系列的示例：

以下是使用新数据（包括navigator系列）重置HighStock图表的示例：

---

以下方法不会使图表每次迭代都重新绘制。
所以你会有更好的表现

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

chart.redraw();

（var i=0；i不起作用的原因是，在数组上循环时修改数组。为了避免这种情况，可以从右到左遍历数组，因此当删除元素时，数组的索引仍将指向数组中的最后一项

使用lodash，您可以执行以下操作：

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

chart.redraw();

---

var seriesLength=chart.series.length；
对于（变量i=序列长度-1；i>-1；i--）{
chart.series[i].remove（）；
}

您还可以更新和添加新系列，如果新系列少于当前系列，则删除该系列：

var hChart = $("#Chart").highcharts();

for (var i = 0; i < newSeries.length; i++) { //UPDATE-OLD/ADD-NEW SERIES
    if (hChart.series[i])
        hChart.series[i].update(newSeries[i]);
    else
        hChart.addSeries(newSeries[i]);
}

var serieslen = newSeries.length;
if (hChart.series[serieslen]) {
    var loopfrm = hChart.series.length - 1;
    for (var i = loopfrm; i >= serieslen; i--) {//REMOVE SERIES
        hChart.series[loopfrm].remove();
    }
}

var hChart=$（“#图表”）.highcharts（）；
对于（var i=0；i=serieslen；i--）{//REMOVE SERIES
hChart.series[loopfrm].remove（）；
}
}

您何时调用删除代码？单击原始图表中的一列时将调用删除代码。它是setData（）的一部分，在point->events->clickThreak中被调用，更新了代码，但在向下钻取（以及随后的重置尝试）时仍然中断。更新了问题的交互式示例：您的while循环可能会意外地在while循环上自动插入分号。你应该用一行字或者用大括号。这对我来说完全有效。这是一个非常有洞察力的解决方案，注意到长度的变化。非常感谢。您说列出的for循环“for（var i=0；i-1；i--）。我喜欢这条路线，因为StockCharts使用第一个或第二个系列作为导航器，我可以更新该系列，同时保留所有“导航器”属性。见下面我的答案。我已经被这个问题困扰了三天。非常感谢@Lee！通常，当从数组中删除时，应该倒计时：

var i=arr.length；而（--i>-1）{if（true）{arr.splice（i，1）}}

始终有效，即使只是想从arra中删除一些数据

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

chart.redraw();

var hChart = $("#Chart").highcharts();

for (var i = 0; i < newSeries.length; i++) { //UPDATE-OLD/ADD-NEW SERIES
    if (hChart.series[i])
        hChart.series[i].update(newSeries[i]);
    else
        hChart.addSeries(newSeries[i]);
}

var serieslen = newSeries.length;
if (hChart.series[serieslen]) {
    var loopfrm = hChart.series.length - 1;
    for (var i = loopfrm; i >= serieslen; i--) {//REMOVE SERIES
        hChart.series[loopfrm].remove();
    }
}