我在Google DataTable中有这些数据:
我需要合并具有相同日期的行。结果将是:
在DataTable中是否有一个构建方法来实现这一点,或者有人可以给我一个提示如何做到这一点,而不需要通过表格进行典型的迭代并在每一行上进行比较。
这里是jsfiddle链接,我现在正在尝试。
jsfiddle.net/Kwangsub_Ahn/ohh8397h/7/
HTML
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="table_div"></div>
JAVASCRIPT
google.load("visualization", "1.1", {
packages: ["table"]
});
google.setOnLoadCallback(drawTable);
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('string', 'Project');
data.addColumn('string', 'System');
data.addColumn('number', 'No');
data.addRows([
['7/31/2014', 'project1', 'system1', 5],
['5/2/2014', 'project2', 'system2', 2],
['5/2/2014', 'project1', 'system1', 5],
['1/31/2014', 'project3', 'system4', 1]
]);
var view = new google.visualization.DataView(data);
var id = document.getElementById('table_div');
var table = new google.visualization.Table(id);
table.draw(view, {
allowHtml: true,
width: '100%',
height: '100%',
page: 'enable',
pageSize: 10
});
}
答案 0 :(得分:1)
没有任何标准选项,
但您可以手动修改表格图表
'ready'
事件触发后,
请参阅以下工作代码段...
google.charts.load('current', {
callback: drawTable,
packages: ['table']
});
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('string', 'Project');
data.addColumn('string', 'System');
data.addColumn('number', 'No');
data.addRows([
['7/31/2014', 'project1', 'system1', 5],
['5/2/2014', 'project2', 'system2', 2],
['5/2/2014', 'project1', 'system1', 5],
['1/31/2014', 'project3', 'system4', 1]
]);
var view = new google.visualization.DataView(data);
var id = document.getElementById('table_div');
var table = new google.visualization.Table(id);
google.visualization.events.addOneTimeListener(table, 'ready', function () {
var rowLabel = null;
var rowIndex;
var rowSpan;
var rows = id.getElementsByTagName('tr');
Array.prototype.forEach.call(rows, function (row, index) {
if (rowLabel !== row.cells[0].innerHTML) {
rowLabel = row.cells[0].innerHTML;
rowIndex = index;
if (rowSpan > 1) {
rows[index - rowSpan].cells[0].rowSpan = rowSpan;
}
rowSpan = 1;
} else {
rowSpan++;
row.removeChild(row.cells[0]);
}
});
});
table.draw(view, {
allowHtml: true,
width: '100%',
height: '100%',
page: 'enable',
pageSize: 10
});
}
&#13;
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="table_div"></div>
&#13;
注意:如果没有迭代每一行,不要认为有更简单的方法
答案 1 :(得分:0)