it-swarm.com.de

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: initial display

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:drill down - broken display

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: reset data to original set - broken display

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?

61
Z Jones

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.

142
Lee

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/

8
Scott

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();
1
chipit24

var seriesLength = chart.series.length; for(var i = seriesLength -1; i > -1; i--) { chart.series[i].remove(); }

0
YASH GAUTAMI

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
}
0
NT3RP

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();
    }
}
0
Rupesh Verma