javascript - Highcharts - 将数据从一个图表重写到另一个图表

Question

在我的示例中，数据是随机生成的。单击按钮后，应更改缩放类型。

$(function() {

var chartOptions={  
        chart:{
            zoomType : 'x',
            events : {
                load : function() {
                var series = this.series[0];
                    var chart = this;
                    setInterval(function() {
                        var x = (new Date()).getTime(),
                        y = Math.round(Math.random() * 100);
                        series.addPoint([x, y]);
                        chart.redraw();
                    }, 1000);
                }
            }
        },
        series : [{
            name : 'AAPL',
            data : [null]
        }]
    };

$('#container').highcharts('StockChart', chartOptions); 

$('#button').click(function() {
    var chart1 = $('#container').highcharts();
    //alert(chart1.series[0].yData);
    chartOptions.chart.zoomType = 'y';
    $('#container').highcharts(chartOptions);
});
});

单击按钮后，旧图表消失，但未生成新图表。Firebug 显示TypeError: e is undefined并在行series.addPoint([x, y]);显示series is undefined。

chartOptions是全局的，因此在单击处理程序中，一个属性（zoomType）被更改，其余的应该是相同的。

alert(chart1.series[0].yData);显示属性 y 数据。所以我尝试了：

$('#button').click(function() {
    var chart1 = $('#container').highcharts();
    //alert(chart1.series[0].yData);
    chartOptions.chart.zoomType = 'y';
    var chart2 = $('#container').highcharts(chartOptions);
    chart2.series[0].setData(chart1.series[0].data);
    chart2.redraw();
});

然后萤火虫显示chart2.series is undefined。

Answer 1

您无法更新 highcharts 中的缩放类型，没有 destroy() 图表并创建新实例。换句话说，你应该使用

chart1.destroy()

var chart2 = $('#container').highcharts(chartOptions);

如果您想在任何轴上设置范围（缩放图表），您可以使用 setExtremes() 函数 http://api.highcharts.com/highstock#Axis.setExtremes()

当chartOptions或 chart2.series 未定义时，您需要使用 $.extend({},chartoptions)

$('#container').highcharts($.extend({},chartoptions);