如何基于技能等级字符串条件为时间线图表里程碑设置对应颜色？

要实现根据expertise level的开头为每个时间线条形单独设置颜色，你不能直接依赖全局的colors选项（它只会按顺序给所有条形分配颜色，无法实现条件判断）。Google Charts的时间线图表支持通过**样式列（style role column）**为单个条形定制样式，具体实现步骤如下：

实现步骤 #

1. 添加样式列到DataTable：给数据表格新增一列，类型设为string，角色指定为style，这一列将用来存储每个条形的颜色值。
2. 遍历数据设置对应颜色：循环每一行数据，根据expertise level的开头判断，给样式列赋值对应的颜色。
3. 绘制图表：此时可以移除全局colors选项（保留也不影响，样式列优先级更高），直接绘制即可。

完整代码示例 #

假设你的dataTable已经包含expertise level列（示例中列索引为3，请根据实际数据结构调整），修改后的drawChart函数如下：

function drawChart() {
  // 给DataTable添加样式列
  dataTable.addColumn({ type: 'string', role: 'style' });

  // 遍历每一行，根据技能等级设置对应颜色
  for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
    var expertiseLevel = dataTable.getValue(i, 3);
    var barColor;

    // 根据字符串开头判断颜色
    if (expertiseLevel.startsWith('Begining')) {
      barColor = 'red';
    } else if (expertiseLevel.startsWith('Advanced')) {
      barColor = 'brown';
    } else if (expertiseLevel.startsWith('Intermediate')) {
      barColor = 'yellow';
    } else {
      barColor = 'gray'; // 可选：设置默认颜色
    }

    // 将颜色写入样式列
    dataTable.setValue(i, dataTable.getNumberOfColumns() - 1, barColor);
  }

  var options = {
    // 可移除全局colors配置，样式列会单独控制每个条形颜色
  };
  
  chart.draw(dataTable, options, { height: (dataTable.getNumberOfRows() * rowHeight) + rowHeight });
}

额外提示 #

• 如果数据中expertise level的大小写不固定（比如出现begining或BEGINING），可以先转成小写再判断：

  if (expertiseLevel.toLowerCase().startsWith('begining')) {
    // ...
  }
  

• 除了颜色名称，你也可以使用十六进制或RGB值定义更精确的颜色，比如'#FF5733'或'rgb(165,42,42)'代替'brown'。
• 如果你的dataTable是通过数组直接创建的（比如用google.visualization.arrayToDataTable），可以直接在每行数据的末尾添加颜色值，无需动态遍历设置。

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