Google視覚化による円グラフのアニメーション

私はGoogleのグラフを試しています。私は円グラフを0％から75％にアニメーション化したい（下記の画像を参照）。私はGoogleの図を使ってこれを達成しようとしています。私は2つのデータセットを作成しています.1つは99％で開始し、もう1つは1％で開始します。私はこれらを反転してアニメーション化したいと思います。アニメーションで値を変更することはできましたが、アニメーション化する方法を理解することはできません。Google視覚化による円グラフのアニメーション

<html> 
    <head> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 

     google.load('visualization', '1.0', {'packages':['corechart']}); 

     google.setOnLoadCallback(drawChart); 

     function drawChart() { 

     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'text'); 
     data.addColumn('number', 'number'); 

     data.addRows(2); 
     data.setValue(0, 0, 'Work'); 
     data.setValue(0, 1, 1); 
     data.setValue(1, 0, 'Eat'); 
     data.setValue(1, 1, 99); 

     var options = { 
         width:500, 
         height:500, 
         animation: {duration: 1000, easing: 'out',} 
         }; 

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

     chart.draw(data, options); 

     function aniChart(d,o){ 
      for (var i=1; i<100; i++) { 
      data.setValue(0, 1, i); 
      } 

      for (var i=99; i>00; i--) { 
      data.setValue(1, 1, i); 
      } 
      setTimeout(function(){ 
      chart.draw(data, options); 
      }, 1000); 

     }; 

     aniChart(); 

     } 
    </script> 
    </head> 

    <body> 
    <div id="chart_div"></div> 
    </body> 
</html>

chart

出典

2013-06-21 TechyDude

あなたはそれが赤/青/赤/青行く...というように最初の反復ようにしたいですか？ – Fabi

理想的には最初は白であり、次に色は時計の針のように所望のパーセントにアニメーションされます。 – TechyDude

'aniChart'関数が間違っています。すべての値をループしていて、最後に1回の遅延描画呼び出しを行います。アニメーションループはありません。 – daVe

私はその機能は、GoogleのチャートAPIでサポートされていないと信じて - Supported Modifications

を参照してください、私はあなたがそのようなこのhttp://bl.ocks.org/mbostock/1346410

など、さまざまなチャートツールを使用している場合、それはより簡単かもしれないと思います

出典

2013-06-26 17:08:28 Fabi

グラフの例が優れています。それはまた優れているd3ライブラリに依存しています。 SVGをサポートするブラウザが必要です。モバイルアプリケーションに最適です。アニメーション化、タッチイベントの追加、一部のJSとのインタラクティブな編集を行うことができます。 – mbokil

<html> 
<head> 
    <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>   
</head> 
<body> 
    <div id="piechart" style="width: 900px; height: 500px;"></div> 

    <script> 
       google.setOnLoadCallback(drawChart); 
    function drawChart() { 

    var data = google.visualization.arrayToDataTable([ 
     ['Task', 'Hours per Day'], 
     ['Work',  11], 
     ['Eat',  2], 
     ['Commute', 2], 
     ['Watch TV', 2], 
     ['Sleep', 7] 
    ]); 

    var options = { 
     title: 'My Daily Activities',   
    }; 

    var chart = new google.visualization.PieChart(document.getElementById('piechart')); 
    chart.draw(data, options); 

    var counter = 0; 

    var handler = setInterval(function(){ 
     counter = counter + 0.1 
     options = { 
      title: 'My Daily Activities',   
      slices: { 1: {offset: counter},      
        3: {offset: counter},      
        5: {offset: counter}, 
      } 
     }; 
     chart.draw(data, options); 

     if (counter > 0.3) clearInterval(handler); 
    }, 200);   
    } 
    </script> 
</body>

出典

2015-10-06 07:13:06

bodyタグ

にこの要素を入れ、このコードでは、* how *および/または* why *の解決に関する追加のコンテキストを提供していますが、この問題は、回答の長期的な価値を向上させるでしょう。 – Keale

素朴な@Muhammadアニメーションループで元の問題を解決する。

初期値：

ワーク：
が食べる0％：100％

ループは値1単位を増加させ、パイごとに30ミリ秒を描きます。

Work = 75％に達するとループが停止します。

google.load('visualization', '1.0', {'packages':['corechart']}); 
 

 
google.setOnLoadCallback(drawChart); 
 

 
function drawChart() { 
 

 
var data = new google.visualization.DataTable(); 
 
data.addColumn('string', 'text'); 
 
data.addColumn('number', 'number'); 
 

 
data.addRows(2); 
 
data.setValue(0, 0, 'Work'); 
 
data.setValue(0, 1, 0.0); 
 
data.setValue(1, 0, 'Eat'); 
 
data.setValue(1, 1, 100.0); 
 

 
var options = { 
 
    width:500, 
 
    height:500 
 
}; 
 

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

 
chart.draw(data, options); 
 

 
// initial value 
 
var percent = 0; 
 
// start the animation loop 
 
var handler = setInterval(function(){ 
 
    // values increment 
 
    percent += 1; 
 
    // apply new values 
 
    data.setValue(0, 1, percent); 
 
    data.setValue(1, 1, 100 - percent); 
 
    // update the pie 
 
    chart.draw(data, options); 
 
    // check if we have reached the desired value 
 
    if (percent > 74) 
 
     // stop the loop 
 
     clearInterval(handler); 
 
}, 30); 
 

 
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
 
<div id="chart_div"></div>

出典

2016-11-03 15:30:53 daVe

Google視覚化による円グラフのアニメーション

答えて

関連する問題