5

Google ゲージ ポインターを動かそうとしていますが、動いていません。duration : 1000 や easing: 'inAndOut' などの var options で設定されていると思われるアニメーション構成を設定しました。Google API では n00b なので、私の無知な試みを与えてください。

誰でも私を助けることができます。ここに私が使用しているチュートリアルリンクがあります。コードは機能していますが、部分的には、ゲージ ポインターが最大までゆっくりと移動する必要がありますが、私の場合は機能しません。これがコードです。

<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>
4

2 に答える 2

9

私はこれを自分で理解したことがわかりました、ここのグーグルフォーラムにいい答えがあります

秘訣は、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>
于 2013-01-19T05:16:20.867 に答える