27

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

4

3 回答 3

17

我所做的是用 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);
}​
于 2012-06-07T18:32:32.370 回答
12

对于这个问题，一个更好的解决方案可能是使用注释列而不是数据列，如下所示。使用此解决方案，您无需使用任何 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>

于 2013-12-12T08:21:04.190 回答
0

我这样做的方法是禁用饼图，关闭工具提示，填充假值并将其设为灰色。我确信有更聪明的方法可以做到这一点，但这对我有用，而其他方法却没有。

唯一的缺点是它将图例中的两个项目也设置为灰色。我认为您也许可以只添加第三个项目，并使其仅在图例中不可见。不过我喜欢这种方式。

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 } );
}
于 2016-04-29T02:44:00.233 回答