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

Question

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

如果我们有数据，则柱形图将呈现如下。带数据的柱状图

如果我们没有任何数据要显示，那么柱形图应该像这样呈现。 没有数据的柱状图

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

有人可以帮助我如何实现这一目标吗？

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

请参阅以下工作片段，绘制了两个图表以显示有数据和无数据的图表

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

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