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

问题描述

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

如果我们有数据，则柱形图将呈现如下.

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

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

解决方案

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

基本上，检查数据表是否为空
如果是这样，为注释添加一行
使用空字符串，因此 x 轴上不会出现标签
使用 0 作为值，所以有一些东西要注释"

if (emptyData.getNumberOfRows() === 0) {emptyData.addRows([['', 0, null, '无数据复制']]);}

然后将 annotation.stem 更改为 'transparent'
并增加 length 使其出现在图表中间

注解:{干: {颜色:'透明'，长度:120}}

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

见下面的工作片段，绘制了两个图表来显示有数据和没有数据的图表

google.charts.load('current', {回调:函数(){//创建空数据表var emptyData = new google.visualization.DataTable({列: [{标签:'元素'，类型:'字符串'}，{标签:'密度'，类型:'数字'}，{角色:'风格'，类型:'字符串'}，{角色:'注释'，类型:'字符串'}]});var withData = emptyData.clone();变量选项 = {//设置注解——无数据复制注释:{//移除注释词干并推到图表中间干: {颜色:'透明'，长度:120},文字样式:{颜色:'#9E9E9E'，字体大小:18}},栏:{groupWidth:'95％'}，高度:400，图例:{位置:'无'}，v轴:{视窗:{分钟:0，最大:30}},宽度:600};//如果没有数据添加注释行 -- 无数据复制if (emptyData.getNumberOfRows() === 0) {emptyData.addRows([['', 0, null, '无数据复制']]);}var chart = new google.visualization.ColumnChart(document.getElementById('chart_div_0'));图表绘制(空数据，选项)；withData.addRows([['铜'，8.94，'#b87333'，空]，['白银'，10.49，'白银'，空]，['黄金'，19.30，'黄金'，空]，['白金'，21.45，'颜色:#e5e4e2'，空]]);chart = new google.visualization.ColumnChart(document.getElementById('chart_div_1'));chart.draw(withData, options);},包:['corechart']});

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

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?

解决方案

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屋！