highcharts - 凡例をクリックしてすべてのシリーズを非表示にした場合のチャートレンダリングの問題

Question

再現する手順。

1. 4つのシリーズのデータ​​を表示するグラフがあり、各シリーズに対応する凡例があります。
2. 最初のチャートには1年分のデータがロードされています。
3. 次に、4つの凡例をクリックして、グラフからすべてのデータ系列を削除します。
4. 次に、グラフのズームレベルを変更します。たとえば、6か月のズームから3か月のズームに変更します。（注：データ系列が表示されない状態でズームを変更します）。
5. 次に、凡例をクリックしてデータ系列を再度有効にします。

6. チャートが正しく再描画されません。グラフを再描画するには、ページ全体を再読み込みする必要があります。

          <script src="http://code.highcharts.com/stock/highstock.js"></script>
         <script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
         <div id="container" style="height: 500px; min-width: 600px"> </div>
   
          $(function() {
              var seriesOptions = [],
              yAxisOptions = [],
              seriesCounter = 0,
              names = ['MSFT', 'AAPL', 'GOOG'],
              colors = Highcharts.getOptions().colors;
   
       $.each(names, function(i, name) {
           $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename='+ name.toLowerCase() +'-c.json&callback=?',   function(data) {
               seriesOptions[i] = {
                   name: name,
                   data: data
               };
   
               // As we're loading the data asynchronously, we don't know what order it will arrive. So
               // we keep a counter and create the chart when all the data is loaded.
               seriesCounter++;
               if (seriesCounter == names.length) {
                   createChart();
               }
           });
       });
   
       // create the chart when all data is loaded
       function createChart() {
           chart = new Highcharts.StockChart({
               chart: {
                   renderTo: 'container'
               },
               navigator: {
                               enabled: false
                           },
               legend: {
                               enabled: true
                           },
   
           rangeSelector: {
               selected: 4
           },
           scrollbar: {
                           enabled: false
                       },
           yAxis: {
               labels: {
                   formatter: function() {
                       return (this.value > 0 ? '+' : '') + this.value + '%';
                   }
               },
               plotLines: [{
                   value: 0,
                   width: 2,
                   color: 'silver'
               }]
           },
   
           plotOptions: {
               series: {
                   compare: 'percent'
               }
           },
   
           tooltip: {
               pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
               valueDecimals: 2
           },
           series: seriesOptions
       });
   }
   

   }）;

JsFiddleの例

Answer 1

バグのように見えるので、こちらの開発者に報告しました: https://github.com/highslide-software/highcharts.com/issues/1568

Answer 2

この問題は、HighStock のバージョン1.3.2で解決されています。

Answer 3

簡単な回避策:
試行錯誤の結果、ナビゲーターを無効にしないと上記のバグが発生しないことがわかりました。(ナビゲーターはデフォルトで有効になっています。)

以下に示すように、行にコメントを付けます。

navigator: {
     //enabled: false
}

Js フィドル: http://jsfiddle.net/msjaiswal/FDXBu/1/

確かにこれは Highcharts のバグですが、上記の簡単な回避策で対処できます。