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

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

初始系列有一个带有新数据和数据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();
      }

当您单击任何栏以打算重置为原始数据集/系列时:

所以...很明显我正在使用的删除系列代码不起作用.完全删除图表上的数据的最佳方法是什么,我需要每次显示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

以下方式图表不会重绘每次迭代.
所以你会获得更好的表现.

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

chart.redraw();

Answer 3

使用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/