如何在Google Chart（含蜡烛图）中用短格式显示数值及总计？

阿华AIGC实验室

2026-5-12

解决方案：Google Charts 短格式数值展示

没问题！要把Google Charts柱状图里的数值改成短格式（比如将1,300,000显示为"1.3M"），咱们可以利用Google Charts内置的NumberFormat工具，同时调整坐标轴格式和柱子注释的生成逻辑。以下是修改后的完整代码：

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

function unCoveredProducts() {
  // 创建短格式数值格式化器
  const shortFormatter = new google.visualization.NumberFormat({
    pattern: 'short'
  });

  var data = google.visualization.arrayToDataTable([
    ['Element', '', { role: 'style' }],
    ['&gt; 60 Days', 1300000, '#005073'],
    ['45 - 60 Days', 850000, '#006b96'],
    ['30 - 45 Days', 500000, '#017CAD'],
    ['15 - 30 Days', 300000, 'color: #00b1dd'],
    ['&lt; 15 Days', 100000, 'color: #00bceb'],
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([
    0,
    1,
    // 自定义注释列，用短格式格式化数值
    { 
      calc: function(dataTable, rowIndex) {
        return shortFormatter.formatValue(dataTable.getValue(rowIndex, 1));
      },
      type: 'string',
      role: 'annotation' 
    },
    2
  ]);

  var options = {
    width: 345,
    height: 280,
    'chartArea': { 'width': '70%', 'height': '100%' },
    bar: { groupWidth: '80%' },
    legend: { position: 'none' },
    hAxis: { textPosition: 'none' },
    // 将Y轴刻度设置为短格式
    vAxis: { format: 'short' }
  };

  var chart = new google.visualization.BarChart(
    document.getElementById('unCoveredProducts'));
  chart.draw(view, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="unCoveredProducts"></div>

关键修改说明：

添加短格式格式化器：创建NumberFormat实例并指定pattern: 'short'，这个模式会自动把大数值转换成K（千）、M（百万）、B（十亿）这种简洁格式；
调整Y轴格式：把vAxis.format从原来的'sort'改成'short'，让坐标轴上的刻度也显示短格式数值；
自定义注释文本：替换了原来的stringify计算逻辑，用格式化器处理每个柱子的数值，确保柱子上方的注释也展示短格式；
保持原有样式：保留了你原来设置的所有颜色、尺寸和布局配置，只修改了数值展示逻辑。

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