个人中心
gpt4 book ai didi

javascript - 根据数据表中的 bool 条件更改 Google 图表时间线栏颜色

转载 作者：行者123 更新时间：2023-11-28 05:00:16 25 4
gpt4 key购买 nike

我的数据表有 6 列。第 5 列是 bool 值。我想像我已经做的那样根据第 2 列为条形着色，但是如果第 5 列为 false，则颜色应为灰色(无论第 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>

最佳答案

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

这就是为什么添加 bool 列不起作用

要保留 bool 值列，请使用 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>

关于javascript - 根据数据表中的 bool 条件更改 Google 图表时间线栏颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42188774/

25 4 0
文章推荐： javascript - 为什么我在localStorage中设置的和我得到的不一样？
文章推荐： javascript - 是否可以通过 PHP 或 JS 使用表单操作 PDF？
文章推荐： javascript - 如何动态地在另一个 div 中显示 div，例如带有某些行和列的表？
文章推荐： php - mysql_num_rows() 期望参数 1 是资源，在中给出的 bool 值
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com