如何让Google Visualization Timeline Chart按RouteName和PPF排序且PLAN优先？

Google Timeline Chart本身不支持通过配置选项直接修改排序规则，它完全按照DataTable的行顺序渲染条目。要实现先按RouteName排序，再让PPF为PLAN的条目优先，最后按PPF值排序的需求，核心是提前对DataTable的数据行进行自定义排序，再传递给图表绘制。

具体实现步骤 #

1. 准备DataTable
   确保你的DataTable包含RouteName、PPF、Start、End等必要列（根据实际结构调整列索引）。

2. 自定义排序逻辑
   使用DataTable的sort()方法，传入复合排序规则：

   • 第一优先级：按RouteName列排序（默认升序，如需降序可添加desc: true）
   • 第二优先级：自定义PPF列的比较逻辑，强制PLAN值排在最前面，其余值按字符串顺序排序

3. 绘制图表
   将排序后的DataTable传入Timeline图表进行绘制。

代码示例 #

// 初始化DataTable
var data = new google.visualization.DataTable();
data.addColumn('string', 'RouteName');
data.addColumn('string', 'PPF');
data.addColumn('date', 'Start');
data.addColumn('date', 'End');
data.addRows([
  ['Route2', 'ACTUAL', new Date(2024, 0, 3), new Date(2024, 0, 5)],
  ['Route1', 'PLAN', new Date(2024, 0, 1), new Date(2024, 0, 3)],
  ['Route1', 'ACTUAL', new Date(2024, 0, 1), new Date(2024, 0, 2)],
  ['Route2', 'PLAN', new Date(2024, 0, 2), new Date(2024, 0, 4)],
  ['Route2', 'OTHER', new Date(2024, 0, 4), new Date(2024, 0, 6)]
]);

// 执行自定义排序
data.sort([
  // 第一优先级：RouteName升序排序，如需降序添加 desc: true
  { column: 0 },
  // 第二优先级：PPF列自定义排序，PLAN优先
  {
    column: 1,
    comparator: function(a, b) {
      // PLAN值排在最前面
      if (a === 'PLAN' && b !== 'PLAN') {
        return -1;
      } else if (a !== 'PLAN' && b === 'PLAN') {
        return 1;
      }
      // 其他PPF值按字符串顺序排序
      return a.localeCompare(b);
    }
  }
]);

// 绘制Timeline图表
var chart = new google.visualization.Timeline(document.getElementById('timeline-container'));
chart.draw(data);

关键说明 #

• Timeline图表的条目顺序完全由DataTable的行顺序决定，因此必须在绘制前完成数据排序
• 如果需要调整RouteName的排序方向，只需在第一个排序规则中添加desc: true参数，例如：{ column: 0, desc: true }
• 若PPF列有其他特殊排序需求，可修改comparator函数内的逻辑来适配

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