如何在Google Charts时间线中动态添加不同数据类型的行

看起来你正在搭建一个整合多数据源的时间线可视化项目，我来帮你完善这个Google Charts时间线的动态数据追加方案，结合你的现有代码给出完整的实现思路：

1. 先搞定Google Charts的正确加载逻辑 #

Google Charts的加载必须确保库完全就绪后再初始化图表，你的现有代码里的函数需要放在加载回调里，避免出现初始化失败的情况：

// 正确的加载方式，指定回调函数确保库就绪
google.charts.load("current", {
  packages: ["timeline"],
  callback: drawTimeline // 加载完成后自动执行绘制函数
});

2. 封装数据处理逻辑，统一管理时间线条目 #

你已经用数组存储数据，我建议把数据处理封装成通用函数，方便后续从不同API拉取数据时统一调用，同时要注意JavaScript Date的月份是0索引（1月对应0，12月对应11），这是很多人踩坑的点：

// 全局数组存储所有时间线条目
const timelineEntries = [];

// 通用函数：添加单条时间线数据
function addTimelineEntry(itemId, itemName, startDateParts, dueDateParts) {
  // 假设startDateParts是[月, 日, 年]格式，转换为Google Charts需要的Date对象
  const startDate = new Date(startDateParts[2], startDateParts[0] - 1, startDateParts[1]);
  const dueDate = new Date(dueDateParts[2], dueDateParts[0] - 1, dueDateParts[1]);
  timelineEntries.push([itemId, itemName, startDate, dueDate]);
}

3. 从Trello API拉取数据并追加 #

假设你已经拿到Trello的API权限，这里用async/await处理异步请求，确保数据返回后再更新时间线：

// 从Trello API获取卡片数据并添加到时间线
async function fetchTrelloData() {
  try {
    const response = await fetch("你的Trello卡片API地址", {
      headers: {
        "Authorization": "Bearer 你的Trello令牌",
        "Accept": "application/json"
      }
    });
    const cards = await response.json();

    // 遍历卡片，转换格式后添加到时间线
    cards.forEach(card => {
      // 假设Trello返回的日期是"MM/DD/YYYY"格式，拆分成数组
      const startParts = card.start.split("/");
      const dueParts = card.due.split("/");
      addTimelineEntry(card.id, card.name, startParts, dueParts);
    });
  } catch (error) {
    console.error("拉取Trello数据失败：", error);
  }
}

4. 从Firebase拉取数据并追加 #

如果用的是Firebase Firestore，示例代码如下，同样用异步处理确保数据加载完成：

// 从Firebase Firestore获取项目数据并添加到时间线
async function fetchFirebaseData() {
  try {
    const db = firebase.firestore();
    const snapshot = await db.collection("你的集合名称").get();

    snapshot.forEach(doc => {
      const project = doc.data();
      // 假设Firebase存储的日期是"MM/DD/YYYY"字符串
      const startParts = project.startDate.split("/");
      const dueParts = project.dueDate.split("/");
      addTimelineEntry(doc.id, project.projectName, startParts, dueParts);
    });
  } catch (error) {
    console.error("拉取Firebase数据失败：", error);
  }
}

5. 绘制与动态更新时间线 #

编写drawTimeline函数，每次数据变化时重新绘制图表，实现动态更新：

function drawTimeline() {
  // 创建DataTable并定义列
  const dataTable = new google.visualization.DataTable();
  dataTable.addColumn("string", "条目ID");
  dataTable.addColumn("string", "名称");
  dataTable.addColumn("date", "开始日期");
  dataTable.addColumn("date", "截止日期");

  // 添加所有时间线条目
  dataTable.addRows(timelineEntries);

  // 设置图表配置选项
  const chartOptions = {
    timeline: {
      groupByRowLabel: true, // 按名称分组显示，可选
      showRowLabels: true
    },
    height: 500,
    width: "100%"
  };

  // 获取页面容器并绘制图表
  const timelineChart = new google.visualization.Timeline(document.getElementById("timeline-container"));
  timelineChart.draw(dataTable, chartOptions);
}

6. 初始化流程：拉取所有数据再绘制 #

页面加载完成后，先拉取两个数据源的数据，再绘制初始时间线：

// 页面加载完成后执行初始化
document.addEventListener("DOMContentLoaded", async () => {
  // 等待Google Charts加载完成
  await new Promise(resolve => {
    google.charts.load("current", {
      packages: ["timeline"],
      callback: resolve
    });
  });

  // 同时拉取Trello和Firebase数据
  await Promise.all([fetchTrelloData(), fetchFirebaseData()]);

  // 绘制初始时间线
  drawTimeline();
});

重要提示 #

• 如果需要实时更新（比如Firebase数据变化时自动更新时间线），可以给Firebase添加实时监听，数据变化时调用addTimelineEntry然后重新执行drawTimeline。
• 一定要注意日期格式的转换，确保传入Date构造函数的参数顺序是年、月（0索引）、日。
• 如果API返回的日期是ISO格式（如"2024-10-05"），可以直接用new Date(isoString)转换，不需要拆分。

内容的提问来源于stack exchange，提问作者M.A.Williams