Цвет перекрывающихся надписей разных цветов на графиках Google.

Question

в демонстрационных целях я взял фрагмент из: Google Charts Изменить цвет шрифта оси X для временных шкал

Чего я добиваюсь, если у одного ярлыка есть два ' Вложенные строки, цвет этих строк по-разному.

Итак, глядя на этот пример, у нас есть несколько строк для метки WWN , и у нас есть две вложенные строки: Matt Riddles Bloodsport и Evolve находятся на одном вложенном ряду, а Wrestling Royale и Beyond Wrestling находятся на втором «вложенном» ряду. Можно ли по-разному раскрасить эти два ряда? Таким образом, все, что появляется в «первой» строке, имеет один цвет, а все, что находится в любой другой «строке», имеет другой цвет. В этом случае Matt Riddles Bloodsport и Evolve одного цвета и Wrestling Royale и Beyond Wrestling в другом цвете. Предполагается, что загрузка данных происходит динамически c, и мы не знаем, сколько баров у нас будет в «первой строке» WWN.

google.charts.load('current', {
  packages:['timeline']
}).then(function () {
  var container = document.getElementById('example5.1');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn({ type: 'string', id: 'Federation' });
  dataTable.addColumn({ type: 'string', id: 'Event' });
  dataTable.addColumn({ type: 'date', id: 'Start' });
  dataTable.addColumn({ type: 'date', id: 'End' });
  dataTable.addRows([
    [ 'WWE / NXT',  'AXXESS',    new Date(0,0,0,18,0,0),  new Date(0,0,0,22,0,0)],
    [ 'WWN',  'Matt Riddles Bloodsport',    new Date(0,0,0,15,0,0),  new Date(0,0,0,18,0,0)],
    [ 'WWN',  'Wrestling Royale',    new Date(0,0,0,15,0,0),  new Date(0,0,0,18,0,0)],
    [ 'WrestleCon',  'Wildkat Sports', new Date(0,0,0,18,0,0), new Date(0,0,0,21,0,0)],
    [ 'WWN', 'Evolve',   new Date(0,0,0,20,00,0), new Date(0,0,0,23,0,0)],
    [ 'WrestleCon', 'WrestleCon Supershow',       new Date(0,0,0,21,30,0), new Date(0,0,0,23,30,0)],
    [ 'WWN', 'Beyond Wrestling',        new Date(0,0,0,20,55,0), new Date(0,0,0,23,55,0)]]);
  var options = {
    timeline: { colorByRowLabel: true },
    tooltip: {isHtml: true},
    legend: 'none',
    backgroundColor: '#ffd',
  };
  google.visualization.events.addListener(chart, 'ready', function () {
    var labels = container.getElementsByTagName('text');
    Array.prototype.forEach.call(labels, function(label) {
      if (label.getAttribute('text-anchor') === 'middle') {
        label.setAttribute('fill', '#ffffff');
      }
    });
  });
  chart.draw(dataTable, options);
});

body {
  background-color: #154360;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<DIV>
  <p><U><font face="verdana" size="6" color="#CCCCCC">Thursday</font></U></p>
  <div id="example5.1" style="height: 300px;"></div>
</DIV>