在 google 个条形图中隐藏注释

Question

我正在显示一个基于 arrays.It 数组的 google 条形图，当前显示所有带有注释的值。我如何隐藏 0 值并在栏内显示注释并删除 stem.我正在使用的数据是动态的，所以最好是我可以创建函数来检查 0 并在数据视图中用 null 替换，但我仍然需要 stringify 来显示注释。

 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
res=[["Bob",80,0,0],["tom",0,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,
                       { calc: "stringify",
                         sourceColumn: 2,
                         type: "string",
                         role: "annotation" },
                        3,{ calc: "stringify",
                         sourceColumn: 3,
                         type: "string",
                         role: "annotation" },
                       ]);

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

Answer 1

我们可以提供自己的函数，而不是使用 stringify 函数。
如果值为零，则 return 为空。如果 non-zero，return 格式化值...

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

对于系列列，相同，只是 return 实际值。
所以我们不包括列索引，而是使用相同的计算函数。

  calc: function (dt, row) {
    var val = dt.getValue(row, 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, row) {
    var val = dt.getValue(row, 1);
    if (val !== 0) {
      return val;
    } else {
      return null;
    }
  },
  type: data.getColumnType(1),
  label: data.getColumnLabel(1)
}, {
  calc: function (dt, row) {
    var val = dt.getValue(row, 1);
    if (val !== 0) {
      return dt.getFormattedValue(row, 1);
    } else {
      return null;
    }
  },
  type: "string",
  role: "annotation"
}, {
  calc: function (dt, row) {
    var val = dt.getValue(row, 2);
    if (val !== 0) {
      return val;
    } else {
      return null;
    }
  },
  type: data.getColumnType(2),
  label: data.getColumnLabel(2)
}, {
  calc: function (dt, row) {
    var val = dt.getValue(row, 2);
    if (val !== 0) {
      return dt.getFormattedValue(row, 2);
    } else {
      return null;
    }
  },
  type: "string",
  role: "annotation"
}, {
  calc: function (dt, row) {
    var val = dt.getValue(row, 3);
    if (val !== 0) {
      return val;
    } else {
      return null;
    }
  },
  type: data.getColumnType(3),
  label: data.getColumnLabel(3)
}, {
  calc: function (dt, row) {
    var val = dt.getValue(row, 3);
    if (val !== 0) {
      return dt.getFormattedValue(row, 3);
    } else {
      return null;
    }
  },
  type: "string",
  role: "annotation"
}]);

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

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, row) {
      var val = dt.getValue(row, index);
      if (val !== 0) {
        return dt.getFormattedValue(row, index);
      } else {
        return null;
      }
    },
    type: "string",
    role: "annotation"
  });
}

在 google 个条形图中隐藏注释

Hide annotations in google bar chart

javascript

charts

google-visualization