如何显示“无数据”消息在列图中的图表区域中间 [英] How to display "No Data" message in the middle of chart area in column chart

问题描述

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

如果我们有数据，那么柱状图就会像这样呈现。 href =http://i.stack.imgur.com/Rf6kM.jpg =nofollow>包含数据的柱状图

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

没有数据的列图表

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

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

感谢您的帮助。

感谢您可以使用注释来显示

解决方案

em> No Data Copy

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

如果是这样，请为注释添加一行<
使用空字符串，因此x轴没有标签 -
使用 0 作为值，所以有些东西'annotate'

  if（emptyData.getNumberOfRows（）=== 0）{
 emptyData.addRows（[
 [''，0，null，'No Data Copy'] 
]）; 
} 
  

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

并增加长度，以便它出现在图表中间

 注释：{
 stem：{
 color：'transparent'，
长度：120 
} 
} 
  

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

将注释列值设置为 null

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

  google.charts.load（'current'，{callback：function（）{//创建空数据表var emptyData = new google.visualization.DataTable（{cols：[{label：元素'，输入：'string'}，{label：'Density'，type：'number'}，{role：'style'，type：'string'}，{role：'annotation'，type：'string' }]}）; var withData = emptyData.clone（）; var options = {//为以下内容设置注释 - 没有数据复制注释：{//移除注释干和推到图表干的中间：{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（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']}）;   
 

I am using ng-google-charts.js library to display a column chart.

If we have data then the column chart will render like this.Column Chart with data

If we don't have any data to display then the column chart should be rendered like this.

Columns Chart with out data

I spent lot of time to find out the solution. But endup with no solution.

Can someone please help me on how to achieve this?

Appreciate your help.

Thanks

解决方案

you could use an annotation to display No Data Copy

basically, check if the data table is empty
if so, add a row for the annotation
use an empty string so no label appears on the x-axis
use 0 as the value, so there is something to 'annotate'

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

then change the annotation.stem to be 'transparent'
and increase the length so that it appears in the middle of the chart

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

if you don't want annotations when data is present,
set the annotation column value to null

see following working snippet, two charts are drawn to show the chart both with and without data

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>

这篇关于如何显示“无数据”消息在列图中的图表区域中间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！