如何在没有数据时显示空Google图表？

Question

考虑绘制一个柱形图,我没有从数据源获取任何数据,我们如何绘制一个空图表,而不是显示一条红色的默认消息,说"表没有列"？

Answer 1

我所做的是用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);
}?

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

​