Google Charts - 动画过渡示例

Question

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

我想在他们的示例中执行类似操作，其中数据根据我的设置移动（1000 毫秒，默认缓动：线性）。示例在这里：https://developers.google.com/chart/interactive/docs/animation

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

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 库之前放置了代码。因此，chart 在 google 对象存在之前就被调用了（但很难用 sn-p 来判断）。