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


67

更新:这是一个显示问题的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轴为:星期日-星期一-星期二-星期三-星期四-星期五-星期六

初始系列包含带有新数据和数据2的向下钻取元素(请参见上文)

以向下钻取的演示代码为例,我将以下代码放置到位:

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

当您单击任何条以重置为原始数据集/系列时: 将数据重置为原始设置-损坏的显示

所以...很明显,我正在使用的删除系列代码无法正常工作。完全删除图表上的数据的最佳方法是什么,我需要根据单击的内容每次显示两个系列?


您什么时候拨打您的清除代码?
NT3RP

当单击原始图表中的列时,将调用它。这是setData()的一部分,它在点->事件->单击中被调用
Z Jones

Answers:


151

尝试删除所有图表系列,

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

这个对我有用。编码

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

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


3
您的while循环可能会意外地在while循环上获得自动插入的分号。您应该全部使用一行或使用大括号。
mkmurray 2012年

1
这完全为我工作。这是一个非常有见地的解决方案,注意长度的变化。谢谢!
thekingoftruth 2012年

1
您说的for循环“ for(var i = 0; i <chart.series.length; i ++)不会工作,因为chart.series.length每次都会减少...”是正确的,但是您可以简单地从序列的结尾开始:for(var i = chart.series.length-1; i> -1; i--)。我喜欢这条路线,因为StockCharts使用第一个或第二个系列作为导航器,并且可以在保留所有“ Navigator”属性的同时更新该系列。请参阅下面的答案。
斯科特

我已经被这个问题困扰了3天了。感谢@Lee!
Kabulan0lak 2015年

通常,从阵列中删除时应该倒数:var i = arr.length;while(--i>-1){if(true){arr.splice(i,1)}}即使一个人只想从阵列中删除一些数据,它也始终有效。
HMR

42

按照以下方式,图表将不会在每次迭代时都重新绘制。
这样您将获得更好的性能。

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

chart.redraw();

1
在其他地方阅读类似的内容,但是他们使用了:“ while(chart.series.length)chart.series [0] .remove(false);” 差别不大,只有四个字符,但可以工作
Steven Rogers 2014年

谢谢!解决了我创建散点图(<2500点)的问题。
sukkis

8

使用for循环删除HighCharts中所有系列的另一种方法是从结尾开始。方法如下:

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

我更喜欢走这条路线,因为在使用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/


谢谢 !我想知道为什么我的导航器搞砸了!(ps:似乎是Navigator,现在用N
开头

在最新版本的Stock Chart中,导航器系列可能不再是第一个系列。但是使用这种方法,您仍然可以跟踪它并相应地对其进行更新。
斯科特

1

原因 for (var i = 0; i < chart.series.length; i++)不起作用,是因为您在遍历数组时正在修改数组。要解决此问题,您可以从右到左遍历数组,因此,删除元素时,数组的索引仍将指向数组中的最后一项。

使用lodash的forEachRight,您可以执行以下操作:

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

chart.redraw();

0

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

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

谢谢,更新了代码,但在钻取(以及随后的重设尝试)时仍然无法解决
Z Jones

使用问题的交互式示例更新了问题:jsfiddle.net/pynju/1
Z Jones

0

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


0

您还可以更新和添加新系列,如果新系列小于当前系列,则删除该系列:

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

-1

我找到了可行的解决方案。尝试这个:

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

它将完全删除所有系列。


这是行不通的,因为chart.series.length在每次迭代时都会被修改
Rafiki
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.