Aktualisieren der Serienfarbe scheint zu brechen Navigator- und Bereichsauswahl

Question

Wir möchten es den Benutzern ermöglichen, die Farben der Serie von einem monochromen Farbverlauf in divergente Farben zu ändern. Wir tun dies über eine Drop-Down-Menü und wir ihre Auswahl erfassen und zu tun, das Update wie unter (einfachen Code als Demo):

var rainbow = new Rainbow(); 
// Set start and end colors 
rainbow.setSpectrum('#528bc2', 'white'); 
// Set the min/max range 
var numSeries = chart.series.length; 
var rangeLow = 0; 
var rangeHigh = numSeries 
rainbow.setNumberRange(rangeLow, rangeHigh); 

// Loop over data and update the color value 
for (index = 0; index < numSeries; ++index) { 
    if (chart.series[index].name != 'Navigator') { 
     if (chart.series[index].options.yAxis == 1) { 
      chart.series[index].update({ 
       color: '#000080' 
      }, false); 
    } else { 
     chart.series[index].update({ 
      color: '#' + rainbow.colourAt(index) 
     }, false); 
    } 
    if (chart.series[index].visible) { 
     var navigator = chart.get('nav'); 
     navigator.setData(chart.series[index].options.data); 
    } 
} 

Diese Farben korrekt nicht aktualisiert, und ich kann die Änderung zufällt eine andere Liste zu verwenden, von Farben in einem Array, wenn der Benutzer zurück möchte.

Das Diagramm wird so geladen, dass immer nur eine Serie sichtbar ist und diese Serie in der Navigator-Serie verwendet wird. Wenn ein Benutzer auf eine Reihe in der Legende klickt, blendet er die andere Reihe vor dem Plotten aus und zeigt nur die ausgewählte Reihe an, aktualisiert die Navigatorreihe und aktualisiert den Diagrammtitel. Dies funktioniert gut, wenn der Benutzer die Farbe nicht ändert.

Das Problem, mit dem ich konfrontiert bin, ist, dass, wenn ein Benutzer auf einer anderen Serie als die ursprünglich geladene Serie ist, wenn sie die Farbe ändern, die Navigator-Serie wieder auf die Serie [0] Datensatz chart.redraw() aufgerufen wird. Wie kann ich die Navigator-Serie nach Aufruf des Update-Codes sauber zur aktuell sichtbaren Serie machen? Ich habe diesen Code versucht setzen (oder Block) nach dem Farb Update und chart.events.load ohne sichtbare Auswirkungen auf:

for (i = 0; i < this.series.length; i += 1) { 
    if (this.series[i].name != 'Navigator') { 
     if (this.series[i].visible) { 
     console.log(this.series[i].name); 
     var navigator = this.get('nav'); 
     navigator.setData(this.series[i].options.data); 
     } 
    } 
} 

Hier ein Live-Set von Daten mit in jsFiddle zu arbeiten. Um das Problem zu reproduzieren, lassen Sie das Diagramm laden und klicken Sie dann in der Legende auf "Datentrend (%)", so dass es im Diagramm sichtbar ist. Beachten Sie, dass sich die Navigator-Reihe zu dieser Serie geändert hat. Im Drop-down-Menü ändern Sie nun den ausgewählten Wert auf "Mehrfarbig". Beachten Sie, wie sich die Farbe der Reihe geändert hat, aber auch die Daten der Navigatorserie.

Answer 1

Navigator hat zwei Eigenschaften, die sich auf Serien beziehen. Der erste ist ein eigenes Serienobjekt - Sie aktualisieren seine Dateneigenschaft, der zweite ist baseSeries, der Bezug auf die Hauptserie eines Diagramms hält. http://jsfiddle.net/1jz3r78v/1/

Wenn Sie BaseSeries auf eine sichtbare Reihe festlegen, funktioniert es wie erwartet.

  serie[i].show(); 
      var navigator = this.chart.get('nav'); 
      this.chart.scroller.baseSeries = this; // serie[i] 
      navigator.setData(serie[i].options.data); 
      this.chart.setTitle({ 
       text: serie[i].name 
      }); 

Beispiel: https://jsfiddle.net/yct6y11m/1/