Question

我尝试使用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。

出了什么问题？

谢谢！

西蒙

Answer 1

根据supported modifications表示仪表图表，
动画仅在数据中的值更改时发生

因为图表没有startup的动画，所以最初绘制图表时将值设置为min值，
或动画应开始的值

然后使用一次 'ready'事件监听器来绘制包含真实数据的图表
这将导致图表动画

请参阅以下工作代码段...

＆＃13;

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']
});

＆＃13;

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

＆＃13;

如上所述，上面的图表将动画......

从默认值设置 - 到接收的实际数据

为了让图表动画显示......

从之前的实际数据 - 到收到的新数据

您需要保存对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']
});

Google Charts - Gauge Graph动画无效

1 个答案: