javascript - 谷歌图表 : apply different color styling types according to label for the timeline chart

Question

我目前有一个时间线图表，其中的过滤器已经在工作。我使用仪表板绑定(bind)这两个。

问题是我希望第一个泳道(或标签)的 colorByRowLabel 属性为 true，但其余泳道(或标签)的属性为默认 false。

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

如果有人已经这样做或有解决方案，请发布一些示例代码，我将解决其余问题。如果我需要将代码放在这里，请告诉我，但我认为没有必要。

Answer 1

data format时间轴不允许多个系列

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

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

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>