javascript – Google Charts – Gauge Graph动画无效

我正在尝试使用Google Graphs创建一些GAUGE图表.
我的目标是从PHP 页面加载数据并进行自动刷新.
我能够做到这一点,但是当刷新数据时,Gauge线不是动画的,而是从new重绘它们.我希望看到像这样的酷动画：https://jsfiddle.net/api/post/library/pure/.
实际上我是从静态文件加载数据,然后我将从MysqL 数据库创建数据(测试和工作).
这是我的代码：

temperature.PHP

@H_404_11@

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);


这里是fetch_data3.PHP

@H_404_11@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：

@H_404_11@{
  "cols": [
        {"id":"","label":"Label","pattern":"","type":"string"},{"id":"","label":"Value","type":"number"}
      ],"rows": [
        {"c":[{"v":"Esterno","f":null},{"v":0,"f":null}]},{"c":[{"v":"Soggiorno",{"c":[{"v":"Stanza","f":null}]}
      ]
}

sampleData2.json：

@H_404_11@{
  "cols": [
        {"id":"",{"v":10,{"v":40,{"v":20,"f":null}]}
      ]
}

该图随机加载sampleData2.json或sampleData.json,但图上没有anomation.
怎么了？
谢谢！
西蒙


最佳答案
根据supported modifications的量表图表,
动画仅在数据中的值更改时发生
由于图表在启动时没有动画,
最初绘制图表时将值设置为最小值,
或者动画应该开始的值
然后使用一次’ready’事件监听器来绘制具有真实数据的图表
这将导致图表动画
请参阅以下工作代码段…

@H_404_11@google.charts.load('current',{
  callback: function () {
    drawChart();

    setInterval(function() {
      drawChart();
    },5000);

    function drawChart() {
      var initData = {
        "cols": [
          {"id":"","type":"number"}
        ],"rows": [
          {"c":[{"v":"Esterno",{"v":-10,"f":null}]}
        ]
      };

      var data = new google.visualization.DataTable(initData);

      var options = {
        width: 600,animation:{
          duration: 1000,easing: 'inAndOut'
        },min: -10
      };

      var chart = new google.visualization.Gauge(document.getElementById('chart_div'));

      google.visualization.events.addOneTimeListener(chart,'ready',function () {
        var jsonData = {
          "cols": [
            {"id":"","type":"number"}
          ],"rows": [
            {"c":[{"v":"Esterno","f":null}]}
          ]
        };

        var data = new google.visualization.DataTable(jsonData);
        chart.draw(data,options);
      });

      chart.draw(data,options);
    }
  },packages:['gauge']
});
@H_404_11@

javascript – Google Charts – Gauge Graph动画无效

猜你在找的JavaScript相关文章