Google Maps скрывает стек, если значение равно 0 - PullRequest
Новая
       12

Google Maps скрывает стек, если значение равно 0

0 голосов
/ 01 октября 2018

Я использую гистограмму с накоплением в Google, чтобы сгенерировать диаграмму с накоплением.Но если значение равно 0, то оно скрывает этот стек.Я хочу, чтобы в стеке было четное значение, равное нулю.Как это сделать .. ??

ниже мой код 

<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">

  var completed = [["blockwork",5],["lift",5],["cladding",5],["painting",5],["plumbing",2]];
  var completednow = [["blockwork",2],["lift",2],["cladding",4],["painting",1],["plumbing",0]];
  var balance = [["blockwork",3],["lift",3],["cladding",1],["painting",4],["plumbing",8]];

 function drawAxisTickColors() {
 var data = new google.visualization.DataTable(['completed','completednow','balance']);

 data.addColumn('string',"Activity");
 data.addColumn('number',"Completed");
 data.addColumn('number',"Completednow");
 data.addColumn('number',"Balance");

     for(var i=0;i<completed.length;i++)
     {
         data.addRows([
             [completed[i][0],completed[i][1],completednow[i][1],balance[i][1]]
         ]);
     }

 var options = {
  width: 1200,
  height: 800,
  legend: { position: 'right', maxLines: 1 },
  bar: { groupWidth: '20%' },
  theme: 'stroke-width',
  isStacked: true,
  is3D: true,
  vAxis: {
         minValue:0,
         viewWindow: {
             min: 0
         }
  }
};



 var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
 chart.draw(data, options);
 }

 google.charts.load('current', {packages: ['corechart', 'bar']});
 google.charts.setOnLoadCallback(drawAxisTickColors);

  </script>
</head>
<body>
<div id="chart_div"></div>
 </body>
 </html>

Ниже ссылка jsfiddle 

  https://jsfiddle.net/75uz2ycr/#&togetherjs=x84xA1ufTg

1 Ответ

0 голосов
/ 01 октября 2018

для того, чтобы бар был виден, ему потребуется значение больше нуля ...

однако мы можем использовать нотацию объекта для предоставления значения (v:) и отформатированного значения (* 1004)*).

это позволит нам предоставить значение больше нуля,
, но затем установить отформатированное значение на ноль, поэтому при наведении полосы на
будет отображаться значение ноль.

здесь мы будем использовать значение 0.1.

{v: 0.1, f: '0'}

см. Следующий рабочий фрагмент, DataView используется для создания вычисляемых столбцов для изменения значений и форматированных значений ... 

var completed = [["blockwork",5],["lift",5],["cladding",5],["painting",5],["plumbing",2]];
var completednow = [["blockwork",2],["lift",2],["cladding",4],["painting",1],["plumbing",0]];
var balance = [["blockwork",3],["lift",3],["cladding",1],["painting",4],["plumbing",8]];

function drawAxisTickColors() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Activity');
  data.addColumn('number', 'Completed');
  data.addColumn('number', 'Completednow');
  data.addColumn('number', 'Balance');

  var view = new google.visualization.DataView(data);
  var viewColumns = [0];
  for (var i = viewColumns.length; i < data.getNumberOfColumns(); i++) {
    addViewColumn(i);
  }
  view.setColumns(viewColumns);

  for(var i=0;i<completed.length;i++) {
    data.addRows([
      [completed[i][0],completed[i][1],completednow[i][1],balance[i][1]]
    ]);
  }

  var options = {
    width: 1200,
    height: 800,
    legend: {position: 'right', maxLines: 1},
    bar: {groupWidth: '20%'},
    isStacked: true,
    vAxis: {
      viewWindow: {
        min: 0,
        max: 10
      }
    }
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(view, options);

  function addViewColumn(index) {
    viewColumns.push({
      calc: function (dt, row) {
        var value = dt.getValue(row, index);
        if (value === 0) {
          value = {
            v: 0.1,
            f: '0'
          };
        }
        return value;
      },
      label: data.getColumnLabel(index),
      type: 'number'
    });
  }
}

google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawAxisTickColors);
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
...