Javascript 如何显示"；无数据“；柱状图中图表区域中间的消息

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

如果我们有数据，那么柱状图将呈现如下。

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

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

---

有人能帮我实现这一点吗？

您可以使用注释来显示无数据副本

基本上，检查数据表是否为空
如果是，请为注释添加一行
使用空字符串，使x轴上不显示标签
使用

0

作为值，因此有一些内容需要“注释”

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

然后将

注释.stem

更改为

“透明”

并增加<代码>长度<代码>，使其出现在图表

的中间。

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

如果数据存在时不需要注释，
将注释列值设置为

null

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

google.charts.load（'current'{
回调：函数（）{
//创建空数据表
var emptyData=new google.visualization.DataTable({
科尔斯：[
{label:'Element'，type:'string'}，
{label:'密度'，类型：'number}，
{角色：'style'，类型：'string'}，
{角色：'annotation'，类型：'string'}
]
});
var withData=emptyData.clone（）；
变量选项={
//设置注释--无数据复制
注释：{
//移除注释杆并推到图表中间
茎：{
颜色：'透明'，
长度：120
},
文本样式：{
颜色：“#9E9E9E”，
尺寸：18
}
},
条：{groupWidth:'95%}，
身高：400，
图例：{位置：'无'}，
言辞：{
视图窗口：{
分:0,，
最多：30
}
},
宽度：600
};
//如果没有数据，则为注释添加行--无数据复制
if（emptyData.getNumberOfRows（）==0）{
emptyData.addRows([
[''，0，null，'无数据副本']
]);
}
var chart=new google.visualization.ColumnChart（document.getElementById（'chart_div_0'））；
绘制图表（空数据、选项）；
withData.addRows([
[cuper'，8.94'，#b87333'，null]，
['Silver'，10.49'，Silver'，null]，
['Gold'，19.30，'Gold'，空]，
['Platinum'，21.45'，颜色：#e5e4e2'，空]
]);
chart=新的google.visualization.ColumnChart（document.getElementById（'chart_div_1'））；
图表绘制（带数据、选项）；
},
软件包：['corechart']
});

是否可以在图表中不添加任何数据消息。例如，如果上面没有银柱的数据，则显示一条消息，这样您仍然可以看到铜、金、铂的条形图。如何在散点图中仅显示注释？我让它工作，但它也显示了一个值为“0”的数据点。您必须有一个数据点才能让批注表示，但您可以使用样式列或颜色选项使该点透明。。。