Question

我有一个包含很多行的时间轴，每行都有几个时间表。

我想为每个时间表修复一个确切的颜色，因此一种类型的时间表在每一行中都会有相同的颜色。

我正在使用此代码：

var options = {
      colors: ['#0C14F2', '#114C9E', '#ee8800', '#F6FF00'],
      timeline: {
          showBarLabels: false,
          avoidOverlappingGridLines: false
      },
      backgroundColor: '#f8f8ff'    
  };

此代码会随时更改时间表中的颜色。

更新：示例JSON输出

{"cols":[{"label":"Name","type":"string"},{"label":"Description","type":"string"},{"label":"Start","type":"date"},{"label":"End","type":"date"},{"role":"style","type":"string"}],"rows":
[{"c":[{"v":"Sample Name"},{"v":"Sample Desc"},{"v":"Date(2014,09,09,0,0,0)"},{"v":"Date(2014,09,09,1,0,0)"},{"v":"#124T‌9E"}]},

Answer 1

使用“colors”选项并不是最好的方法，因为正确设置此选项以获得所需颜色的过程相当复杂。一种更简单的方法是使用“样式”角色列，该列具有直接在其中列出的栏的所需颜色，例如：

var data = google.visualization.arrayToDataTable([
    ['Category', 'Name', {role: 'style'}, 'Start', 'End'],
    ['Foo', 'Cad', '#a23c7a', new Date(2014, 7, 1), new Date(2014, 7, 5)],
    ['Foo', 'Qud', '#40a67d', new Date(2014, 7, 3), new Date(2014, 7, 4)],
    ['Bar', 'Fiz', '#5581b4', new Date(2014, 7, 2), new Date(2014, 7, 9)]
]);

参见示例：http://jsfiddle.net/asgallant/qgo310pc/1/

[编辑以回应评论]

您可以在PHP中创建列，如下所示：

$table = array(
    'cols' => array(
        array('label' => 'Name', 'type' => 'string'),
        array('label' => 'Description', 'type' => 'string'),
        array('role' => 'style', 'type' => 'string'),
        array('label' => 'Start', 'type' => 'date'),
        array('label' => 'End', 'type' => 'date')
    )
);

Google时间轴为每个时间表修复不同的颜色

1 个答案: