代码之家 › 专栏 › 技术社区 › David542

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

google-visualization charts css javascript

David542 · 技术社区 · 6 年前

我想添加一个背景色到一个特定的行(s)在我的谷歌时间表图表。我知道有一个全局设置来设置整个图表的背景,但是如何为特定行设置背景呢。下面是我的意思的一个例子:

我希望“Willow Room”一行(只有那一行)的背景如下:

enter image description here

下面是上面的一个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”项的样式称为“error”。

1 回复 | 直到 6 年前

WhiteHat 6 年前

时间线图表上没有设置特定条形图样式的选项。
以及 data format 不支持 'style' 角色,只有 'tooltip' 角色。

错误
我们需要在图表上手动改变它们的颜色 '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>