非同期読み込みで非表示のナビゲータを使用する方法をハイスタンバイ

Question

ハイストックasync data loading exampleを考えてみましょう。私はプレビューを隠し、スクロールバーだけを表示したい。だから私は、チャートの設定でfalseにenabledを設定します。

navigator: { 
    enabled: false, 
    adaptToUpdatedData: false, 
    ... 

これが説明したように動作しないadaptToUpdatedDataオプションの原因となります、つまり、スクロールバーの幅をズームするときは、常に100％になります。プレビューを隠しながら、デモの同じ動作を維持することは可能ですか？

Answer 1

無効にするのではなく、ナビゲータのすべての要素を視覚的に隠すことができます。例えば

（JSFiddle）：あなたは、ハンドルのようになりどこにカーソルがまだ変化していることに気づくかもしれません

$('#container').highcharts('StockChart', { 
    navigator : { 
     adaptToUpdatedData: false, 
     height: 0, 
     handles: { 
      backgroundColor: 'transparent', 
      borderColor: 'transparent' 
     }, 
     series : { 
      data : data 
     }, 
     xAxis: { 
      labels: { 
       enabled: false 
      } 
     } 
    } 
    // ... 
}); 

。これを取り除きたい場合は、ハンドルの描画を一括して防ぐことができます。例えば

（JSFiddle）：

(function (H) { 
    H.wrap(H.Scroller.prototype, 'drawHandle', function (proceed, x, index) { 
    }); 
}(Highcharts)); 

$('#container').highcharts('StockChart', { 
    navigator : { 
     adaptToUpdatedData: false, 
     height: 0, 
     series : { 
      data : data 
     }, 
     xAxis: { 
      labels: { 
       enabled: false 
      } 
     } 
    } 
    // ... 
});