如何将背景色添加到Google图表中的特定行

Question

我想为我的Google时间线图表中的特定行添加背景色。我知道有一个全局设置可以设置整个图表的背景，但是我将如何针对特定的行进行设置。这是我的意思的示例：

我希望“ Willow Room”行（只有该行）具有如下背景：

这是上面的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>

如何根据该行的“样式”设置为该行添加背景色（或者是否有更好的方法为它提供类或其他内容。）例如，在上面的代码中，样式为被称为“ Willow Room”项目的“错误”。

Answer 1

在时间线图表上没有设置样式的选项。
data format不支持'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>