Правильный способ удалить все данные серии из highcharts диаграмма?
UPDATE: вот 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. В таком случае я сделаю следующее:--3-->
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
}
var seriesLength = chart.series.length;
for(var i = seriesLength -1; i > -1; i--) {
chart.series[i].remove();
}
Я нашел рабочее решение. Попробуйте это:
for (var i = 0; i < chart.series.length; i++) {
chart.series[0].remove();
}
chart.redraw();
Он полностью удалит все серии.