5
私はGoogleグラフを使っていくつかのグラフを作成しようとしています。 私の目標は、PHPページからデータを読み込み、自動更新することです。 私はこれを行うことができましたが、データが更新されると、ゲージラインはアニメーション化されず、新しいものから再描画されます。私はこのようなクールなアニメーションを見たいと思います：https://jsfiddle.net/api/post/library/pure/。 実際に私は静的なファイルからデータをロードしています。その後、MySQLデータベースからデータを作成します（テスト済みで作業済み）。ここ 私のコード：Googleグラフ - ゲージグラフアニメーションが機能しない
temperature.phpここ
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script type="text/javascript">
google.charts.load('current', {'packages':['gauge']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
url: "http://URL/fetch_data3.php?type=gauge",
dataType:"json",
async: false
}).responseText;
var data = new google.visualization.DataTable(jsonData);
var options = {
width: 600, height: 300,
redFrom: 35, redTo: 50,
yellowFrom: 24, yellowTo: 35,
greenFrom: 18, greenTo: 24,
majorTicks : ['-10', '0', '10','20','30','40','50'], minorTicks: 10,
animation:{
duration: 1000,
easing: 'inAndOut',
},
max: 50, min: -10
};
var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
chart.draw(data, options);
clearChart();
}
setInterval(function() {
drawChart();
}, 5000);
</script>
</head>
<body>
<div id="chart_div" style="width: 500px; height: 400px;"></div>
</body>
</html>
とfetch_data3.php
<?php
if ($_REQUEST["type"] == "gauge") {
$sec = date('s');
if ($sec % 2 == 0) {
$string = file_get_contents("sampleData.json");
} else {
$string = file_get_contents("sampleData2.json");
}
echo $string;
}
?>
sampleData.json：
{
"cols": [
{"id":"","label":"Label","pattern":"","type":"string"},
{"id":"","label":"Value","pattern":"","type":"number"}
],
"rows": [
{"c":[{"v":"Esterno","f":null},{"v":0,"f":null}]},
{"c":[{"v":"Soggiorno","f":null},{"v":0,"f":null}]},
{"c":[{"v":"Stanza","f":null},{"v":0,"f":null}]}
]
}
sampleData2.json：
{
"cols": [
{"id":"","label":"Label","pattern":"","type":"string"},
{"id":"","label":"Value","pattern":"","type":"number"}
],
"rows": [
{"c":[{"v":"Esterno","f":null},{"v":10,"f":null}]},
{"c":[{"v":"Soggiorno","f":null},{"v":40,"f":null}]},
{"c":[{"v":"Stanza","f":null},{"v":20,"f":null}]}
]
}
グラフにはsampleData2.jsonまたはsampleData.jsonがランダムに読み込まれますが、グラフにアノテーションはありません。
どういうところが間違っていますか？
ありがとうございます！
サイモン
https://jsfiddle.net/api/post/library/pure /は空白です:) –
申し訳ありませんが、Googleドキュメントに示されているアノテーションに基づいています。https://google-developers.appspot.com/chart/interactive/docs/gallery/gauge – Simon