Google Charts Timeline：为部分时间线操作设置自定义名称与统一颜色

嘿，刚好做过类似的Google Charts Timeline自定义需求，给你一套落地可行的实现方案，分步骤来：

核心是通过数据预处理统一自定义名称，再借助Google Charts的style角色列实现同组颜色统一，同时配置自定义tooltip增强信息展示。

1. 预处理原始数据 #

首先你需要定义分组规则，把需要统一名称和颜色的操作映射到同一个配置上。比如你可以用Map来存储规则，根据idJob和idOperation的组合来匹配：

const originalData = [
  {"id":59291,"idJob":2,"idOperation":3,"start":0,"end":3,"machine":1},
  {"id":59292,"idJob":2,"idOperation":2,"start":3,"end":7,"machine":1},
  {"id":59293,"idJob":1,"idOperation":1,"start":7,"end":8,"machine":1},
  {"id":59294,"idJob":2,"idOperation":1,"start":8,"end":11,"machine":1},
  {"id":59295,"idJob":1,"idOperation":2,"start":0,"end":1,"machine":2},
  {"id":59296,"idJob":2,"idOperation":5,"start":7,"end":14,"machine":2}
];

// 分组规则：key是(idJob, idOperation)组合，value是统一的名称和颜色
const groupRules = new Map([
  [[2,3], {name: "Job 2 - 初始化", color: "#FF9900"}],
  [[2,2], {name: "Job 2 - 核心处理", color: "#3366CC"}],
  [[1,1], {name: "Job 1 - 启动", color: "#109618"}],
  [[2,1], {name: "Job 2 - 收尾", color: "#3366CC"}], // 和核心处理同色
  [[1,2], {name: "Job 1 - 后续操作", color: "#DC3912"}],
  [[2,5], {name: "Job 2 - 核心处理", color: "#3366CC"}] // 同组同名称同色
]);

// 转换为Timeline要求的数据格式，同时加入颜色配置列
const timelineData = originalData.map(item => {
  const key = [item.idJob, item.idOperation];
  const group = groupRules.get(key) || {name: `Job ${item.idJob} Op ${item.idOperation}`, color: "#999999"};
  
  // 注意：Timeline要求起止值为Date类型，这里用某天的秒数模拟你的时间单位
  const startDate = new Date(2024, 0, 1, 0, 0, item.start);
  const endDate = new Date(2024, 0, 1, 0, 0, item.end);
  
  return [
    `Machine ${item.machine}`, // 行标签：机器编号
    group.name, // 条形显示的自定义名称
    startDate,
    endDate,
    group.color // 对应style角色列，指定条形颜色
  ];
});

2. 配置Timeline图表选项 #

重点是启用style角色列来控制颜色，同时自定义tooltip展示更多原始信息：

const options = {
  height: 400,
  timeline: {
    groupByRowLabel: true, // 按机器分组展示
    barLabelStyle: {fontSize: 12, color: '#333'}, // 自定义条形标签样式
    rowLabelStyle: {fontSize: 14, bold: true} // 行标签（机器）样式
  },
  tooltip: {
    isHtml: true,
    // 自定义tooltip内容，显示原始数据的详细信息
    formatter: function(row) {
      const item = originalData[row];
      const group = groupRules.get([item.idJob, item.idOperation]);
      return `
        <div style="padding: 8px;">
          <strong>${group.name}</strong>
          <br>操作ID: ${item.id}
          <br>任务#${item.idJob} | 工序#${item.idOperation}
          <br>机器: ${item.machine}
          <br>时长: ${item.end - item.start} 单位
        </div>
      `;
    }
  }
};

3. 完整绘制代码 #

把上面的逻辑整合到完整的HTML页面中：

<html>
  <head>
    <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() {
        // 这里放上面的originalData、groupRules、timelineData代码
        
        const dataTable = new google.visualization.DataTable();
        dataTable.addColumn({type: 'string', id: 'Machine'});
        dataTable.addColumn({type: 'string', id: 'Operation'});
        dataTable.addColumn({type: 'date', id: 'Start'});
        dataTable.addColumn({type: 'date', id: 'End'});
        // 添加style角色列，用于指定每个条形的颜色
        dataTable.addColumn({type: 'string', role: 'style'});

        dataTable.addRows(timelineData);

        // 这里放上面的options代码

        const chart = new google.visualization.Timeline(document.getElementById('timeline'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id="timeline" style="width: 100%; height: 400px;"></div>
  </body>
</html>

关键注意点 #

• Date类型转换：Timeline只接受日期类型的起止值，这里用同一天的秒数来模拟你的时间单位，如果你是其他时间维度（比如天、小时），直接对应转换即可。
• style角色列：这是实现单个条形自定义颜色的核心，不需要依赖全局colors数组，灵活性更高。
• 分组规则扩展：如果后续需要新增分组，只需要在groupRules里添加新的键值对即可，无需修改图表逻辑。

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