3

Google チャートの drawChart 関数については、以下の JS を参照してください。これは期待どおりに機能します。var chart ...ただし、drawChart 関数内にある ため、アニメーションは機能しません。代わりに、Google は毎回新しいグラフを作成していると見なし、グラフを更新するだけです。

私の設定 (1000ms、デフォルトのイージング: 線形) に従ってデータが移動する例のようなことをしたいと思います。例はこちら: https://developers.google.com/chart/interactive/docs/animation

関数var chart ...からを引き出すと、「チャートが定義されていません」というエラーが表示されます。Google チャートで多くの作業をしたことがある人からの助けに感謝します。助けてくれてありがとう。drawChart

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

1 に答える 1

3

私は自分で 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 オブジェクトが存在する前に呼び出されました (そのスニペットだけではわかりにくいですが)。

于 2012-04-22T18:24:35.433 に答える