javascript - Google Charts - 动画过渡示例

Question

看看下面我的 JS，我的 google 图表的 drawChart 函数。这按我的预期工作。但是，因为 var chart ... 在 drawChart 函数中，所以动画不起作用 - 相反，谷歌认为它每次都在创建一个全新的图表，并且只是刷新图表。

我想做一些类似于他们示例中的事情，其中​​数据根据我的设置移动(1000 毫秒，默认缓动:线性)。例子在这里:https://developers.google.com/chart/interactive/docs/animation

如果我从 drawChart 函数中取出 var chart ...，我会收到“Chart not defined”错误。感谢任何经常使用谷歌图表的人的帮助。感谢您的帮助。

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();
}

否则，关于图表未定义的错误可能来自于您可能将代码放在加载谷歌库之前。因此，chart 在 google 对象存在之前就被调用了(尽管仅通过该片段很难判断)。