Question

我正在使用Google堆积条形图生成堆积图。但是，如果该值为0，那么它将隐藏该堆栈。我想显示堆栈的偶数等于零。怎么做.. ??

下面是我的代码

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

下面是jsfiddle链接

{{1}}

Answer 1

要显示该条，它将需要一个大于零的值...

但是，我们可以使用对象符号来提供值（v:）和格式化值（f:）。

这将允许我们提供一个大于零的值，
但将格式化后的值设置为零，因此当小节悬停时，
它将显示零值。

在这里，我们将使用值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>

谷歌图表隐藏堆栈，如果值为0

1 个答案: