首页 / JAVASCRIPT / javascript-Highcharts-使用setData()更新柱形图不起作用

javascript-Highcharts-使用setData()更新柱形图不起作用

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript-Highcharts-使用setData()更新柱形图不起作用，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2534字，纯文字阅读大概需要4分钟。

内容图文

我有一个柱形图,当用户从下拉菜单中选择一个选项时,我想更新该柱形图.
我能够正确呈现柱状图,但无法使用setData()更新图.我有点沮丧,因为我没有收到任何错误.您能给我的任何帮助或见解将不胜感激！这是我的JSFiddle的链接

http://jsfiddle.net/mshirk/6QYzD/2/

和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 {

        }
    });

解决方法:

第一个问题是读出您的代码生成的错误.当您从下拉菜单中选择一个选项时,您的代码将产生错误：

Uncaught ReferenceError: chartBench is not defined

这是因为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提供了一个使用下拉菜单更新单个列的示例.如果需要,您可以在所有系列中使用此功能.

内容总结

以上是互联网集市为您收集整理的javascript-Highcharts-使用setData()更新柱形图不起作用全部内容，希望文章能够帮你解决javascript-Highcharts-使用setData()更新柱形图不起作用所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/678919.html

来源：【匿名】