Sim*_*mon 5 javascript php charts animation google-visualization
我正在尝试使用Google Graphs创建一些GAUGE图表.我的目标是从php页面加载数据并进行自动刷新.我能够做到这一点,但是当刷新数据时,Gauge线不是动画的,而是从new重绘它们.我希望看到像这样的酷动画:https://jsfiddle.net/api/post/library/pure/.实际上我是从静态文件加载数据,然后我将从MySQL数据库创建数据(测试和工作).这是我的代码:
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,但图上没有anomation.
怎么了？
谢谢!
西蒙
根据仪表图支持的修改
，
仅当数据中的值发生变化时才会出现动画
由于图表不会在 上进行动画处理startup，
因此最初绘制图表时将值设置为minvalue，
或者动画应开始的值
然后使用一次性 'ready'事件监听器用真实数据绘制图表，
这将导致图表动画
请参阅以下工作片段...
google.charts.load('current', {
callback: function () {
drawChart();
setInterval(function() {
drawChart();
}, 5000);
function drawChart() {
var initData = {
"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":-10,"f":null}]},
{"c":[{"v":"Stanza","f":null},{"v":-10,"f":null}]}
]
};
var data = new google.visualization.DataTable(initData);
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'));
google.visualization.events.addOneTimeListener(chart, 'ready', function () {
var jsonData = {
"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}]}
]
};
var data = new google.visualization.DataTable(jsonData);
chart.draw(data, options);
});
chart.draw(data, options);
}
},
packages:['gauge']
});<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>如前所述，上面的图表将动画......
从设置的默认值到收到的实际数据
为了让图表动画化......
从之前的真实数据--到收到的新数据
每次绘制时， 您都需要保存对 的引用，chart
而不是创建新的chart
另外，强烈建议不要async: false在$.ajax通话中使用，而是
使用处理程序success
推荐此设置，它将使用默认值在初始绘制时制作动画
，然后从先前的数据动画到每个间隔的新数据
google.charts.load('current', {
callback: function () {
// save reference to chart
var chart = null;
drawChart();
setInterval(function() {
drawChart();
}, 5000);
function drawChart() {
$.ajax({
url: 'http://URL/fetch_data3.php?type=gauge',
dataType: 'json',
success: function (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 data;
if (chart === null) {
chart = new google.visualization.Gauge(document.getElementById('chart_div'));
// data with min values
data = new google.visualization.DataTable({
"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":-10,"f":null}]},
{"c":[{"v":"Stanza","f":null},{"v":-10,"f":null}]}
]
});
google.visualization.events.addOneTimeListener(chart, 'ready', function () {
data = new google.visualization.DataTable(jsonData);
chart.draw(data, options);
});
} else {
data = new google.visualization.DataTable(jsonData);
}
chart.draw(data, options);
}
});
}
},
packages:['gauge']
});