从 highcharts 图表中删除所有系列数据的正确方法? [英] Proper way to remove all series data from a highcharts chart?
问题描述
更新:这是一个显示问题的 jsfiddle:http://jsfiddle.net/pynju/1/
UPDATE: Here's a jsfiddle that shows the problem: http://jsfiddle.net/pynju/1/
点击星期一的蓝色栏.当详细视图加载时，请注意 01-07 有 3 列(预期为 2).单击最高的栏可返回原始视图.请注意，xAxis 上的标签并未被移除.
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.
================
===============
我有一个包含 2 个系列的条形图，显示为并排的条形对.
I have a bar chart that has 2 series, displayed as pairs of bars, side by side.
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 轴为:星期日 - 星期一 - 星期二 - 星期三 - 星期四 - 星期五 - 星期六
The initial data is day of week data with the X-axis being: Sunday - Monday - Tues - Wed - Thurs - Fri - Saturday
初始系列有一个带有新数据的向下钻取元素 &数据2(见上)
The initial series has a drilldown element with a new data & data2 (see above)
以下钻演示代码为例，我有以下代码:
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);
}
}
}
},
设置图表处理程序:
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 轴项目的情况变得不稳定:
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:
就好像代码没有删除初始数据集:
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:
所以...很明显我使用的删除系列代码不起作用.完全删除图表上的数据以及我每次需要根据单击的内容显示的 2 个系列的最佳方法是什么?
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?
推荐答案
尝试删除所有图表系列，
try this to remove all chart series,
while(chart.series.length > 0)
chart.series[0].remove(true);
它对我有用.代码
for (var i = 0; i < chart.series.length; i++)
不起作用，因为每次调用 remove() 时 chart.series.length 都会减少.这样， i 永远不会达到预期的长度.希望这会有所帮助.
won't work because the chart.series.length is decreased each time remove() is called. That way, the i will never reach the expected length. Hope this helps.
这篇关于从 highcharts 图表中删除所有系列数据的正确方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
