如何修改Google Charts堆叠柱形图中显示的数字格式？

要实现将图表中所有数值（堆叠分段数字、顶部总数）格式化为带千分分隔符的样式（如20,500），可通过Google Charts内置的NumberFormat格式化器完成，以下是具体修改方案和完整代码：

关键修改说明 #

1. 调整数据结构：为每个堆叠数值列添加对应的annotation角色列，用于显示分段的数值标签
2. 创建格式化规则：用NumberFormat定义千分分隔的数字格式，统一处理所有数值
3. 设置格式化标签：遍历数据行，将分段数值和总数都格式化为目标样式后，赋值到对应的注释列

修改后的完整代码 #

<script type="text/javascript">
  var dataE = [
    ['EMP', 'CONT', {role: 'annotation'}, 'CRE', {role: 'annotation'}, 'TOT', {role: 'annotation'}],
    [1, 20500, '', 12800, '', 21000, ''],
    [2, 36900, '', 25600, '', 38000, ''],
    [3, 73000, '', 75000, '', 80500, ''],
    [4, 70500, '', 37000, '', 73000, ''],
  ];
  var colorsE = [
    {color: '#229954'},
    {color: '#E74C3C'},
    {color: '#3498DB'} // 可按需调整TOT列颜色
  ];

  function drawChartE() {
    var optionsE = {
      chartArea: {
        left: '25',
        width: '80%',
        right: '25'
      },
      title: '',
      legend: {
        position: 'top',
        maxLines: 3
      },
      annotations: {
        alwaysOutside: true,
        textStyle: {
          fontSize: 13,
          color: '#000'
        }
      },
      isStacked: true,
      series: colorsE,
    };

    var chartDataE = google.visualization.arrayToDataTable(dataE);

    // 创建千分分隔格式的数字格式化器
    var numberFormatter = new google.visualization.NumberFormat({pattern: '#,###'});
    // 格式化所有数值列（对应索引1、3、5）
    numberFormatter.format(chartDataE, 1);
    numberFormatter.format(chartDataE, 3);
    numberFormatter.format(chartDataE, 5);

    for (var ii = 0; ii < chartDataE.getNumberOfRows(); ii++) {
      var totalE = 0;
      // 设置分段注释的格式化数值
      chartDataE.setValue(ii, 2, numberFormatter.formatValue(chartDataE.getValue(ii, 1)));
      chartDataE.setValue(ii, 4, numberFormatter.formatValue(chartDataE.getValue(ii, 3)));
      
      // 计算当前行的总数
      totalE += chartDataE.getValue(ii, 1);
      totalE += chartDataE.getValue(ii, 3);
      totalE += chartDataE.getValue(ii, 5);
      // 设置总注释的格式化数值
      chartDataE.setValue(ii, 6, numberFormatter.formatValue(totalE));
    }

    var chartE = new google.visualization.ColumnChart(document.getElementById('columnchart_materialE'));
    chartE.draw(chartDataE, optionsE);
  }

  google.charts.load('visualization', {packages: ['corechart']});
  google.charts.setOnLoadCallback(drawChartE);
</script>

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