google.visualisation.DataTable()合并行

时间:2017-04-18 20:10:37

标签: javascript datatable google-visualization visualization

我在Google DataTable中有这些数据:

datatable1

我需要合并具有相同日期的行。结果将是:

datatable2

在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
    });
}

2 个答案:

答案 0 :(得分:1)

没有任何标准选项,

但您可以手动修改表格图表

'ready'事件触发后,

请参阅以下工作代码段...

&#13;
&#13;
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;
&#13;
&#13;

注意:如果没有迭代每一行,不要认为有更简单的方法

答案 1 :(得分:0)

尝试了你的代码,它运行良好,直到1行,其他行没有合并,并且在排序时,在页面上更改合并数据未合并到原始数据。 我的实际情况是合并具有相同值的行,它可能来自多个列。

查看我的示例数据

enter image description here