我的数据表有 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/