web-dev-qa-db-ja.com

データがないときに空のGoogleチャートを表示するにはどうすればよいですか？

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

google-visualization
25
Vamshi Vangapally

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

ここに、私が話していることを行う Google Visualization Playground にプラグインできるサンプルコードがあります。空のチャートが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);
}​
15
Matt Dodge

この問題のさらに良い解決策は、以下に示すように、データ列ではなく注釈列を使用することです。このソリューションでは、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
  });
}

12
AntonSjoberg

これを行う方法は、パイのスライスを無効にし、ツールチップをオフにし、ふりをする値を詰め込んでグレーにすることでした。これを行うための賢い方法は他にもあると思いますが、他の方法がうまくいかなかったので、これはうまくいきました。

唯一の欠点は、凡例の両方の項目も灰色に設定されることです。おそらく、3つ目のアイテムを追加して、凡例でのみ非表示にすることができます。私はこの方法も好きでした。

function drawChart() {
// Define the chart to be drawn.
  data = new google.visualization.DataTable();
  data.addColumn({type: 'string', label: 'Result'});
  data.addColumn({type: 'number', label: 'Count'});
  data.addRows([
          ['Value A', 0],
          ['Value B', 0]
  ]);

  var opt_pieslicetext = null;
  var opt_tooltip_trigger = null;
  var opt_color = null;
  if (data.getValue(1,1) == 0 && data.getValue(0,1) == 0) {
     opt_pieslicetext='none';
     opt_tooltip_trigger='none'
     data.setCell(1,1,.1);
     opt_color= ['#D3D3D3'];
  } 
  chart = new google.visualization.PieChart(document.getElementById('mydiv'));
  chart.draw(data, {sliceVisibilityThreshold:0, pieSliceText: opt_pieslicetext, tooltip: { trigger: opt_tooltip_trigger }, colors: opt_color } );
}
0
woot