程序员经验分享-hwhale

google.visualization.DataTable() 合并行

2024-01-25

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

没有任何标准选项，

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

一旦'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>

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

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

dataTable

googlevisualization

Visualization

google.visualization.DataTable() 合并行 的相关文章