Highcharts -更新列图与setData()不工作

DEMO更新所有系列(不只是第一个系列)的数据。

var chartBench
$(document).ready(function () {
    chartBench = new Highcharts.Chart({
        chart: {
            renderTo: 'containerYo',
            type: 'column'
        },
        title: {
            text: ''
        },
        credits: {
            enabled: false
        },
        legend: {},
        plotOptions: {
            series: {
                shadow: false,
                borderWidth: 0
            }
        },
        xAxis: {
            lineColor: '#999',
            lineWidth: 1,
            tickColor: '#666',
            tickLength: 3,
            categories: ['2011', '2012', '2013', '2014'],
            title: {
                text: 'Years'
            }
        },
        yAxis: {
            lineColor: '#999',
            lineWidth: 1,
            tickColor: '#666',
            tickWidth: 1,
            tickLength: 3,
            gridLineColor: '#ddd',
            labels: {
                format: '$ {value}'
            },
            title: {
                text: ''
            }
        },
        series: [{
            "name": "Yours",
                "data": [110, 100, 120, 130]
        }, {
            "name": "Another",
                "data": [100, 90, 110, 120]
        }, {
            "name": "Another B",
                "data": [90, 80, 100, 110]
        }, {
            "name": "Another C",
                "data": [80, 70, 90, 100]
        }]

    });
});
var option_a_data = [{
            "name": "Option-A (1)",
                "data": [10, 20, 30, 40]
        }, {
            "name": "Option-A (2)",
                "data": [50, 60, 70, 80]
        }, {
            "name": "Option-A (3)",
                "data": [90, 100, 110, 120]
        }, {
            "name": "Option-A (4)",
                "data": [130, 140, 150, 160]
        }];
var option_b_data = [{
            "name": "Option-B (1)",
                "data": [110, 100, 90, 80]
        }, {
            "name": "Option-B (2)",
                "data": [110, 100, 90, 80]
        }, {
            "name": "Option-B (3)",
                "data": [110, 100, 90, 80]
        }, {
            "name": "Option-B (4)",
                "data": [110, 100, 90, 80]
        }];
$("#list").on('change', function () {
    //alert('f')
    var selVal = $("#list").val();
    if (selVal == "a") 
    {
        //chartBench.series[0].setData([110, 100, 120, 130]);
        for(i=0; i<chartBench.series.length; i++)
        {
            //alert(i);
            //chartBench.series[i].setData(my_data[i].data);
            chartBench.series[i].update({
                name: option_a_data[i].name,
                data:option_a_data[i].data
            });
        }    
        chartBench.redraw(); 
    } 
    else if (selVal == "b") 
    {
        for(i=0; i<chartBench.series.length; i++)
        {
            //alert(i);
            //chartBench.series[i].setData(my_data[i].data);
            chartBench.series[i].update({
                name: option_b_data[i].name,
                data:option_b_data[i].data
            });
        }    
        chartBench.redraw(); // redraw only after add all series
    } 
    else 
    {
    }
    });

第一个问题是读出代码生成的错误。当您从下拉菜单中选择一个选项时，代码会生成以下错误:

Uncaught ReferenceError: chartBench is not defined

这是因为chartBench是在ready(function() { ... })范围内创建的，不能从外部on('change', function() { ... })访问。你可能想看看Javascript变量作用域。

var chartBench;
$(document).ready(function () {
    chartBench = new Highcharts.Chart({
    ....

您也可以选择将您的更改侦听器声明移动到ready(function() { ... })范围内。

关于数据的更新，你的代码仍然有问题。您正在使用chartBench.series[0].setData，好像它可以同时更新您的所有数据。事实并非如此。该函数设置单个系列的数据，因此您必须循环遍历系列并逐个更新它们。正确使用setData来更新单个列应该如下所示:

chartBench.series[0].setData([210, 200, 220, 230]);

这将更新图表中的第一个系列，以使用这些特定的值而不是以前的值。这个更新后的JSFiddle给出了一个使用下拉菜单更新单个列的示例。如果需要，您可以自行决定是否在所有系列中使用此功能。