Question

重现的步骤。

我们有一个显示4个系列数据的图表，每个系列都有相应的图例。
初始图表载有1年的数据。
然后，我们通过点击4个图例
然后我们更改图表的缩放级别 - 例如从6个月的缩放，到3个月的缩放。（注意：我们更改Zoom而不显示数据系列）。
然后我们通过点击图例重新启用数据系列。

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

       <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 Example

Answer 1

它看起来像一个错误，所以我在这里向我们的开发人员报告：https://github.com/highslide-software/highcharts.com/issues/1568

Answer 2

一个简单的解决方法：
经过一些反复试验，我发现如果你没有禁用导航器，就不会出现上面的错误。（默认情况下启用导航器。）

评论该行，如下所示：

navigator: {
     //enabled: false
}

Js Fiddle：http://jsfiddle.net/msjaiswal/FDXBu/1/

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

Answer 3

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

通过点击图例隐藏所有系列时的图表渲染问题

3 个答案: