Javascript 谷歌图表-仪表图动画不工作_Javascript_Php_Animation_Charts_Google Visualization

Javascript 谷歌图表-仪表图动画不工作

javascript php animation charts google-visualization

Javascript 谷歌图表-仪表图动画不工作,javascript,php,animation,charts,google-visualization,Javascript,Php,Animation,Charts,Google Visualization,我正在尝试用谷歌图形创建一些规格图。我的目标是从php页面加载数据并进行自动刷新。我能够做到这一点，但当数据刷新时，仪表线并没有设置动画，而是从新数据重新绘制。我想看看这样的酷动画：。实际上，我从一个静态文件加载数据，然后我将从一个MySQL数据库（经过测试和工作）创建数据。这是我的代码： temperature.php <html> <head> <script type="text/javascript" src="https://www.gstatic

我正在尝试用谷歌图形创建一些规格图。我的目标是从php页面加载数据并进行自动刷新。我能够做到这一点，但当数据刷新时，仪表线并没有设置动画，而是从新数据重新绘制。我想看看这样的酷动画：。实际上，我从一个静态文件加载数据，然后我将从一个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>

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，但图形上没有任何信息

怎么了

谢谢

Simon

根据仪表图表的要求，
动画仅在数据中的值更改时发生

由于图表在

启动时不设置动画，

使用设置为min
值的值开始绘制图表，

或动画应开始的值
然后使用一次性'ready'
事件侦听器绘制包含真实数据的图表

这将导致图表设置动画
请参阅以下工作片段

google.charts.load（'current'{
回调：函数（）{
图纸（）；
setInterval（函数（）{
图纸（）；
}, 5000);
函数绘图图（）{
var initData={
“科尔斯”：[
{“id”：“label”：“label”，“pattern”：“type”：“string”}，
{“id”：“label”：“Value”，“pattern”：“type”：“number”}
],
“行”：[
{“c”：[{“v”：“Esterno”，“f”：null}，{“v”：-10，“f”：null}]}，
{“c”：[{“v”：“Soggiorno”，“f”：null}，{“v”：-10，“f”：null}]}，
{“c”：[{“v”：“节”，“f”：空}，{“v”：-10，“f”：空}]}
]
};
var data=new google.visualization.DataTable（initData）；
变量选项={
宽度：600，高度：300，
红色从：35，红色到：50，
黄色从：24，黄色到：35，
格林From:18，格林托：24，
大教堂：['-10'，0'，10'，20'，30'，40'，50'，小教堂：10，
动画：{
持续时间：1000，
放松：“无生气”
},
最大值：50，最小值：-10
};
var chart=new google.visualization.Gauge（document.getElementById（'chart_div'））；
google.visualization.events.addOneTimeListener（图表'ready'，函数（）{
var jsonData={
“科尔斯”：[
{“id”：“label”：“label”，“pattern”：“type”：“string”}，
{“id”：“label”：“Value”，“pattern”：“type”：“number”}
],
“行”：[
{“c”：[{“v”：“Esterno”，“f”：null}，{“v”：10，“f”：null}]}，
{“c”：[{“v”：“Soggiorno”，“f”：null}，{“v”：40，“f”：null}]}，
{“c”：[{“v”：“节”，“f”：空}，{“v”：20，“f”：空}]}
]
};
var data=新的google.visualization.DataTable（jsonData）；
图表绘制（数据、选项）；
});
图表绘制（数据、选项）；
}
},
包装：[“规格”]
});
为空：）对不起，这是基于谷歌文档中显示的信息：
{
  "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}]}
      ]
}

{
  "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}]}
      ]
}