Highcharts：多个图表和一个更新功能

Question

我似乎无法弄清楚我如何拥有多个图表并使用一个更新功能更新这些图表。
我有一个HTML文件，在该文件中我有这个：

<script type="text/javascript" src="highchart/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="highchart/highcharts.js"></script>
<script type="text/javascript" src="highchart/highcharts-more.js"></script>
<script type="text/javascript" src="windspeed.js"></script>
<script type="text/javascript" src="livedata.js"></script>

windspeed.js：

$(function () {
    var windspeed = new Highcharts.Chart({
        chart: {
            renderTo: 'windspeed',
            type: 'gauge',
            plotBackgroundColor: null,
            plotBackgroundImage: null,
            plotBorderWidth: 0,
            plotShadow: false
        }, 
etc.
}

livedata.js：

$(function (livedata) {
        setInterval(function() {
        $(function() {
        $.getJSON('livedata.php', function(data) {
            $.each(data, function(key,val) {
            if (key == 'WindSpeed')
            {
            var point = windspeed.series[0].points[0];
                point.update(val);
            }
            });
        });
        })
    },2000)
    }
);

弹出图表但数据未更新，得到此错误：无法获取属性'0'的值：object为null或undefined
我认为这有一些事情可以使livingata.js无法看到windspeed变量，因为它在不同的范围内。
有人能告诉我如何让这个工作吗？

Answer 1

您无权访问$（function（））之外的变量，它们是本地的：

$(function () {
    var windspeed = new Highcharts.Chart({
        ...
    });
    var windspeed2 = new Highcharts.Chart({
        ...
    });
    var windspeed3 = new Highcharts.Chart({
        ...
    });
});

您可以将它们移出此范围：

var windspeed, windspeed2, windspeed3;
$(function () {
    windspeed = new Highcharts.Chart({
        ...
    });
    windspeed2 = new Highcharts.Chart({
        ...
    });
    windspeed3 = new Highcharts.Chart({
        ...
    });
});

现在，它们是全局变量，因此您也可以在其他文件中访问它们。