Javascript 动态创建GoogleGauge图表时遇到问题

我在动态创建GoogleGauge可视化代码时遇到了一些问题。我的主要问题是，我正在尝试基于一些JSON中返回的内容构建javascript，以便为临时监控仪表板构建多个仪表板。这是我目前的代码：

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

        <script type="text/javascript">
        //Get php data about sensor into json array for javasript processing
        var gauges = <?php echo json_encode($sensor_data);?>;

        google.load("visualization", "1", {packages:["gauge"]});
        google.setOnLoadCallback(drawChart);

        for (var i = 0, len = gauges.length; i < len; ++i) {
            var gauge = gauges[i];
            var currentTemp = gauge.value;
            var chartID = "chart_div_" + gauge.sensor_id;
            var gMin = gauge.config_min_temp;
            var gMax = gauge.config_max_temp;
            var lLimit = gauge.limits_low;
            var hLimit = gauge.limits_high;

            //calculate major tick increments
            var increment = (parseFloat(gMax) - parseFloat(gMin))/4;
            var tick0 = gMin;
            var tick1 = parseFloat(gMin) + parseFloat(increment);
            var tick2 = parseFloat(tick1) + parseFloat(increment);
            var tick3 = parseFloat(tick2) + parseFloat(increment);
            var tick4 = gMax; 

            var Ticks = [tick0, tick1, tick2, tick3, tick4];

            function drawChart() {
                var data = google.visualization.arrayToDataTable([
                    ['Label', 'Value'],
                    ['Temp', 0]
                ]);

                var options = {
                    width: 220, height: 220,
                    redFrom: hLimit, redTo: gMax,
                    yellowFrom: gMin, yellowTo: lLimit,
                    greenFrom:  gMin, greenTo: gMax,
                    minorTicks: 5,
                    majorTicks: Ticks,
                    min: gMin,
                    max: gMax,
                    redColor: '#ff0000',
                    yellowColor: '#ff0000',
                    greenColor: '#00cc00'
                };

                var chart = new google.visualization.Gauge(document.getElementById(chartID));
                data.setValue(0, 1, currentTemp);
                chart.draw(data, options);
            }
        }
    </script>

//将有关传感器的php数据获取到json数组中，以进行javasript处理
var仪表=；
load（“可视化”，“1”，“{packages:[“gauge”]}）；
setOnLoadCallback（drawChart）；
对于（变量i=0，len=gauges.length；i

---

我的问题是无法创建数据对象的数组。我需要在for循环中引用该对象。我一直在谷歌上搜索这个问题，直到我束手无策，也找不到一个好办法来解决这个问题。我愿意听取建议。提前感谢。

您的代码将按原样创建一个

drawChart

函数，然后覆盖它，我相当确定这不是您的意图。此代码将在

仪表

阵列上循环，并为阵列中的每个元素绘制仪表：

function drawChart() {
    for (var i = 0, len = gauges.length; i < len; ++i) {
        var gauge = gauges[i];
        var currentTemp = gauge.value;
        var chartID = "chart_div_" + gauge.sensor_id;
        var gMin = gauge.config_min_temp;
        var gMax = gauge.config_max_temp;
        var lLimit = gauge.limits_low;
        var hLimit = gauge.limits_high;

        //calculate major tick increments
        var increment = (parseFloat(gMax) - parseFloat(gMin))/4;
        var tick0 = gMin;
        var tick1 = parseFloat(gMin) + parseFloat(increment);
        var tick2 = parseFloat(tick1) + parseFloat(increment);
        var tick3 = parseFloat(tick2) + parseFloat(increment);
        var tick4 = gMax; 

        var Ticks = [tick0, tick1, tick2, tick3, tick4];

        var data = google.visualization.arrayToDataTable([
            ['Label', 'Value'],
            ['Temp', currentTemp]
        ]);

        var options = {
            width: 220, height: 220,
            redFrom: hLimit, redTo: gMax,
            yellowFrom: gMin, yellowTo: lLimit,
            greenFrom:  gMin, greenTo: gMax,
            minorTicks: 5,
            majorTicks: Ticks,
            min: gMin,
            max: gMax,
            redColor: '#ff0000',
            yellowColor: '#ff0000',
            greenColor: '#00cc00'
        };

        var chart = new google.visualization.Gauge(document.getElementById(chartID));
        data.setValue(0, 1, currentTemp);
        chart.draw(data, options);
    }
}

函数绘图图（）{
对于（变量i=0，len=gauges.length；i

---

这就是你想要实现的吗？

这就是我想要实现的。我昨天下午解决了我的问题，解决方案在功能上与您提供的相同。我对图表的绘制过程有一个误解。非常感谢你的帮助。