全局变量初始化的Highcharts无法修改：调用addSeries等方法报错？

嗨，我帮你定位到问题啦！你遇到的报错核心原因是：你赋值给全局变量myChart的并不是Highcharts的图表实例，而是jQuery DOM元素对象。

当你用$('#graph-container').highcharts()初始化图表时，这个调用返回的是jQuery封装的容器元素，而不是Highcharts的图表实例。所以你后续调用myChart.addSeries()或者访问myChart.xAxis时，自然会提示方法/属性不存在——因为这些都是Highcharts实例独有的能力，jQuery对象并没有这些接口。

解决方法有两种，任选其一即可： #

方法1：初始化时直接获取并保存图表实例

修改你的init函数，通过回调函数获取Highcharts实例并赋值给全局变量：

var myChart; 
$(document).ready(function() { 
    init(); 
}); 

function init(){
    // 初始化图表时，通过回调参数拿到真实的Highcharts实例
    $('#graph-container').highcharts({
        title: { text: 'Dummy Title' },
        xAxis: { categories: ['Dummy1', 'Dummy2'] },
        series: []
    }, function(chart) {
        myChart = chart; // 将实例赋值给全局变量
    });
} 

function onclickButton(){
    // 现在可以正常调用实例方法了
    myChart.xAxis[0].setCategories(['A','B']);
    myChart.addSeries({ name: 'John', data: [['A',1], ['B',2]] });
}

方法2：需要时直接从容器获取实例

不需要依赖全局变量，在按钮点击函数里直接获取图表实例：

$(document).ready(function() { 
    init(); 
}); 

function init(){
    $('#graph-container').highcharts({
        title: { text: 'Dummy Title' },
        xAxis: { categories: ['Dummy1', 'Dummy2'] },
        series: []
    });
} 

function onclickButton(){
    // 方式A：用Highcharts内置方法获取实例
    var myChart = Highcharts.getChart('graph-container');
    // 方式B：用jQuery的data方法获取实例
    // var myChart = $('#graph-container').data('highcharts');
    
    myChart.xAxis[0].setCategories(['A','B']);
    myChart.addSeries({ name: 'John', data: [['A',1], ['B',2]] });
}

验证修改效果 #

两种方法都能让你正确访问到Highcharts实例，调用setCategories和addSeries方法就不会再报错了。

内容的提问来源于stack exchange，提问作者min.yong.yoon