根据数据 table 的布尔条件更改 Google 图表时间轴栏颜色

Question

我的数据表有 6 列。第 5 列是布尔值。我想像我已经做的那样根据第 2 列为条形着色，但是如果第 5 列为假，则颜色应为灰色（无论第 2 列中的字符串如何）。

我尝试使用“dataTable.addColumn({ type: 'boolean', role: 'scope' });” 但它不适用于时间轴。我还尝试为第 5 列中的每个栏发送带有颜色的字符串，但它也没有用。

你能帮我解决这个问题吗？

 var timeLineGraph = 'timeLineGraph';

var arrayDataTimeline  = [
 [ 'Debora',  'Pharmacist', 1,   new Date(2017,2,1,06,0,0),  new Date(2017,2,1,11,0,0), true],
      [ 'Debora',  'Pharmacist', 1,    new Date(2017,2,1,12,00,0), new Date(2017,2,1,15,0,0), true],
      [ 'Gabriela',  'Pharmacist', 2,  new Date(2017,2,1,07,00,0), new Date(2017,2,1,13,0,0), false ],
      [ 'Gabriela',  'Pharmacist',2,      new Date(2017,2,1,14,00,0), new Date(2017,2,1,16,0,0), false],
      [ 'Andrieli', 'Teller', 3,      new Date(2017,2,1,15,00,0), new Date(2017,2,1,18,0,0), true],
      [ 'Andrieli',  'Teller', 3,      new Date(2017,2,1,19,00,0), new Date(2017,2,1,24,0,0), true],
      [ 'Alex', 'Teller', 4,      new Date(2017,2,1,15,00,0), new Date(2017,2,1,18,0,0), true],
      [ 'Alex', 'Teller', 4,      new Date(2017,2,1,19,00,0), new Date(2017,2,1,24,0,0),true]];
   

google.charts.load("current", {packages:["timeline"]});
  
  function drawTimeline(timeLineGraph, arrayDataTimeline) {

    var container = document.getElementById(timeLineGraph);
    var chart = new google.visualization.Timeline(container);
    
     
    var dataTable = new google.visualization.DataTable();
  
  
    dataTable.addColumn({ type: 'string', id: 'Nome'});
    dataTable.addColumn({ type: 'string', id: 'Cargo' });
    dataTable.addColumn({ type: 'number', role: 'id' });
    dataTable.addColumn({ type: 'date', id: 'Começo' });
    dataTable.addColumn({ type: 'date', id: 'Fim' });
    dataTable.addColumn({ type: 'boolean', role: 'scope' });
    
    
    dataTable.addRows(arrayDataTimeline);

    
  
 
  
  
    var options = {
      showBarLabels: false,
      groupByRowLabel: true, // novo
      
        rowLabelStyle: {fontName: 'sans-serif'},
       hAxis: {
            format: 'HH:mm'
   }
  
    };
    
  }

drawTimeline(timeLineGraph, arrayDataTimeline);

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<html>
  
  <head>
    </head>
  
  <body>

<div id="timeLineGraph" style="height: 500px;"></div>
      </body>
  
  
  </html>

Answer 1

首先，绘制图表时，数据table必须匹配data format

这就是添加 布尔值 列不起作用的原因

要保留 布尔值 列，请使用 DataView 将其从图表中隐藏...

var dataView = new google.visualization.DataView(dataTable);
dataView.hideColumns([5]);

然后使用dataView绘制图表

chart.draw(dataView, options);

下一个，因为没有标准选项来为条形图着色，"one off" 来自其余

可以使用脚本手动更改颜色，一旦图表的 'ready' 事件触发

但是，在任何 交互活动 上，图表会将条形恢复为原始颜色
例如 select、鼠标悬停等...

强制图表保持新颜色，
使用 MutationObserver 了解图表何时具有 interactivity、
并将栏更改为所需的颜色

最后，找到要改变的柱子，
查看由图表

创建的 <rect> 个元素

时间线条（<rect> 元素）将具有大于零的 'x' 属性
此外，dom 中元素的顺序将遵循数据中行的顺序 table
因此，一旦找到第一个柱，它将返回到数据 table 中的第一行，依此类推...

然而，当鼠标悬停在栏上时，会绘制单独的栏，以突出显示

这些等同于额外的柱状图，与数据没有关系 table

因此，当 'ready' 事件触发时，找到柱并将坐标保存到数组

然后在 MutationObserver 中，如果找到与数组中保存的坐标匹配的柱，则更改颜色

请参阅以下工作片段...

google.charts.load('current', {
  callback: function () {
    var timeLineGraph = 'timeLineGraph';

    var arrayDataTimeline  = [
      ['Debora', 'Pharmacist', 1, new Date(2017,2,1,06,0,0), new Date(2017,2,1,11,0,0), true],
      ['Debora', 'Pharmacist', 1, new Date(2017,2,1,12,00,0), new Date(2017,2,1,15,0,0), true],
      ['Gabriela', 'Pharmacist', 2, new Date(2017,2,1,07,00,0), new Date(2017,2,1,13,0,0), false],
      ['Gabriela', 'Pharmacist',2, new Date(2017,2,1,14,00,0), new Date(2017,2,1,16,0,0), false],
      ['Andrieli', 'Teller', 3, new Date(2017,2,1,15,00,0), new Date(2017,2,1,18,0,0), true],
      ['Andrieli', 'Teller', 3, new Date(2017,2,1,19,00,0), new Date(2017,2,1,24,0,0), true],
      ['Alex', 'Teller', 4, new Date(2017,2,1,15,00,0), new Date(2017,2,1,18,0,0), true],
      ['Alex', 'Teller', 4, new Date(2017,2,1,19,00,0), new Date(2017,2,1,24,0,0),true]
    ];
    drawTimeline(timeLineGraph, arrayDataTimeline);
  },
  packages:['timeline']
});

function drawTimeline(timeLineGraph, arrayDataTimeline) {
  var container = document.getElementById(timeLineGraph);
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn({type: 'string', id: 'Nome'});
  dataTable.addColumn({type: 'string', id: 'Cargo'});
  dataTable.addColumn({type: 'number', role: 'id'});
  dataTable.addColumn({type: 'date', id: 'Começo'});
  dataTable.addColumn({type: 'date', id: 'Fim'});
  dataTable.addColumn({type: 'boolean', role: 'scope'});
  dataTable.addRows(arrayDataTimeline);

  var dataView = new google.visualization.DataView(dataTable);
  dataView.hideColumns([5]);

  var options = {
    showBarLabels: false,
    groupByRowLabel: true,
    rowLabelStyle: {fontName: 'sans-serif'},
    hAxis: {
      format: 'HH:mm'
    }
  };

  var observer = new MutationObserver(setScope);

  var outOfScope = [];
  google.visualization.events.addListener(chart, 'ready', function () {
    var rowIndex = 0;
    Array.prototype.forEach.call(container.getElementsByTagName('rect'), function (bar) {
      if (parseFloat(bar.getAttribute('x')) > 0) {
        if (!dataTable.getValue(rowIndex, 5)) {
          bar.setAttribute('fill', '#9e9e9e');
          outOfScope.push([
            bar.getAttribute('x'),
            bar.getAttribute('y')
          ]);
        }
        rowIndex++;
      }
    });

    observer.observe(container, {
      childList: true,
      subtree: true
    });
  });

  function setScope() {
    Array.prototype.forEach.call(container.getElementsByTagName('rect'), function (bar) {
      outOfScope.forEach(function (coords) {
        if ((bar.getAttribute('x') === coords[0]) && (bar.getAttribute('y') === coords[1])) {
          bar.setAttribute('fill', '#9e9e9e');
        }
      });
    });
  }

  chart.draw(dataView, options);
}

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

根据数据 table 的布尔条件更改 Google 图表时间轴栏颜色

Change Google Chart Timeline bar color according boolean condition from data table

javascript

charts

timeline

google-visualization