0

Google Gauge ビジュアライゼーション用のコードを動的に作成する際に問題が発生しています。私の主な問題は、一時監視ダッシュボード用の複数のゲージ パネルを構築するために、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>

私の問題は、データ オブジェクトの配列を作成できないことです。for ループ内でそのオブジェクトを参照する必要があります。私はこの問題をグーグルで検索しましたが、これを行うための良い方法を思いつくことができませんでした。私は提案を広く受け入れています。前もって感謝します。

4

1 に答える 1