Der richtige Weg, um alle Seriendaten aus einem Highcharts-Diagramm zu entfernen?
UPDATE: Hier ist ein jsfiddle, das das Problem zeigt: http://jsfiddle.net/pynju/1/
Klicken Sie am Montag auf die blaue Spalte. Wenn die Detailansicht geladen wird, beachten Sie, dass 01-07 3 Spalten hat (erwartete 2). Klicken Sie auf die höchste Leiste, um zur ursprünglichen Ansicht zurückzukehren. Beachten Sie, dass die Beschriftungen der xAxis nicht entfernt werden.
=================
Ich habe ein Balkendiagramm mit zwei Serien, die nebeneinander als Balkenpaare angezeigt werden.
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
Die Anfangsdaten sind Wochentagsdaten mit der X-Achse: Sonntag - Montag - Di - Mi - Do - Fr - Samstag
Die erste Serie hat ein Drilldown-Element mit neuen Daten & data2 (Siehe oben).
Am Beispiel des Drilldown-Democodes habe ich diesen Code eingerichtet:
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);
}
}
}
},
Chart-Handler festlegen:
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'
});
}
}
Die anfängliche Diagrammanzeige ist einwandfrei: 
Wenn Sie auf einen der blauen Balken klicken (den Datensatz, der den Drilldown enthält), werden die Dinge für die ersten 7 x-Achsen-Elemente unangenehm:
Es ist, als ob die ursprünglichen Datensätze nicht durch den Code entfernt werden:
for (var i = 0; i < chart.series.length; i++) {
chart.series[i].remove();
}
Wenn Sie auf eine der Leisten klicken, um den ursprünglichen Datensatz/die ursprüngliche Serie wiederherzustellen: 
Es ist also klar, dass der entfernte Seriencode, den ich verwende, nicht funktioniert. Was ist der beste Weg, um die Daten auf dem Chart und den 2 Serien vollständig zu entfernen, die ich jedes Mal anzeigen muss, je nachdem, was angeklickt wird?
versuchen Sie dies, um alle Chart-Serien zu entfernen,
while(chart.series.length > 0)
chart.series[0].remove(true);
für mich geht das. der Code
for (var i = 0; i < chart.series.length; i++)
funktioniert nicht, da der chart.series.length bei jedem Aufruf von remove() verringert wird. Auf diese Weise erreicht i niemals die erwartete Länge. Hoffe das hilft.
Auf folgende Weise zeichnet das Diagramm nicht jede Iteration neu.
So erhalten Sie eine bessere Leistung.
while( chart.series.length > 0 ) {
chart.series[0].remove( false );
}
chart.redraw();
Eine andere Methode zum Entfernen aller Serien in HighCharts mit einer for-Schleife besteht darin, am Ende zu beginnen. So geht's:
var seriesLength = chart.series.length;
for(var i = seriesLength - 1; i > -1; i--) {
chart.series[i].remove();
}
Ich bevorzuge diese Route, weil bei Verwendung einer HighStock-Karte der Navigator normalerweise die erste Serie ist. Ich bevorzuge es auch, eine Variable für die Navigator-Serie festzulegen. In diesem Fall mache ich Folgendes:
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();
}
}
Jetzt kann ich die Navigator-Serie problemlos einstellen.
Hier ein Beispiel zum Entfernen aller Serien aus einem Highchart: http://jsfiddle.net/engemasa/srZU2/
Beispiel für das Zurücksetzen eines HighStock-Diagramms mit neuen Daten (einschließlich der Navigator-Serie): http://jsfiddle.net/engemasa/WcLQc/
Der Grund dafür, dass for (var i = 0; i < chart.series.length; i++) nicht funktioniert, liegt darin, dass Sie das Array ändern, während Sie es durchlaufen. Um dies zu umgehen, können Sie das Array von rechts nach links durchlaufen. Wenn Sie ein Element entfernen, zeigt der Index des Arrays weiterhin auf das letzte Element im Array.
Mit lodash's forEachRight können Sie Folgendes tun:
_.forEachRight(chart.series, chartSeries => {
chartSeries.remove(false);
});
chart.redraw();
var seriesLength = chart.series.length;
for(var i = seriesLength -1; i > -1; i--) {
chart.series[i].remove();
}
Es kann nur eine einfache Sache sein, dem Diagramm das Neuzeichnen mitzuteilen. Wenn Sie eine Serie entfernen, versuchen Sie, das Diagramm neu zu zeichnen:
for (var i = 0; i < chart.series.length; i++) {
chart.series[i].remove(true); //forces the chart to redraw
}
Sie können auch eine neue Serie aktualisieren und hinzufügen. Wenn die neue Serie unter der aktuellen Serie liegt, entfernen Sie die Serie:
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();
}
}