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

w8f9ii69 于 2022-12-25 发布在 Java

关注(0)|答案(8)|浏览(231)

更新：下面的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();
      }

当您点击任何一个条形图，想要重置为原始数据集/系列时：

所以...很明显，我正在使用的删除序列代码不起作用。什么是最好的方法来完全删除图表上的数据和2个序列，我需要显示每次取决于什么是点击？

JavaScript

来源：https://stackoverflow.com/questions/6604291/proper-way-to-remove-all-series-data-from-a-highcharts-chart

8条答案

按热度按时间

gfttwv5a1#

尝试此操作可删除所有图表系列，

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

对我很有效密码

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

因为每次调用remove()时chart.series.length都会减小，所以i永远不会达到预期的长度。

赞(0）回复(0）举报 2022-12-25

brvekthn2#

下面的方法不会在每次迭代时重绘图表。
所以你会有更好的表现。

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

chart.redraw();

赞(0）回复(0）举报 2022-12-25

qvtsj1bj3#

另一种用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/

赞(0）回复(0）举报 2022-12-25

5anewei64#

for (var i = 0; i < chart.series.length; i++)不起作用的原因是你在循环数组的时候修改了它，为了解决这个问题，你可以从右到左迭代数组，所以当你删除一个元素时，数组的索引仍然指向数组中的最后一项。
使用lodash的forEachRight，您可以执行以下操作：

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

chart.redraw();

赞(0）回复(0）举报 2022-12-25

waxmsbnn5#

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

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

赞(0）回复(0）举报 2022-12-25

nuypyhwy6#

第一个月

赞(0）回复(0）举报 2022-12-25

zqry0prt7#

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

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

赞(0）回复(0）举报 2022-12-25

7gcisfzg8#

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

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

它将完全删除所有系列。

赞(0）回复(0）举报 2022-12-25

我来回答

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

更新：下面的jsfiddle显示了这个问题：http://jsfiddle.net/pynju/1/
单击星期一的蓝色列。当加载详细视图时，注意01 - 07有3列（预期为2列）。单击最高的条返回到原始视图。注意xAxis上的标签没有被删除。

8条答案

相关问题

热门标签

最新问答

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

更新：下面的jsfiddle显示了这个问题：http://jsfiddle.net/pynju/1/单击星期一的蓝色列。当加载详细视图时，注意01 - 07有3列（预期为2列）。单击最高的条返回到原始视图。注意xAxis上的标签没有被删除。

8条答案

相关问题

热门标签

最新问答

更新：下面的jsfiddle显示了这个问题：http://jsfiddle.net/pynju/1/
单击星期一的蓝色列。当加载详细视图时，注意01 - 07有3列（预期为2列）。单击最高的条返回到原始视图。注意xAxis上的标签没有被删除。