如何在Google Chart上添加文本（顶部/居中）并实现动态更新？

一、添加顶部文本 #

直接在图表容器上方插入HTML元素即可，通过CSS控制样式与对齐，无需修改图表配置：

<div id="chart-top-title" style="text-align:center; font-size:18px; font-weight:700; margin-bottom:12px;">图表顶部标题</div>
<div id="chart-container" style="width: 800px; height: 400px;"></div>

二、中间动态文本实现 #

方法1：修正Annotations配置（解决你之前的显示问题） #

Annotations未显示通常是配置或数据列设置错误，以下是可直接运行的示例（以柱状图为例）：

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

let chartInstance;
let chartData;

function initChart() {
  // 构建带annotation列的数据表
  chartData = google.visualization.arrayToDataTable([
    ['分类', '数值', { role: 'annotation', type: 'string' }],
    ['项1', 120, ''],
    ['项2', 240, ''],
    ['项3', 180, '']
  ]);

  const chartOptions = {
    annotations: {
      textStyle: {
        fontSize: 22,
        bold: true,
        color: '#2c3e50'
      },
      alwaysOutside: false, // 允许标注显示在数据点内部
      stem: { length: 0 } // 移除标注连接线
    },
    height: 400,
    width: 800
  };

  chartInstance = new google.visualization.ColumnChart(document.getElementById('chart-container'));
  chartInstance.draw(chartData, chartOptions);

  // 模拟2秒后动态更新中间文本
  setTimeout(() => {
    updateAnnotationText('总数值：540');
  }, 2000);
}

function updateAnnotationText(newText) {
  // 更新第一个数据点的annotation内容，并重绘图表
  chartData.setValue(0, 2, newText);
  chartInstance.draw(chartData, chartOptions);
}

若要让文本居中于整个图表，可添加一个数值为0的隐藏数据行，将annotation绑定到该行，配合布局调整实现全局居中。

方法2：自定义叠加层（更灵活的方案） #

通过绝对定位的HTML层叠加在图表容器上，完全自定义文本位置与样式，动态更新无需重绘图表：

<div id="chart-container" style="width: 800px; height: 400px; position: relative;">
  <!-- 中间文本层，pointer-events:none避免遮挡图表交互 -->
  <div id="center-dynamic-text" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size:22px; font-weight:700; color:#34495e; pointer-events:none;">初始文本</div>
</div>

动态更新文本的函数：

function updateCenterText(newContent) {
  document.getElementById('center-dynamic-text').textContent = newContent;
}

// 示例：3秒后更新文本
setTimeout(() => {
  updateCenterText('已更新的中间文本');
}, 3000);

三、Annotations不显示的常见排查项 #

• 确认数据表格中正确声明了{ role: 'annotation', type: 'string' }的列
• 检查annotations.textStyle的颜色是否与图表背景色冲突
• 确保annotation列的初始值不为空字符串（如需隐藏初始状态，可后续赋值）
• 确认使用的图表类型支持Annotations（核心图表如柱状图、折线图均支持，部分特殊图表除外）

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