javascript - 谷歌 API : gauge animation

标签 javascript api gauge

我试图让 google gauge pointer 移动,但它没有移动,我已经设置了动画配置,因为它应该在 var options 中设置,例如 duration : 1000 和 easing: 'inAndOut' ,我是 n00b in Google API 所以为了我的无知尝试。

谁能帮帮我。 这是 tutorial link我正在使用它。代码正在工作,但部分工作,仪表指针应该缓慢移动到它的最大值,但是,在我的情况下它不会工作。 这是代码。

<html>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
  google.load('visualization', '1', {packages:['gauge']});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Label', 'Value'],
      ['Match',80],
    ]);

    var options = {
      width: 440, height: 140,
      greenFrom: 70, greenTo: 100,
      yellowFrom:50, yellowTo: 70,
      redFrom:0, redTo: 50,
      minorTicks: 5,
      animation:{
          duration: 1000,
          easing: 'inAndOut',
        },
      majorTicks : ['0','10','20','30','40','50','60','70','80','90','100']
    };

    var chart = new google.visualization.Gauge(document.getElementById('chart_div<%=id%>'));
    chart.draw(data, options);
    clearChart();
  }
</script>
</html>

最佳答案

原来是我自己想出来的,在谷歌论坛上有一个很好的答案here

诀窍是以 0(或任何最小值)开始测量,然后稍后更新该值(使用 setInterval() 或任何其他方法)

肯定有更好的方法来更新值,而不是仅仅编写一个新数组,但你明白了。

<html>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
  google.load('visualization', '1', {packages:['gauge']});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Label', 'Value'],
      ['Match',0],
    ]);

    var options = {
      width: 440, height: 140,
      greenFrom: 70, greenTo: 100,
      yellowFrom:50, yellowTo: 70,
      redFrom:0, redTo: 50,
      minorTicks: 5,
      animation:{
          duration: 1000,
          easing: 'inAndOut',
        },
      majorTicks : ['0','10','20','30','40','50','60','70','80','90','100']
    };

    var chart = new google.visualization.Gauge(document.getElementById('chart_div<%=id%>'));
    chart.draw(data, options);
    clearChart();

    // This is new.
    setTimeout(function(){
      var data = google.visualization.arrayToDataTable([
        ['Label', 'Value'],
        ['Match',80],
      ]);
      chart.draw(data, options);
    }, 200);
  }
</script>
</html>

关于javascript - 谷歌 API : gauge animation,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11349284/

相关文章:

javascript - Google Charts - 向彩色柱形图添加工具提示

javascript - Paypal JS SDK Smart Payment - 禁用无帐户信用卡支付的地址提示

javascript - 将数组重置回原始值

javascript - 需要向 google map 添加 45 个以上的点

javascript - 如果所有<li>都有属性显示: none;,如何隐藏()div与ul列表

django - 在 Django rest 框架中转换 `ManyToManyField`

javascript - 如何使用来自 import.io 的数据创建 Web 应用程序

javascript - 带有 php 变量的 Google 仪表未更新

javascript - 在 Angular Gauge Highchart 中显示类别并删除数字