Google图表:根据时间轴图表将不同的颜色样式类型应用于标签

Question

i当前有一个时间表图表，其过滤器已经有效。我使用仪表板绑定这两个。

问题是我想拥有第一个泳道(或标签(，以将属性colorbyrowlabel在true上，但其余的将其放在默认的false上。

我认为这与大多数图表的选项中的系列属性可行，但是我目前在时间轴图中没有看到该可用性。

如果某人已经这样做或有解决方案，请发布一些示例代码，我将剩下的。如果我需要将代码放在这里，请告诉我，但我认为这不是必要的。

Answer 1

时间轴的数据格式不允许多个系列

提供自定义颜色的唯一方法是colors选项

这意味着您将需要提供所有颜色，
不仅是第一个标签

colors选项采用一系列颜色字符串
['#f44336', '#e91e63', '#9c27b0', ...

数组中的每种颜色将分配给数据表中的一行

数组中的第一个颜色字符串将分配给第一行，等等...

但是，在绘制之前，图表将根据开始日期对数据进行排序
因此必须以相同顺序加载颜色
可以通过手动对数据进行分类来完成

请参阅以下工作片段，

第一个标签'special'使用相同的颜色，
其余的分配了单独的颜色...

google.charts.load('current', {
  callback: function () {
    var container = document.getElementById('timeline');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Room' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      ['special', '_', new Date(2010, 2, 4),  new Date(2011, 2, 4) ],
      ['1', 'A', new Date(2011, 3, 30), new Date(2012, 2, 4) ],
      ['2', 'B', new Date(2012, 2, 4),  new Date(2013, 3, 30) ],
      ['special', '-', new Date(2010, 2, 4),  new Date(2011, 2, 4) ],
      ['3', 'C', new Date(2013, 3, 30), new Date(2014, 2, 4) ],
      ['4', 'D', new Date(2014, 2, 4),  new Date(2015, 2, 4) ],
      ['special', '=', new Date(2010, 2, 4),  new Date(2011, 2, 4) ],
      ['5', 'E', new Date(2015, 3, 30), new Date(2016, 2, 4) ],
      ['6', 'F', new Date(2016, 2, 4),  new Date(2017, 2, 4) ],
      ['special', '|', new Date(2010, 2, 4),  new Date(2011, 2, 4) ],
      ['7', 'G', new Date(2017, 2, 4),  new Date(2018, 2, 4) ],
      ['8', 'H', new Date(2018, 2, 4),  new Date(2019, 2, 4) ],
      ['9', 'I', new Date(2019, 2, 4),  new Date(2020, 2, 4) ]
    ]);
    // sort by start date
    dataTable.sort([{column: 2}]);
    // build chart colors
    var colorPallette = ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4caf50', '#8bc34a', '#cddc39', '#ffeb3b', '#ffc107', '#ff9800', '#ff5722', '#795548', '#9e9e9e', '#607d8b', '#000000', '#ffffff'];
    var chartColors = [];
    var colorIndex = 0;
    var firstLabel = dataTable.getValue(0, 0);
    for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
      if (dataTable.getValue(i, 0) === firstLabel) {
        chartColors.push(colorPallette[0]);
      } else {
        chartColors.push(colorPallette[++colorIndex]);
      }
    }
    chart.draw(dataTable, {
      colors: chartColors,
      height: 600
    });
  },
  packages: ['timeline']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="timeline"></div>