Как отобразить сообщение «Нет данных» в середине области диаграммы в столбчатой ​​диаграмме

Я использую библиотеку ng-google-charts.js для отображения столбчатой ​​диаграммы.

Если у нас есть данные, то столбчатая диаграмма будет отображаться следующим образом.Столбчатая диаграмма с данными

Если у нас нет данных для отображения, то столбчатая диаграмма должна отображаться следующим образом.Диаграмма столбцов без данных

Я потратил много времени, чтобы найти решение. Но в конечном итоге без решения.

Может кто-нибудь, пожалуйста, помогите мне, как этого добиться?

Ответы на вопрос(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>

 Ros24 окт. 2018 г., 15:49
Можно ли добавить сообщение с данными в график. Так, например, выше, если нет данных для серебряной колонки, выведите сообщение, чтобы вы все равно видели гистограммы для меди, золота, платины

Ваш ответ на вопрос