如何在Google Visualization柱状图的每个柱子顶部显示数值（附代码）

嘿，我来帮你搞定这个需求！要在每个柱子顶部显示数值，咱们可以利用Google Visualization的annotation角色来实现，这是官方推荐的标注文本的方式。下面是具体的修改步骤和完整代码：

核心思路 #

给每个数据系列（Deposit、Withdraw、Bonus）添加对应的annotation列，用来存储要显示的数值文本，然后在图表配置里开启注释显示即可。

修改后的完整代码 #

var arr1 = []; 
var arr2 = []; 
// 1. 调整表头，为每个数值系列添加annotation角色
var arrHead = [
  'Date', 
  'Deposit', {role: 'annotation'}, 
  'Withdraw', {role: 'annotation'}, 
  'Bonus', {role: 'annotation'}
]; 
var obj = JSON.parse(data); 
arr1.push(arrHead); 

for(var i = 0; i < obj.length; i++) { 
  var objData = obj[i]; 
  // 处理日期
  arr2.push(objData.CreateDate == null ? "Empty" : objData.CreateDate); 
  
  // 处理Deposit及对应的注释
  var dpValue = objData.DP == null ? 0 : parseInt(objData.DP, 10);
  arr2.push(dpValue);
  arr2.push(dpValue.toString()); // 将数值转为文本作为注释
  
  // 处理Withdraw及对应的注释
  var wdValue = objData.WD == null ? 0 : parseInt(objData.WD, 10);
  arr2.push(wdValue);
  arr2.push(wdValue.toString());
  
  // 处理Bonus及对应的注释（保持你原代码的WD2逻辑）
  var bonusValue = objData.WD2 == null ? 0 : parseInt(objData.WD2, 10);
  arr2.push(bonusValue);
  arr2.push(bonusValue.toString());
  
  arr1.push(arr2); 
  arr2 = []; 
} 

var data = google.visualization.arrayToDataTable(arr1); 
var options = { 
  // title: "Transaction Graph", 
  hAxis: {title: 'Transaction Date', titleTextStyle: {color: 'red'}}, 
  vAxis: {title: 'Amount', titleTextStyle: {color: 'blue'} }, 
  width: 500, 
  height: 500, 
  bar: {groupWidth: 100}, 
  legend: { position: 'right', maxLines: 3 }, 
  tooltip: { trigger: 'select' },
  // 2. 配置注释的样式，确保显示在柱子顶部
  annotations: {
    textStyle: {
      fontSize: 12,
      color: '#333',
      bold: true
    },
    alwaysOutside: true // 强制注释显示在柱子外部（顶部）
  }
}; 

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

关键修改点说明 #

• 表头调整：在每个数值列后面新增一个{role: 'annotation'}的列，告诉Google图表这列是用来做文本标注的。
• 循环内添加注释文本：每个数值计算完成后，把它转成字符串push到arr2里，作为对应柱子的顶部标注内容。
• 注释样式配置：在options里添加annotations配置，调整字体、颜色，并且设置alwaysOutside: true确保注释显示在柱子顶部，不会被柱子遮挡。

这样修改后，你的柱状图每个柱子顶部就会清晰显示对应的数值啦！

内容的提问来源于stack exchange，提问作者KRS