Google Chart动画时柱状图数据标签消失问题求助

问题描述 #

用Google Chart开发的柱状图，执行动画展示新数据时，柱子上的annotation标注会消失且无法重新渲染。所有数据已正确导入并显示在柱子上，但标注仅在首次渲染时可见。成功回调函数返回的values数组（示例：[10, 8, 2]）工作正常。

原代码 #

HTML部分 #

<!DOCTYPE html>
<html>

<head>
  <base target="_top">
  <script src="https://www.gstatic.com/charts/loader.js"></script>
</head>

<body>
  <div id="genderChart" style="overflow: hidden"></div>

<script type="text/javascript">
    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(initChart);
    
    var chart;
    var options = {
      legend: {position: "none"},
      chartArea: {width:'100%'},
      animation: {duration: 1000, easing: 'out'}
    };

    function initChart() {
      chart = new google.visualization.ColumnChart(document.getElementById('genderChart'));
      drawGenderChart();
    }

    function drawGenderChart() {
      google.script.run.withSuccessHandler(function (values){
        genderData = values;
      }).getGenderData();

      label00 = JSON.stringify(genderData[0]);
      label01 = JSON.stringify(genderData[1]);
      label02 = JSON.stringify(genderData[2]);

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Gender');
      data.addColumn('number', 'Students');
      data.addColumn({role: 'style'});
      data.addColumn({role: 'annotation'});

      data.addRows([
        ['Male', genderData[0], '#9fc5e8', label00],
        ['Female', genderData[1], '#d5a6bd', label01],
        ['Non-binary', genderData[2], '#b7b7b7', label02]
      ]);

      chart.draw(data, options);
    }

    setInterval(drawGenderChart, 1000);

  </script>
</body>

</html>

Apps Script部分 #

function getGenderData() {
  var sheet = SpreadsheetApp.getActive().getSheetByName("Console");
  var range = sheet.getRange("A3:C4");
  var values = range.getValues();
  return values.flat();
}

问题原因 #

google.script.run是异步操作，原代码中调用getGenderData()后立刻执行创建DataTable和绘制图表的逻辑，此时genderData还没被回调函数更新。后续定时调用中，异步数据获取和图表绘制的顺序混乱，导致标注无法正确绑定新数据，加上Google Charts动画更新时对role列的渲染依赖数据同步更新，最终出现标注消失的情况。

解决方案 #

将所有图表绘制逻辑移到google.script.run的成功回调内部，确保数据获取完成后再处理并绘制图表，同时优化数据使用方式：

修改后的HTML代码 #

<!DOCTYPE html>
<html>

<head>
  <base target="_top">
  <script src="https://www.gstatic.com/charts/loader.js"></script>
</head>

<body>
  <div id="genderChart" style="overflow: hidden"></div>

<script type="text/javascript">
    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(initChart);
    
    var chart;
    var options = {
      legend: {position: "none"},
      chartArea: {width:'100%'},
      animation: {duration: 1000, easing: 'out'}
    };

    function initChart() {
      chart = new google.visualization.ColumnChart(document.getElementById('genderChart'));
      drawGenderChart();
    }

    function drawGenderChart() {
      google.script.run.withSuccessHandler(function (values){
        // 数据获取成功后再处理图表
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Gender');
        data.addColumn('number', 'Students');
        data.addColumn({role: 'style'});
        data.addColumn({role: 'annotation'});

        data.addRows([
          ['Male', values[0], '#9fc5e8', values[0].toString()],
          ['Female', values[1], '#d5a6bd', values[1].toString()],
          ['Non-binary', values[2], '#b7b7b7', values[2].toString()]
        ]);

        chart.draw(data, options);
      }).getGenderData();
    }

    setInterval(drawGenderChart, 1000);

  </script>
</body>

</html>

修改说明 #

1. 把创建DataTable、添加数据行和绘制图表的逻辑全部移到withSuccessHandler的回调函数内，确保只有在异步获取数据完成后才执行图表更新，避免数据未就绪就绘制。
2. 直接使用回调返回的values数组，去掉全局变量genderData，减少全局变量带来的意外数据不一致问题。
3. 标注直接用values[n].toString()转换为字符串，替代JSON.stringify，避免多余的引号，同时确保标注和柱子数据完全同步。

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