如何提取谷歌图表的行条目宽度

Question

我在提取谷歌甘特图上选定行的宽度时遇到困难。为了进一步详细说明，我需要单数数据行的宽度，我可以在后面的代码中的"rect"标签下看到它，但不确定如何正确调用语法以进行宽度检索。

甘特图

Answer 1

首先，等待图表的'ready'事件触发。

然后我们可以从图表中获取<rect>元素。
除了表示行的元素之外，还将有其他<rect>元素。

比如图表区等
，我们可以通过填充颜色过滤掉...

google.visualization.events.addOneTimeListener(chart, 'ready', function () {
var rows = container.getElementsByTagName('rect');
var bars = [];
Array.prototype.forEach.call(rows, function(row) {
switch (row.getAttribute('fill')) {
case '#ffffff':
case '#f5f5f5':
case 'none':
// ignore
break;
default:
bars.push(row);
}
});
if (bars.length > 0) {
console.log(parseFloat(bars[0].getAttribute('width')));
}
});

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

google.charts.load('current', {
packages:['gantt']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task ID');
data.addColumn('string', 'Task Name');
data.addColumn('string', 'Resource');
data.addColumn('date', 'Start Date');
data.addColumn('date', 'End Date');
data.addColumn('number', 'Duration');
data.addColumn('number', 'Percent Complete');
data.addColumn('string', 'Dependencies');
data.addRows([
['2014Spring', 'Spring 2014', 'spring',
new Date(2014, 2, 22), new Date(2014, 5, 20), null, 100, null],
['2014Summer', 'Summer 2014', 'summer',
new Date(2014, 5, 21), new Date(2014, 8, 20), null, 100, null],
['2014Autumn', 'Autumn 2014', 'autumn',
new Date(2014, 8, 21), new Date(2014, 11, 20), null, 100, null],
['2014Winter', 'Winter 2014', 'winter',
new Date(2014, 11, 21), new Date(2015, 2, 21), null, 100, null],
['2015Spring', 'Spring 2015', 'spring',
new Date(2015, 2, 22), new Date(2015, 5, 20), null, 50, null],
['2015Summer', 'Summer 2015', 'summer',
new Date(2015, 5, 21), new Date(2015, 8, 20), null, 0, null],
['2015Autumn', 'Autumn 2015', 'autumn',
new Date(2015, 8, 21), new Date(2015, 11, 20), null, 0, null],
['2015Winter', 'Winter 2015', 'winter',
new Date(2015, 11, 21), new Date(2016, 2, 21), null, 0, null],
['Football', 'Football Season', 'sports',
new Date(2014, 8, 4), new Date(2015, 1, 1), null, 100, null],
['Baseball', 'Baseball Season', 'sports',
new Date(2015, 2, 31), new Date(2015, 9, 20), null, 14, null],
['Basketball', 'Basketball Season', 'sports',
new Date(2014, 9, 28), new Date(2015, 5, 20), null, 86, null],
['Hockey', 'Hockey Season', 'sports',
new Date(2014, 9, 8), new Date(2015, 5, 21), null, 89, null]
]);
var options = {
height: 400,
gantt: {
trackHeight: 30
}
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.Gantt(container);
google.visualization.events.addOneTimeListener(chart, 'ready', function () {
var rows = container.getElementsByTagName('rect');
var bars = [];
Array.prototype.forEach.call(rows, function(row) {
switch (row.getAttribute('fill')) {
case '#ffffff':
case '#f5f5f5':
case 'none':
// ignore
break;
default:
bars.push(row);
}
});
if (bars.length > 0) {
console.log(parseFloat(bars[0].getAttribute('width')));
}
});
chart.draw(data, options);
function daysToMilliseconds(days) {
return days * 24 * 60 * 60 * 1000;
}
});

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