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

現在，它們是全局變量，因此您也可以在其他文件中訪問它們。