google-visualization - データがないときに空の Google チャートを表示する方法は?

Question

縦棒グラフの描画を検討していますが、データ ソースからデータを取得できません。「テーブルに列がありません」という赤いデフォルト メッセージを表示する代わりに、空のグラフを描画するにはどうすればよいですか?

Answer 1

私がしていることは、1つの列と1つのデータポイント（0に設定）でチャートを初期化することです。次に、データが追加されるたびに、列が1つだけで、それがダミー列であるかどうかを確認してから、それを削除します。また、凡例を非表示にして、ダミーの列が表示されないようにします。次に、新しい列が追加されたときに凡例を追加します。

これが、私が話していることを実行するGoogleVisualizationPlaygroundにプラグインできるサンプルコードです。空のグラフが2秒間表示されます。その後、データが追加され、列が表示されます。

var data, options, chart;

function drawVisualization() {

  data = google.visualization.arrayToDataTable([
    ['Time', 'dummy'],
    ['', 0],
   ]);

  options = {
    title:"My Chart",
    width:600, height:400,
    hAxis: {title: "Time"},
    legend : {position: 'none'}
  };

  // Create and draw the visualization.
  chart = new google.visualization.ColumnChart(document.getElementById('visualization'));
  chart.draw(data,options);
  setTimeout('addData("12:00",10)',2000);
  setTimeout('addData("12:10",20)',3000);
}

function addData(x,y) {
  if(data.getColumnLabel(1) == 'dummy') {
    data.addColumn('number', 'Your Values', 'col_id');
    data.removeColumn(1);
    options.legend = {position: 'right'};
  }

  data.addRow([x,y]);
  chart.draw(data,options);
}​

Answer 2

この問題のさらに優れた解決策は、以下に示すように、データ列の代わりに注釈列を使用することです。このソリューションでは、列を削除または非表示にするために setTimeout またはカスタム関数を使用する必要はありません。以下のコードをGoogle Code Playgroundに貼り付けて試してみてください。

function drawVisualization() {
  var data = google.visualization.arrayToDataTable([
      ['', { role: 'annotation' }],
      ['', '']
  ]);

  var ac = new google.visualization.ColumnChart(document.getElementById('visualization'));
  ac.draw(data, {
      title : 'Just a title...',
      width: 600,
      height: 400
  });
}

</p>