将Google Charts的DataTable数据源替换为Google Spreadsheet

一、Google 表格数据格式要求 #

你的现有 DataTable 包含4列数据，Google 表格需完全匹配该结构：

示例数据： #

• 第一行（表头）：Position, Name, Start, End
• 后续数据行：
  • Project #1, F2, 2022-10-30, 2022-11-30
  • Project #1, F3, 2022-11-30, 2023-05-17
  • Project #1, F3.1, 2023-05-17, 2023-09-29

关键注意事项： #

• 日期列必须设置为日期格式（选中列 → 格式 → 数字 → 日期），禁止用文本格式存储日期。
• 表头需与 DataTable 的列ID完全一致（大小写敏感）。
• 若要保留「Now」行，可在表格中新增一行：当前时间, Now, =TODAY(), =TODAY()，或在代码中动态添加。

二、发布表格供 Google Charts 访问 #

1. 打开目标 Google 表格，点击右上角「共享」按钮。
2. 设置权限为「任何人有链接都可查看」，确保图表能读取数据。
3. 点击「文件」→「发布到网页」。
4. 在弹出窗口中，选择要发布的工作表，格式选「逗号分隔值 (.csv)」，点击「发布」。
5. 复制发布后的链接（格式类似 https://docs.google.com/spreadsheets/d/e/.../pub?output=csv）。

三、修改代码替换数据源 #

移除原有手动创建 DataTable 的代码，改用 Google 表格数据：

完整修改后的代码： #

<head>
  <h1>Vehicle Plan Time Table</h1>
  <style>
h1 {
  color: #3e74ab;
  text-shadow: 1px 1px;
  font-family: "Times New Roman", Times, serif;
  text-align: center;
}
  </style>
  <!-- 请确保页面已引入jQuery库，nowLine函数依赖其语法 -->
</head>
<body>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var container = document.getElementById('timechart');
  var chart = new google.visualization.Timeline(container);

  var options = {
    colors: ['#113477', '#C0C0C0','#adc6e5', '#72aae4','#518cc2','#4A7FB0'],
    timeline: { rowLabelStyle: {fontName: 'Arial', fontSize: 20, color: '#0000' },
                   barLabelStyle: { fontName: 'Times New Roman', fontSize: 25 } },
            'width':2650,
                   'height':1200,
      avoidOverlappingGridLines: false
  };

  // 替换为你的Google表格发布链接
  var query = new google.visualization.Query('你的表格发布链接');
  
  query.send(function(response) {
    if (response.isError()) {
      alert('查询错误: ' + response.getMessage() + ' ' + response.getDetailedMessage());
      return;
    }

    var dataTable = response.getDataTable();
    
    // 可选：动态添加「Now」行（若表格中未维护该行）
    dataTable.addRow([new Date().toString(), 'Now', new Date(), new Date()]);

    chart.draw(dataTable, options);
    nowLine('timechart');

    google.visualization.events.addListener(chart, 'onmouseover', function(obj){
      // 若动态添加Now行，它是最后一行，用行数-1判断
      if(obj.row == dataTable.getNumberOfRows()-1){
        $('.google-visualization-tooltip').css('display', 'none');
      }
      nowLine('timechart');
    })

    google.visualization.events.addListener(chart, 'onmouseout', function(obj){
      nowLine('timechart');
    });
  });
}

function nowLine(div){
  var height;
  $('#' + div + ' rect').each(function(index){
    var x = parseFloat($(this).attr('x'));
    var y = parseFloat($(this).attr('y'));

    if(x == 0 && y == 0) {height = parseFloat($(this).attr('height'))}
  })

  var nowWord = $('#' + div + ' text:contains("Now")');
  nowWord.prev().first().attr('height', height + 'px').attr('width', '1px').attr('y', '0');
}
</script>
<div id="timechart" style="height: 400px;"></div>
</body>

代码修改说明： #

1. 移除手动创建 DataTable 的逻辑，改用 google.visualization.Query 从表格拉取数据。
2. 添加错误处理逻辑，方便调试数据加载问题。
3. 调整「Now」行的判断逻辑（若动态添加，它为表格最后一行）。

四、常见问题排查 #

• 图表加载失败：检查表格发布链接是否正确、权限是否设为「任何人可查看」、日期格式是否为标准日期类型。
• 日期显示异常：确认表格中日期未以文本格式存储，Google Charts 会自动解析有效日期格式。
• 「Now」行不生效：若动态添加该行，需确保 addRow 语句在 chart.draw 之前执行。

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