Highcharts 通过单击图例隐藏所有系列时出现图表渲染问题

复制的步骤

我们有一个显示4个系列数据的图表，每个系列都有相应的图例

初始图表加载了1年的数据

然后单击4个图例，从图表中删除所有数据系列

然后，我们更改图表的缩放级别-例如，从6个月的缩放改为3个月的缩放。（注意：我们在不显示数据系列的情况下更改缩放）

然后单击图例重新启用数据系列

图表没有正确地重新绘制。要重新绘制图表，我们必须重新加载整个页面

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

$（函数（）{
var系列选项=[]，
yAxisOptions=[]，
序列计数器=0，
名称=['MSFT'、'AAPL'、'GOOG']，
colors=Highcharts.getOptions（）.colors；
$.each（名称、函数（i、名称）{
$.getJSON（'http://www.highcharts.com/samples/data/jsonp.php?filename=“+name.toLowerCase（）+”-c.json&callback=？”，函数（数据）{
系列选项[i]={
姓名:姓名,，
数据：数据
};
//当我们异步加载数据时，我们不知道数据的到达顺序
//我们保留一个计数器，并在加载所有数据时创建图表。
seriesconter++；
if（serieCounter==names.length）{
createChart（）；
}
});
});
//在加载所有数据时创建图表
函数createChart（）{
图表=新的Highcharts.StockChart({
图表：{
renderTo:“容器”
},
导航器：{
已启用：false
},
图例：{
已启用：true
},
范围选择器：{
选定：4
},
滚动条：{
已启用：false
},
亚克斯：{
标签：{
格式化程序：函数（）{
返回（this.value>0？'+'：''）+this.value+'%；
}
},
绘图线：[{
值：0，
宽度：2，
颜色：“银色”
}]
},
打印选项：{
系列：{
比较：“百分比”
}
},
工具提示：{
pointFormat:“{series.name}:{point.y}（{point.change}%）
”，
数值小数：2
},
系列：系列选项
});
}

}))

---

它看起来像一个bug，所以我在这里向我们的开发人员报告了它：

一个简单的解决方法：
经过一些尝试和错误，我发现如果不禁用导航器，上面的错误就不会出现。（默认情况下，导航器处于启用状态。）

注释行，如下所示：

navigator: {
     //enabled: false
}

Js小提琴：

---

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

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

如果您将缩放级别从3个月的缩放更改为全部，则此问题可以解决。