具有多个列角色的Google Timeline Chart

基础概念

Google Timeline Chart 是一种用于展示时间序列数据的可视化工具。它允许你在时间轴上展示多个事件或数据点，并且可以自定义每个事件的颜色、大小和形状。这种图表特别适用于展示项目进度、任务安排、资源分配等需要时间维度的数据。

类型

Google Timeline Chart 主要有以下几种类型：

基本时间线：展示单一数据系列的时间线。
分组时间线：将多个数据系列分组展示在同一时间线上。
堆叠时间线：将多个数据系列堆叠展示在同一时间线上，便于比较总量和各部分的占比。

应用场景

项目管理：展示项目的各个阶段和任务完成情况。
资源分配：展示不同时间段内资源的分配和使用情况。
销售分析：展示销售额随时间的变化趋势。
事件跟踪：展示一系列事件的发生时间和顺序。

遇到的问题及解决方法

问题：为什么我的时间线图表没有显示数据？

原因：

数据格式不正确。
时间轴范围设置不正确。
数据源为空或未正确加载。

解决方法：

确保数据格式符合 Google Timeline Chart 的要求，通常是 JSON 格式。
检查时间轴的范围设置，确保它覆盖了数据的时间范围。
确保数据源已正确加载，并且数据不为空。

问题：如何自定义事件的颜色和形状？

解决方法：在数据中为每个事件指定颜色和形状属性。例如：

{
  "start": "2023-01-01",
  "end": "2023-01-05",
  "label": "Task 1",
  "color": "#FF0000",
  "shape": "triangle"
}

然后在图表配置中启用这些自定义属性。

示例代码

以下是一个简单的示例代码，展示如何使用 Google Timeline Chart：

<!DOCTYPE html>
<html>
<head>
  <title>Google Timeline Chart Example</title>
  <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('chart_div');
      var chart = new google.visualization.Timeline(container);
      var dataTable = new google.visualization.DataTable();

      dataTable.addColumn({ type: 'string', id: 'Task' });
      dataTable.addColumn({ type: 'date', id: 'Start' });
      dataTable.addColumn({ type: 'date', id: 'End' });
      dataTable.addRows([
        [ 'Task 1', new Date(2023, 0, 1), new Date(2023, 0, 5) ],
        [ 'Task 2', new Date(2023, 0, 6), new Date(2023, 0, 10) ]
      ]);

      var options = {
        timeline: { colorByRowLabel: true }
      };

      chart.draw(dataTable, options);
    }
  </script>
</head>
<body>
  <div id="chart_div" style="height: 300px;"></div>
</body>
</html>