Question

我有一个列图，我想在用户从下拉菜单中选择一个选项时更新。我能够正确渲染列图，但我无法使用setData（）更新图形。我有点难过，因为我没有收到任何错误。您可以给我的任何帮助或见解将不胜感激！这是我的JSFiddle的链接

以及呈现图表的Javascript代码

$(document).ready(function () {
    var 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]
        }]



    });
});


$("#list").on('change', function () {
    //alert('f')
    var selVal = $("#list").val();


    if (selVal == "a") {
        chartBench.series[0].setData([
            [{
                "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]
            }]
        ]);

    } else if (selVal == "b") {
        chartBench.series[0].setData([
            [{
            "name": "Yours",
                "data": [210, 200, 220, 230]
        }, {
            "name": "Another",
                "data": [200, 190, 210, 220]
        }, {
            "name": "Another B",
                "data": [190, 180, 200, 210]
        }, {
            "name": "Another C",
                "data": [180, 170, 190, 200]
        }]
            ]);

        } else {

        }
    });

Answer 1

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 { } });

Answer 2

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

未捕获的ReferenceError：未定义chartBench

这是因为chartBench是在ready(function() { ... })范围内创建的，无法从外部on('change', function() { ... })进行访问。您可能需要查看Javascript Variable Scope。

要解决此问题，您可以在顶层定义chartBench变量，以确保它可以访问，如下所示：

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

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

关于数据更新，您的代码仍有问题。您正在使用chartBench.series[0].setData，就好像它可以同时更新所有数据一样。不是这种情况。此函数设置单个系列的数据，因此您必须遍历系列并单独更新它们。正确使用setData更新单个列将如下所示：

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

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

Highcharts - 使用setData（）更新列图无效

2 个答案: