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 ループ内でそのオブジェクトを参照する必要があります。私はこの問題をグーグルで検索しましたが、これを行うための良い方法を思いつくことができませんでした。私は提案を広く受け入れています。前もって感謝します。