按ID将Google图表时间轴的组栏颜色

Question

我正在尝试根据ID对Google时间线中的条形颜色进行分组。我不知道为什么它最有效。这是它的外观图像。

图像应该以绿色标记测试标签，如下所示：

这是我的代码：

 <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() 
           {
                var container = document.getElementById('bed-trace-svg-insert');
                var chart = new google.visualization.Timeline(container);
                var dataTable = new google.visualization.DataTable();
                var i, rows=[],curr_row, start_utcDate, start_local_date,
                     end_utcDate, end_local_date;

                dataTable.addColumn({ type: 'string', id: 'Group' });
                dataTable.addColumn({ type: 'string', id: 'Category' });
                dataTable.addColumn({ type: 'string', id: 'ID' });
                dataTable.addColumn({ type: 'date', id: 'Start' });
                dataTable.addColumn({ type: 'date', id: 'End' });

                // dataTable.addRows(rows);
                dataTable.addRows([
                   [ 'M2016019706', 'HO', 'NYH01 816', new Date(2016, 5, 1), new Date(2016, 6, 12) ],
                   [ 'M2016019706', 'LTCO', 'NYLTC18', new Date(2016, 6, 13), new Date(2016, 7, 29) ],
                   [ 'M2016019706', 'HO', 'NYH01 834', new Date(2016, 7, 30), new Date(2016, 8, 7) ],
                   [ 'M2016019706', 'LTCO', 'NYLTC18', new Date(2016, 8, 8), new Date(2016, 8, 12) ],
                   [ 'M2016019706', 'test', '', new Date(2016, 8, 1), new Date(2016, 8, 2) ]                  
                ]);

                var color_array = [];
                var colorMap = 
                {
                     // should contain a map of category -> color for every category
                     HO: '#e63b6f', // pink
                     test:'#32a852', // green
                     LTCO: '#592df7', // purple
                     OPT: '#2dbef7', // blue
                }

                for (i = 0; i < dataTable.getNumberOfRows(); i++) 
                {
                     color_array.push(colorMap[dataTable.getValue(i, 1)]);
                }

                var rowHeight = 41;
                var chartHeight = (dataTable.getNumberOfRows() + 1) * rowHeight;

                var   options = 
                     {
                          timeline: 
                          { 
                               groupByRowLabel: true,
                               rowLabelStyle: 
                               {
                                    fontName: 'Roboto Condensed',
                                    fontSize: 14,
                                    color: '#333333'
                               },
                               barLabelStyle: 
                               {
                               fontName: 'Roboto Condensed',
                               fontSize: 14
                               }
                          },                          
                          avoidOverlappingGridLines: true,
                          height: chartHeight,
                          width: '100%',
                          colors: color_array
                     };

               // use a DataView to hide the category column from the Timeline
               var view = new google.visualization.DataView(dataTable);
               view.setColumns([0, 2, 3, 4]);

               chart.draw(view, options);
           }


 </script>
 <div id='bed-trace-svg-insert'></div>

color_array数组正确：

 ["#e63b6f", "#592df7", "#e63b6f", "#592df7", "#32a852"]

我不确定为什么绘制图表时我的颜色会改变。有什么想法吗？

可能与订单有关，因为如果我将订单切换到：

 dataTable.addRows([
      [ 'M2016019706', 'test', 'test', new Date(2016, 8, 1), new Date(2016, 8, 2) ],
    [ 'M2016019706', 'HO', 'NYH01 816', new Date(2016, 5, 1), new Date(2016, 6, 12) ],
    [ 'M2016019706', 'LTCO', 'NYLTC18', new Date(2016, 6, 13), new Date(2016, 7, 29) ],
    [ 'M2016019706', 'HO', 'NYH01 834', new Date(2016, 7, 30), new Date(2016, 8, 7) ],

    [ 'M2016019706', 'LTCO', 'NYLTC18', new Date(2016, 8, 8), new Date(2016, 8, 12) ],                  
    [ 'M2016019706', 'HO', 'NYH01 834', new Date(2016, 8, 13), new Date(2016, 8, 28) ]

 ]);

我明白了：

Answer 1

此小提琴通过问题回答：enter link description here

您需要使用：

 dataTable.addColumn({ type: 'string', role: 'style' });