Question

我的dataTable有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

第一次，绘制图表时，数据表必须与data format

匹配

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

保留布尔列，使用DataView将其隐藏在图表中...

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

然后使用dataView绘制图表

chart.draw(dataView, options);

下一步，因为没有标准选项可以为条形图添加颜色，其余部分为“一次性”

一旦图表的'ready'事件触发

，就可以使用脚本手动更改颜色

但是，在任何交互性上，图表会将条形图还原为原始颜色
如选择，鼠标悬停等...

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

终于，找到要更改的栏，
查看图表

创建的<rect>元素

时间轴栏（<rect>元素）的'x'属性大于零另外，dom中元素的顺序将遵循数据表中行的顺序所以一旦找到第一个栏，它就会回到数据表中的第一行，依此类推......

但是，当鼠标悬停在条形图上时会绘制单独的条形图，以突出显示

这些等同于额外的条形，并且不会有与数据表的关系

因此，当'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>

根据数据表

1 个答案: