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

一个简单的解决方法：
经过反复试验，我发现如果您不禁用导航器，则不会出现上述错误。（导航器默认启用。）

注释该行，如下所示：

navigator: {
     //enabled: false
}

Js 小提琴：http: //jsfiddle.net/msjaiswal/FDXBu/1/

当然，这是 Highcharts 中的一个错误，但我们可以接受上述简单的解决方法。

Answer 3

此问题已在HighStock版本1.3.2中得到解决。