谷歌图表 - Gauge Graph动画无效 [英] Google Charts - Gauge Graph animation not working
问题描述
我试图用Google Graph创建一些GAUGE图。
我的目标是从一个php页面加载数据并进行自动刷新。
我可以做到这一点，但是当数据刷新时，标尺线不是动画的，而是从新创建的。我希望看到如此酷的动画： https://jsfiddle.net/api/post /库/纯/ 。
实际上我正在从一个静态文件中加载数据，然后我将从一个MySQL数据库创建数据（经过测试和工作）。
在这里，我的代码：
temperature.php
< HTML>
< head>
< script type =text / javascriptsrc =https://www.gstatic.com/charts/loader.js>< / script>
< script type =text / javascriptsrc =https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js> < /脚本>
< script type =text / javascript>
google.charts.load（'current'，{'packages'：['gauge']}）;
google.charts.setOnLoadCallback（drawChart）;
函数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 ，
动画：{
duration：1000，
easing：'inAndOut'，
}，
max：50，min：-10
};
var chart = new google.visualization.Gauge（document.getElementById（'chart_div'））;
chart.draw（data，options）;
clearChart（）;
$ b setInterval（function（）{
drawChart（）;
}，5000）;
< / script>
< / head>
< body>
< div id =chart_divstyle =width：500px; height：400px;>< / div>
< / body>
< / html>
以及fetch_data3.php
<$ p （$ _REQUEST [type] ==gauge）{
$ sec = date（'s'）; $ p $
<？php
if
if（$ sec％2 == 0）{
$ string = file_get_contents（sampleData.json）;
} else {
$ string = file_get_contents（sampleData2.json）;
}
echo $ string;
}
？> b
$ b sampleData.json： > {
cols：[
{id：，label：Label，pattern：，type：string }，
{id：，label：Value，pattern：，type：number}
]，
rows ：[
{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}]}
]
}
这个grap h随机加载sampleData2.json或sampleData.json，但图表中没有任何anomation。
有什么不对？
感谢！
Simon
href =https://developers.google.com/chart/interactive/docs/animation#supported-modifications =nofollow>支持修改量表，
动画仅当数据中的值发生变化时才会发生
，因为图表在 startup >上没有动画，
首先绘制图表，并将值设置为 min 值，
或动画开始时的值
然后使用一次 'ready'事件侦听器以真实数据绘制图表< br>
这将导致图表生成动画
请参阅以下工作片段...
google.charts < script src =https://www.gstatic.com/charts/loader.js>< / script>< div id =chart_div>< / div> $ b $
从默认值设置 - 接收到的实际数据
为了让图表生成动画...
从以前的真实数据 - 收到的新数据
您需要保存对图表
的引用，而不是创建新的图表，每当它被绘制
也强烈推荐不使用 async：false 对 $。ajax 调用
使用成功处理程序来代替
推荐这个设置，它将在初始绘制时使用默认值
动画，然后a从以前的数据，到每个时间间隔的新数据。
google.charts.load（'current'，{
callback：function（）{
//保存对图表的引用
var chart = null;
drawChart（）;
setInterval（function（）{
drawChart（）;
}，5000）;
函数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，
黄色：24，黄色至：35，
greenFrom：18，greenTo：24，
majorTicks：['-10'，'0'，'10'，'20'，'30'，' 40'，'50']，minorTicks：10，
动画：{
持续时间：1000，
缓动：'inAndOut'
}，
最大值：50， min：-10
};
var data;
if（chart === null）{
chart = new google.visualization.Gauge（document.getElementById （'chart_div'））;
//带最小值的数据
data = new google.visualization.DataTable（{
cols： [
{id：，label：Label，pattern：，type：string}，
{id：，标签：价值，模式：，类型：数字}
]，
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数据，选项）;
}）;
} else {
data = new google.visualization.DataTable（jsonData）;
}
chart.draw（data，options）;
}
}）;
}
}，
packages：['gauge']
}）;
I'm trying to create some GAUGE graphs with Google Graphs.
My goal is to load the data from a php page and have an auto refresh.
I was able to do that, but when the data is refreshed, the Gauge lines are not animated, but instead they are redrawn from new. I would like to see the cool animation like this: https://jsfiddle.net/api/post/library/pure/.
Actually I'm loading the data from a static file, then I'll create the data from a MySQL database (tested and worked).
Here my code:
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>
and here the 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}]}
]
}
The graph loads randomly sampleData2.json or sampleData.json but there is no anomation on the graph.
What's wrong?
Thanks!
Simon
解决方案 according to the supported modifications for a Gauge chart,
animation only occurs when a value in the data changes
since the chart doesn't animate on startup,
draw the chart initially with the values set to the min value,
or the value at which the animation should begin
then use a one time 'ready' event listener to draw the chart with the real data
this will cause the chart to animate
see following working snippet...
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>
as mentioned, the above charts will animate...
from the default values set -- to the real data received
in order to get the chart to animate...
from the previous real data -- to the new data received
you would need to save a reference to the chart
instead of creating a new chart, everytime it is drawn
also, highly recommend not using async: false on the $.ajax call
use the success handler instead
recommend this setup, which will animate on the initial draw using default values
then animate from the previous data, to the new data on each interval
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']
});
这篇关于谷歌图表 - Gauge Graph动画无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
