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'的值：对象为空或未定义
我认为这有一些事情要做，即livingata.js看不到风速变量，因为它在不同的范围内。
有人能告诉我如何让这个工作吗？

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

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

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

1 个答案: