Google Charts - アニメーションの遷移の例

Question

google chartのdrawChart関数については、以下のJSをご覧ください。これは私の期待通りに機能します。ただし、var chart ...はdrawChart関数の中にあるため、アニメーションは機能しません。代わりにgoogleは毎回新しいチャートを作成し、チャートを更新すると考えています。

のデータは、自分の設定（1000ms、デフォルトのイージング：直線）に従って移動しています。例はここにある：https://developers.google.com/chart/interactive/docs/animation

私はdrawChart関数からvar chart ...を引き出した場合、私は「チャート定義されていません」エラーが発生します。 Googleのグラフをたくさん使ってくれた人の助けを感謝します。助けてくれてありがとう。

var chart = "notSet"; 
google.load('visualization', '1.0', {'packages':['corechart']}); 
google.setOnLoadCallback(setGoogleData); 
google.setOnLoadCallback(drawChart); 
newValue = 0; 
var data = []; 
function setGoogleData(){ 
    data[0] = new google.visualization.DataTable(JSON_DATA_LOCATED_HERE); 
    data[1] = new google.visualization.DataTable(JSON_DATA_LOCATED_HERE); 
    var chart = new google.visualization.LineChart(document.getElementById('stopByTripChart')); 
} 
function drawChart() { 
    if(chart == "notSet"){ 
    var chart = new google.visualization.LineChart(document.getElementById('stopByTripChart')); 
    } 
    var options = {"title":"Average Load Summary","titlePosition":"in","width":1100,"height":700,"hAxis.slantedTextAngle":90,"hAxis.position":"out","pointSize":5,"animation.duration":1000,"animation.easing":"linear","hAxis.showTextEvery":1,"hAxis.title":"Stops"}; 
    chart.draw(data[newValue], options); 
} 
function changeChart(){ 
    newValue = document.getElementById("chartNumber").value; 
    drawChart(); 
} 

Answer 1

私はGoogleのチャートを自分で試したことがありませんが、私はそのようなコードが働くだろうと思う：

var chart = null; 
function drawChart() { 
    if(chart === null){ 
    chart = new google.visualization.LineChart(document.getElementById('stopByTripChart')); 
    } 
    var options = {"title":"Average Load Summary", 
       "titlePosition":"in", 
       "width":1100, 
       "height":700, 
       "hAxis" :{"slantedTextAngle":90, 
          "position":"out", 
          "showTextEvery":1, 
          "title":"Stops"}, 
       "pointSize":5, 
       "animation":{"duration":1000, 
           "easing": 'out'}; 
    chart.draw(data[newValue], options); 
} 
function changeChart(){ 
    newValue = document.getElementById("chartNumber").value; 
    drawChart(); 
} 

そうでない場合は、チャートについてのエラー定義されていないが、あなたが持っているかもしれないという事実から来るかもしれませんあなたのコードをgoogleライブラリの負荷の前に置きました。したがって、Googleオブジェクトが存在する前にチャートが呼び出されました（そのスニペットでは伝えにくい）。