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

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

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

3 个答案: