谷歌表合并列答案

【问题标题】：Google Table Merge columns谷歌表合并列
【发布时间】：2016-01-19 13:56:11
【问题描述】：

我有一个以表格形式显示数据的页面。我使用谷歌图表，代码如下：

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
      google.load("visualization", "1", {packages:["table"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
         ['Task', 'Hours per Day', 'Test', 'Hours per Day', 'Test'],
          ['Work',     11, 12, 11, 12],
          ['Eat',      2, 13, 2, 13],
          ['Commute',  2, 15, 2, 34],
          ['Watch TV', 2, 17, 7, 24],
          ['Sleep',    7, 18, 2, 13]
        ]);

       var chart = new google.visualization.Table(document.getElementById('tablechart'));
       chart.draw(data);
      }
    </script>
<div id="tablechart" style="width: 700px; height: 400px; position: relative;"></div>

这是一个有效的 JS FIDDLE：https://jsfiddle.net/alex4uthis/kt21bf0k/

我想得到以下格式：

（我想合并图像中的一月和二月）
请指教...

【问题讨论】：

很遗憾，您无法使用 Google Charts API 做到这一点。

标签： javascript charts google-visualization

【解决方案1】：

绘制完成后，您可以使用'ready' 事件手动更改图表。

谷歌图表中没有可用的选项来添加额外的标题行。
这使得这个答案有点像黑客。

不管怎样，图表本身就是一个普通的TABLE元素

这是一个简单的例子，我根据提供给图表的数据做出假设。
可能还需要考虑其他因素。
例如，当存在滚动条并且标题行保持固定时，将有第二个标题行需要处理。最后我还是检查了...

给定一个简单的表格图表，这种方法应该可以正常工作。
我已经使用这种方法在底部添加总行数等...

我使用cloneNode 来确保新行与图表的其余部分具有相同的样式。

google.load('visualization', '1', {packages:['table'], callback: drawChart});

function drawChart() {
  var divTableChart;

  divTableChart = document.getElementById('tablechart');

  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day', 'Task', 'Hours per Day'],
    ['Work',     11, 'Work', 12],
    ['Eat',      2, 'Work', 13],
    ['Commute',  2, 'Work', 34],
    ['Watch TV', 2, 'Work', 24],
    ['Sleep',    7, 'Work', 13]
  ]);

  var chart = new google.visualization.Table(divTableChart);

  google.visualization.events.addListener(chart, 'ready', function () {
    var headerRow;
    var newRow;

    // get header row and clone to keep google chart style
    headerRow = divTableChart.getElementsByTagName('THEAD')[0].rows[0];
    newRow = headerRow.cloneNode(true);

    // modify new row to combine cells and add labels
    newRow.deleteCell(newRow.cells.length - 1);
    newRow.deleteCell(newRow.cells.length - 1);
    newRow.cells[0].colSpan = 2;
    newRow.cells[0].innerHTML = 'Jan';
    newRow.cells[1].colSpan = 2;
    newRow.cells[1].innerHTML = 'Feb';

    // insert new / cloned row
    divTableChart.getElementsByTagName('THEAD')[0].insertBefore(newRow, headerRow);
  });

  chart.draw(data);
}

<script src="https://www.google.com/jsapi"></script>
<div id="tablechart"></div>

【讨论】：