Question

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

如果我们有数据，那么柱形图将会像这样呈现。Column Chart with data

如果我们没有要显示的数据，那么柱形图应该像这样呈现。 Columns Chart with out data

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

有人可以帮我解决一下这个问题吗？

Answer 1

您可以使用注释来显示无数据复制

基本上，检查数据表是否为空如果是，请为注释添加一行
使用空字符串，因此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>

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

1 个答案: