Правильный способ удалить все данные серии из highcharts диаграмма?
обновление: вот 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();
}
при нажатии на любой из баров с целью сброса к исходному набору данных / серии:
так... ясно, что код серии remove, который я использую, не работает. Каков наилучший способ полностью удалить данные на графике и 2 серии мне нужно отображать каждый раз в зависимости от того, что нажата?
7 ответов:
попробуйте это, чтобы удалить все серии диаграммы,
while(chart.series.length > 0) chart.series[0].remove(true);это работает для меня. код
for (var i = 0; i < chart.series.length; i++)не будет работать, потому что
chart.series.lengthуменьшается каждый разremove()называется. Таким образом,iникогда не достигнет ожидаемой длины. Надеюсь, это поможет.
следующим образом диаграмма не будет перерисовываться каждую итерацию.
Так вы получите лучшую производительность.while( chart.series.length > 0 ) { chart.series[0].remove( false ); } chart.redraw();
другой способ удалить все серии в HighCharts с циклом for-это начать с конца. Вот как это сделать:
var seriesLength = chart.series.length; for(var i = seriesLength - 1; i > -1; i--) { chart.series[i].remove(); }Я предпочитаю идти по этому маршруту, потому что при использовании диаграммы HighStock навигатор обычно является первой серией. Я также предпочитаю сохранять переменную, установленную в серии navigator. В таком случае, я сделаю следующее:
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 с новыми данными (включая серию navigator): http://jsfiddle.net/engemasa/WcLQc/
причина
for (var i = 0; i < chart.series.length; i++)не работает, потому что вы изменяете массив во время цикла над ним. Чтобы обойти это, вы можете перебирать массив справа налево, поэтому при удалении элемента индекс массива все равно будет указывать на последний элемент в массиве.используя лодаш forEachRight, вы можете сделать:
_.forEachRight(chart.series, chartSeries => { chartSeries.remove(false); }); chart.redraw();
это может быть просто вопрос о том, чтобы перерисовать диаграмму. Когда вы удаляете ряд, попробуйте заставить диаграмму перерисовать:
for (var i = 0; i < chart.series.length; i++) { chart.series[i].remove(true); //forces the chart to redraw }