Как добавить цвет фона для определенной строки в Google Charts

Question

Я хотел бы добавить цвет фона для определенных строк в моей временной шкале Google.Я знаю, что есть глобальная настройка, чтобы установить фон всей диаграммы, но как бы я сделал это для конкретной строки.Вот пример того, что я имею в виду:

Мне бы хотелось, чтобы строка «Комната ивы» (и только эта строка) имела фон следующим образом:

Вот пример jsfiddle выше (без красного фона, который я пытаюсь получить): https://jsfiddle.net/0f86vLrg/3/.

google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {

var container = document.getElementById('timeline');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Platform' });
dataTable.addColumn({ type: 'string', id: 'Status' });
dataTable.addColumn({ type: 'string', role: 'style' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });

// set the background of a missing item

dataTable.addRows([
  [ 'Magnolia Room',  '',      null, new Date(0,0,0,12,0,0),  new Date(0,0,0,13,30,0) ],
  [ 'Magnolia Room',  '',      null, new Date(0,0,0,14,0,0),  new Date(0,0,0,15,30,0) ],
  [ 'Willow Room',   '',       'error', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
  [ 'X Room',   '',   'opacity: 0', new Date(0,0,0,0,0,0), new Date(0,0,1,0,0,0)]]);

  var options = {
     timeline: { colorByRowLabel: true },
     backgroundColor: '#ffd'
   };

   chart.draw(dataTable, {
     hAxis: {
       minValue: new Date(0,0,0,0,0,0),
       maxValue: new Date(0,0,0,24,0,0),

     }
   });
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="timeline" style="height: 180px;"></div>

Как бы добавить цвет фона для конкретной строки на основе настройки стиля этой строки (или, если есть лучший способ дать егокласс или что-то.) Например, в приведенном выше коде стиль называется «ошибка» для элемента «Комната ивы».

Answer 1

на временной шкале нет параметров для стилизации определенной панели.
и формат данных не поддерживают роль 'style', только роль 'tooltip'.

, но мы все еще можем использовать столбец таблицы данных для указания error строк.
, и нам нужно будет изменить их цвет вручную, в случае события 'ready' диаграммы.

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

как таковой, мы должны сначала найти соответствующую строку таблицы данных для метки.
затем проверить, есть ли в строке метки ошибка.
затем найти столбец с тем же индексом, что и упометить и изменить цвет.

см. Следующий рабочий фрагмент ...

google.charts.load('current', {
  packages:['timeline']
}).then(function () {
  var container = document.getElementById('timeline');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn({ type: 'string', id: 'Platform' });
  dataTable.addColumn({ type: 'string', id: 'Status' });
  dataTable.addColumn({ type: 'string', role: 'style' });
  dataTable.addColumn({ type: 'date', id: 'Start' });
  dataTable.addColumn({ type: 'date', id: 'End' });
  dataTable.addRows([
    ['Magnolia Room', '', null, new Date(0,0,0,12,0,0), new Date(0,0,0,13,30,0)],
    ['Magnolia Room', '', null, new Date(0,0,0,14,0,0), new Date(0,0,0,15,30,0)],
    ['Willow Room', '', 'error', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0)],
    ['X Room', '', null, new Date(0,0,0,0,0,0), new Date(0,0,1,0,0,0)]
  ]);

  var options = {
    timeline: {colorByRowLabel: true},
    backgroundColor: '#ffd',
    height: 180
  };

  // change bar color for errors
  google.visualization.events.addListener(chart, 'ready', function() {
    var rows;
    var barIndex;
    var labelIndex = 0;
    var labels = container.getElementsByTagName('text');
    Array.prototype.forEach.call(labels, function(label) {
      // process bar labels
      if (label.getAttribute('text-anchor') === 'end') {
        // find data rows for label
        rows = dataTable.getFilteredRows([{
          column: 0,
          test: function (value) {
            var labelFound;
            var labelText;

            // chart will cutoff label if not enough width
            if (label.textContent.indexOf('…') > -1) {
              labelText = label.textContent.replace('…', '');
              labelFound = (value.indexOf(labelText) > -1);
            } else {
              labelText = label.textContent;
              labelFound = (value === labelText);
            }
            return labelFound;
          }
        }]);
        if (rows.length > 0) {
          // process label rows
          rows.forEach(function (rowIndex) {
            // check if row has error
            if (dataTable.getValue(rowIndex, 2) === 'error') {
              // change color of label
              label.setAttribute('fill', '#c62828');

              // change color of bar
              barIndex = 0;
              var bars = container.getElementsByTagName('rect');
              Array.prototype.forEach.call(bars, function(bar) {
                if ((bar.getAttribute('x') === '0') && (bar.getAttribute('stroke-width') === '0')) {
                  if (barIndex === labelIndex) {
                    bar.setAttribute('fill', '#ffcdd2');
                  }
                  barIndex++;
                }
              });
            }
          });
        }
        labelIndex++;
      }
    });
  });

  chart.draw(dataTable, {
    hAxis: {
      minValue: new Date(0,0,0,0,0,0),
      maxValue: new Date(0,0,0,24,0,0)
    }
  });
});

#timeline svg g text {
	font-weight: normal !important;
}

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