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