javascript - Google Timeline 为每个时间表修复不同的颜色

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

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

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')
    )
);