在Google条形图中隐藏注释

问题描述

@H_502_0@我正在显示基于数组数组的google条形图。它当前显示所有带有外部注释的值。如何隐藏0值并在栏中显示注释并删除词干。我正在使用的数据是动态的，因此最好是让函数检查数据并在数据视图中将其替换为null，但这还是最好的，以显示注释。

 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
res=[["Bob",80,0],["tom",60,0]]
google.charts.load("current",{packages:["corechart"]});
google.charts.setonLoadCallback(drawChart);
function drawChart() {
tmp=[['Name','percent1','percent2','percent3']].concat(res)
console.log(tmp)
var data = google.visualization.arrayToDataTable(tmp);
var view = new google.visualization.DataView(data);
view.setColumns([0,1,{ calc: "stringify",sourceColumn: 1,type: "string",role: "annotation" },2,sourceColumn: 2,3,sourceColumn: 3,]);

var options = {
          chart: {
            title: chartTitle,},bars: 'horizontal',bar: {groupWidth: "95%"},};
var chart = new google.visualization.BarChart(document.getElementById(chartName));
chart.draw(view,options);

解决方法

我们可以使用自己的函数来代替stringify函数。
如果值为零，则返回null。如果不为零，则返回格式化值...

  calc: function (dt,row) {
    var val = dt.getValue(row,1);
    if (val !== 0) {
      return dt.getFormattedValue(row,1);
    } else {
      return null;
    }
  },

，对于系列列，相同，只是返回实际值。
因此，我们不使用列索引，而是使用相同的calc函数。

  calc: function (dt,1);
    if (val !== 0) {
      return val;
    } else {
      return null;
    }
  },type: data.getColumnType(1),label: data.getColumnLabel(1)

例如

var view = new google.visualization.DataView(data);
view.setColumns([0,{
  calc: function (dt,label: data.getColumnLabel(1)
},type: "string",role: "annotation"
},2);
    if (val !== 0) {
      return val;
    } else {
      return null;
    }
  },type: data.getColumnType(2),label: data.getColumnLabel(2)
},2);
    if (val !== 0) {
      return dt.getFormattedValue(row,2);
    } else {
      return null;
    }
  },3);
    if (val !== 0) {
      return val;
    } else {
      return null;
    }
  },type: data.getColumnType(3),label: data.getColumnLabel(3)
},3);
    if (val !== 0) {
      return dt.getFormattedValue(row,3);
    } else {
      return null;
    }
  },role: "annotation"
}]);

，如果您不想重复所有的列定义，
您可以根据数据表中的列动态构建...

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

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

function addColumn(index) {
  columns.push({
    calc: function (dt,row) {
      var val = dt.getValue(row,index);
      if (val !== 0) {
        return val;
      } else {
        return null;
      }
    },type: data.getColumnType(index),label: data.getColumnLabel(index)
  });
  columns.push({
    calc: function (dt,index);
      if (val !== 0) {
        return dt.getFormattedValue(row,index);
      } else {
        return null;
      }
    },role: "annotation"
  });
}

charts google-visualization javascript