シリーズカラーを改行してナビゲータと範囲セレクタを表示する

Question

シリーズのカラーを白黒タイプのグラデーションから発散するカラーに変更できます。私たちは、ドロップダウンメニューを経由してこれをやっているし、我々は彼らの選択をキャプチャし、以下のような更新（デモよりも単純なコード）を実行します。

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); 
    } 
} 

これは正しく色を更新しないと私は別のリストを使用するには、変更を元に戻すことができますユーザーが元に戻すときに、配列内の色を変更する必要があります。

チャートは、一度に1つのシリーズだけが表示され、そのシリーズはナビゲータシリーズで使用されるようにロードされます。ユーザーが凡例のシリーズをクリックすると、他のシリーズがプロットされなくなり、選択したシリーズのみが表示され、ナビゲーターシリーズが更新され、チャートのタイトルが更新されます。これは、ユーザーが色を変更しないときにうまく動作します。

私が直面している問題は、ユーザが最初に読み込まれたシリーズ以外のシリーズに色を変えたときに、chart.redraw()が呼び出されたためにナビゲータシリーズがシリーズ[0]データセットに戻されるということです。更新コードを呼び出した後、ナビゲータシリーズを現在表示されているシリーズにするにはどうすればよいですか？私は色を更新した後、このコード（または同様のブロック）を入れて試してみましたし、目に見えるとchart.events.loadは影響します。ここでは

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); 
     } 
    } 
} 

はjsFiddleで作業するデータのライブセットです。 問題グラフを読み込むには、凡例の「データ傾向（％）」をクリックしてグラフに表示されるようにします。ナビゲータシリーズがこのシリーズに変更されたことに注目してください。ドロップダウンで、選択した値を「マルチカラー」に変更します。シリーズの色がどのように変化したかを確認しますが、ナビゲータシリーズのデータ​​も同様です。

Answer 1

Navigatorには、シリーズを参照する2つのプロパティがあります。最初のものは独自の系列オブジェクトです。データプロパティを更新します。もう1つは、系列から主系列への参照を保持するbaseSeriesです。 http://jsfiddle.net/1jz3r78v/1/

baseSeriesを目に見えるシリーズに設定すると、期待どおりに動作します。

  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 
      }); 

例：https://jsfiddle.net/yct6y11m/1/