Javascript 从 highcharts 图表中删除所有系列数据的正确方法？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6604291/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Proper way to remove all series data from a highcharts chart?
提问by Z Jones
UPDATE: Here's a jsfiddle that shows the problem: http://jsfiddle.net/pynju/1/
更新：这是一个显示问题的 jsfiddle：http: //jsfiddle.net/pynju/1/
Click on the blue column on Monday. When the detail-view loads, notice that 01-07 have 3 columns (expected 2). Click on the tallest bar to go back to the original view. Notice that the labels on the xAxis aren't being removed.
单击星期一的蓝色列。当详细视图加载时，请注意 01-07 有 3 列（预期为 2）。单击最高的栏可返回原始视图。请注意，xAxis 上的标签不会被移除。
===============
================
I have a bar chart that has 2 series, displayed as pairs of bars, side by side.
我有一个条形图，它有 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
The initial data is day of week data with the X-axis being: Sunday - Monday - Tues - Wed - Thurs - Fri - Saturday
初始数据是星期数据，X 轴为：星期日 - 星期一 - 星期二 - 星期三 - 星期四 - 星期五 - 星期六
The initial series has a drilldown element with a new data & data2 (see above)
初始系列有一个带有新数据和数据 2 的向下钻取元素（见上文）
Using the drilldown demo code as an example, I have this code in place:
以下钻演示代码为例，我有以下代码：
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);
}
}
}
},
Set chart handler:
设置图表处理程序：
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'
});
}
}
The initial chart display perfectly fine:
初始图表显示完美：
When you click on any of the blue bars (the data set that has the drilldown), things get wonky for the first 7 x-axis items:
当您单击任何蓝色条（具有向下钻取的数据集）时，前 7 个 x 轴项目的情况变得不稳定：
It's as if the initial data sets aren't being removed by the code:
就好像代码没有删除初始数据集：
for (var i = 0; i < chart.series.length; i++) {
chart.series[i].remove();
}
When you click on any of the bars with the intention of resetting to the original data set/series:
当您单击任何条以重置为原始数据集/系列时：
So... it's clear that the remove series code I'm using isn't working. What's the best way to completely remove the data on the chart and the 2 series I need to display each time depending on what is clicked?
所以......很明显，我使用的删除系列代码不起作用。根据单击的内容，完全删除图表上的数据和每次需要显示的 2 个系列的最佳方法是什么？
回答by Lee
try this to remove all chart series,
尝试删除所有图表系列，
while(chart.series.length > 0)
chart.series[0].remove(true);
it works for me. the code
这个对我有用。编码
for (var i = 0; i < chart.series.length; i++)
won't work because the chart.series.lengthis decreased each time remove()is called. That way, the iwill never reach the expected length. Hope this helps.
不会工作，因为chart.series.length每次remove()调用都会减少。这样，i永远不会达到预期的长度。希望这可以帮助。
回答by Ricardo Alvaro Lohmann
The following way the chart will not redraw every iteration.
So you'll get a better performance.
以下方式图表不会每次迭代重绘。
所以你会得到更好的表现。
while( chart.series.length > 0 ) {
chart.series[0].remove( false );
}
chart.redraw();
回答by Scott
Another way to remove all series in HighCharts with a for loop is to start from the end. Here's how to do it:
使用 for 循环删除 HighCharts 中所有系列的另一种方法是从末尾开始。这是如何做到的：
var seriesLength = chart.series.length;
for(var i = seriesLength - 1; i > -1; i--) {
chart.series[i].remove();
}
I prefer to go this route because when using a HighStock chart, the navigator is usually the first series. I also prefer to keep a variable set to the navigator series. In that case, I'll do the following:
我更喜欢走这条路线，因为在使用 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();
}
}
Now I can easily set the navigator series.
现在我可以轻松设置导航器系列。
Here's an example of removing all series from a Highchart: http://jsfiddle.net/engemasa/srZU2/
这是从 Highchart 中删除所有系列的示例：http: //jsfiddle.net/engemasa/srZU2/
Here's an example of resetting a HighStock chart with new data (including the navigator series): http://jsfiddle.net/engemasa/WcLQc/
以下是使用新数据（包括导航器系列）重置 HighStock 图表的示例：http: //jsfiddle.net/engemasa/WcLQc/
回答by chipit24
The reason for (var i = 0; i < chart.series.length; i++)doesn't work is because you're modifying the array while you're looping over it. To get around this, you can iterate over the array from right to left, so when you remove an element, the index of the array will still point to the last item in the array.
原因for (var i = 0; i < chart.series.length; i++)不起作用是因为您在循环时修改了数组。为了解决这个问题，您可以从右到左遍历数组，因此当您删除一个元素时，数组的索引仍将指向数组中的最后一项。
Using lodash's forEachRight, you can do:
使用 lodash 的forEachRight，您可以执行以下操作：
_.forEachRight(chart.series, chartSeries => {
chartSeries.remove(false);
});
chart.redraw();
回答by YASH GAUTAMI
var seriesLength = chart.series.length;
for(var i = seriesLength -1; i > -1; i--) {
chart.series[i].remove();
}
var seriesLength = chart.series.length;
for(var i = seriesLength -1; i > -1; i--) {
chart.series[i].remove();
}
回答by Rupesh Verma
You can also update and add a new series and if the new series is less than the current series then remove the series:
您还可以更新和添加新系列，如果新系列小于当前系列，则删除该系列：
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();
}
}
回答by NT3RP
It may just be a simple matter of telling the chart to redraw. When you remove a series, try forcing the chart to redraw:
告诉图表重新绘制可能只是一个简单的问题。当您删除一个系列时，请尝试强制重新绘制图表：
for (var i = 0; i < chart.series.length; i++) {
chart.series[i].remove(true); //forces the chart to redraw
}
回答by amadi
I found the working solution. Try this:
我找到了有效的解决方案。尝试这个：
for (var i = 0; i < chart.series.length; i++) {
chart.series[0].remove();
}
chart.redraw();
It will completely remove all series.
它将完全删除所有系列。
