google.visualisation.DataTable() 合并行

Question

我在 Google 数据表中有此数据：

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

DataTable 中是否有内置方法来实现此目的，或者有人可以提示我如何执行此操作，而无需典型地遍历 table 并在每一行上进行比较。

这是 jsfiddle link 我正在尝试的。

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

Answer 1

没有任何标准选项，

但您可以手动修改 table 图表，

一旦 '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], ['5/2/2014', 'project4', 'system4', 4], ['5/2/2014', 'project3', 'system4', 5], ['1/31/2014', 'project3', 'system4', 1], ['1/31/2014', 'project4', 'system4', 2] ]);

    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 {
          row.removeChild(row.cells[0]);
          if (index === (rows.length - 1)) {
            rows[index - rowSpan].cells[0].rowSpan = ++rowSpan;
          } else {
            rowSpan++;
          }
        }
      });

    });

    table.draw(view, {
        allowHtml: true,
        width: '100%',
        height: '100%',
        page: 'enable',
        pageSize: 10
    });
}

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

注意：不要认为没有迭代每一行的更简单的方法

google.visualisation.DataTable() 合并行

google.visualisation.DataTable() merging rows

javascript

datatable

visualization

google-visualization