使用Highcharts getJSON动态切换系列类型时遇options.series为空错误

我来帮你分析问题根源，以及对应的解决办法：

问题本质 #

你遇到的options.series变为null的情况，核心原因是Highcharts初始化图表时会直接修改你传入的options对象，而非创建一个独立副本。当你第一次在getJSON回调里调用new Highcharts.stockChart(options)时，Highcharts会对options进行深度处理——把series数组转换成它内部的系列实例结构，甚至会将原options.series置为null或替换成内部引用，导致后续再访问options.series时拿到的就是null了。

另外你的代码里还有个小错误：options.type = type;这行完全无效，因为图表类型是每个系列的专属属性，应该修改options.series[0].type而非顶层的options.type。

解决方案 #

核心思路是每次创建新图表时，基于原始配置的拷贝来操作，避免复用被Highcharts修改过的options对象，这里推荐两种靠谱的实现方式：

方式1：用Highcharts自带的merge工具函数（推荐）

Highcharts提供了Highcharts.merge方法，可以安全实现配置对象的深拷贝，完美保留原始结构：

var chart;
var originalOptions; // 专门保存未被修改的原始配置

$(document).ready(function() {
    // 把初始配置存在originalOptions里，永远不直接修改它
    originalOptions = {
        chart: { renderTo: 'container'},
        rangeSelector: {selected: 1},
        title: { text: 'AAPL Stock Price'},
        series: [{
            type: 'candlestick',
            name: 'AAPL Stock Price11',
            dataGrouping: {
                units: [
                    [ 'week', [1] ],
                    [ 'month', [1, 2, 3, 4, 6] ]
                ]
            }
        }]
    };

    chartfunc = function(type) {
        // 每次创建图表前，拷贝一份干净的原始配置
        var newOptions = Highcharts.merge({}, originalOptions);
        // 给拷贝后的配置添加数据（原始配置里的data是异步获取的）
        newOptions.series[0].data = originalOptions.series[0].data;
        // 修改目标系列的类型
        newOptions.series[0].type = type;
        // 销毁旧图表，避免页面出现重叠的图表实例
        if (chart) {
            chart.destroy();
        }
        // 创建新图表
        chart = new Highcharts.stockChart(newOptions);
    }

    $.getJSON('http://localhost/highstock/data/aapl-ohlcv.json', function(data) {
        // 把获取到的数据存在原始配置里，方便后续复用
        originalOptions.series[0].data = data;
        // 第一次初始化也用拷贝后的配置，避免污染原始配置
        chart = new Highcharts.stockChart(Highcharts.merge({}, originalOptions));
    });
});

方式2：用JSON序列化实现深拷贝

如果不想依赖Highcharts的工具函数，也可以用JSON.parse(JSON.stringify())实现深拷贝（注意：这种方式不适合包含函数的配置，你的配置里没有函数，所以完全可用）：

chartfunc = function(type) {
    var newOptions = JSON.parse(JSON.stringify(originalOptions));
    newOptions.series[0].type = type;
    if (chart) chart.destroy();
    chart = new Highcharts.stockChart(newOptions);
}

额外提示 #

• 每次切换图表类型前，一定要调用chart.destroy()销毁旧图表，避免页面上出现多个重叠的图表实例。
• 始终保留一份未被修改的原始配置，这样每次创建新图表时都能基于干净的基础配置调整，不会出现奇怪的属性被篡改的问题。

内容的提问来源于stack exchange，提问作者TheWalker