гистограмма с накоплением Google не хотят отображать 0 бар - PullRequest
Новая
       4

гистограмма с накоплением Google не хотят отображать 0 бар

1 голос
/ 05 июля 2019

В гистограмме с накоплением Google есть ли способ, чтобы она не отображала столбец с нулевым значением?enter image description here

Я не хочу показывать тонкую красную линию на первом баре или при наведении курсора.

Вот мой код: 

var data = google.visualization.arrayToDataTable([
        ['Class', 'Cost', 'Savings', { role: 'annotation' } ],
        ['Current State Run', 140999460, 0, ''],
        ['Total Future State Run', 109351526, 31647934, '']
      ]);

var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
                { calc: "stringify",
                  sourceColumn: 1,
                  type: "string",
                  role: "annotation" },
                2, 
                { calc: formatter,
                  sourceColumn: 2,
                  type: "string",
                  role: "annotation" },
                3]);

function formatter(dataTable, row) {
    if (data.getValue(row, 2))
        return parseInt(data.getValue(row, 2)).toLocaleString()
    else
        return '';
}

1 Ответ

1 голос
/ 05 июля 2019

преобразовать нулевое значение в null,
это скроет строку и подсказку.

при необходимости вы можете использовать DataView и вычисленные столбцы,
динамически изменить нули на null

см. Следующий рабочий фрагмент ... 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Class', 'Cost', 'Savings'],
    ['Current State Run', 140999460, 0],
    ['Total Future State Run', 109351526, 31647934]
  ]);

  var view = new google.visualization.DataView(data);

  var viewCols = [0];
  for (var i = 1; i < data.getNumberOfColumns(); i++) {
    addCalcs(i);
  }

  view.setColumns(viewCols);

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  var options = {
    isStacked: true
  };

  chart.draw(view, options);

  function addCalcs(col) {
    viewCols.push({
      calc: function (dt, row) {
        return getNullValue(dt, row, col);
      },
      label: data.getColumnLabel(col),
      type: data.getColumnType(col)
    });

    viewCols.push({
      calc: function (dt, row) {
        return formatter(dt, row, col);
      },
      type: 'string',
      role: 'annotation'
    });
  }

  function formatter(dataTable, row, col) {
    if (data.getValue(row, col)) {
      return parseInt(data.getValue(row, col)).toLocaleString()
    } else {
      return '';
    }
  }

  function getNullValue(dataTable, row, col) {
    var value = dataTable.getValue(row, col);
    if (value === 0) {
      return null;
    }
    return value;
  }
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
...