如何在柱状图中的图表区域中间显示“无数据”消息

Question

我使用ng-google-charts.js库来显示柱状图。

如果我们有数据，柱状图将呈现如下所示。Column Chart with data

​

如果我们没有任何数据可以显示，那么柱状图应该是这样呈现的。Columns Chart with out data

​

我花了很多时间来找出解决方案。但是没有解决方案。

有没有人可以帮我实现这一点？

Answer 1

您可以使用注释来显示No Data Copy

基本上，检查数据表是否为空

如果是，请为注解添加一行

使用空字符串，这样x轴上就不会出现标签

使用0作为值，所以有一些东西需要“注解”。

if (emptyData.getNumberOfRows() === 0) {
  emptyData.addRows([
    ['', 0, null, 'No Data Copy']
  ]);
}

然后将annotation.stem更改为'transparent'

并增加length，使其显示在图表的中间

annotations: {
  stem: {
    color: 'transparent',
    length: 120
  }
}

如果在数据存在时不需要注释，

将注释列值设置为null

请参见下面的工作片段，绘制两个图表以显示包含和不包含数据的图表

​

google.charts.load('current', {
  callback: function () {
    // create empty data table
    var emptyData = new google.visualization.DataTable({
      cols: [
        {label: 'Element', type: 'string'},
        {label: 'Density', type: 'number'},
        {role: 'style', type: 'string'},
        {role: 'annotation', type: 'string'}
      ]
    });
    var withData = emptyData.clone();

    var options = {
      // set annotation for -- No Data Copy
      annotations: {
        // remove annotation stem and push to middle of chart
        stem: {
          color: 'transparent',
          length: 120
        },
        textStyle: {
          color: '#9E9E9E',
          fontSize: 18
        }
      },
      bar: {groupWidth: '95%'},
      height: 400,
      legend: {position: 'none'},
      vAxis: {
        viewWindow: {
          min: 0,
          max: 30
        }
      },
      width: 600
    };

    // if no data add row for annotation -- No Data Copy
    if (emptyData.getNumberOfRows() === 0) {
      emptyData.addRows([
        ['', 0, null, 'No Data Copy']
      ]);
    }

    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div_0'));
    chart.draw(emptyData, options);

    withData.addRows([
      ['Copper', 8.94, '#b87333', null],
      ['Silver', 10.49, 'silver', null],
      ['Gold', 19.30, 'gold', null],
      ['Platinum', 21.45, 'color: #e5e4e2', null]
    ]);

    chart = new google.visualization.ColumnChart(document.getElementById('chart_div_1'));
    chart.draw(withData, options);
  },
  packages: ['corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div_0"></div>
<div id="chart_div_1"></div>

​