Google表格合并列 [英] Google Table Merge columns

问题描述

我有一个页面以表格形式显示数据。我使用Google图表，这里是代码：

 < script type = text / javascript src = https：/ /www.google.com/jsapi\"></script> 
< script type = text / javascript> 
 google.load（ visualization， 1，{packages：[ table]}））; 
 google.setOnLoadCallback（drawChart）; 
函数drawChart（）{
 var data = google.visualization.arrayToDataTable（[
 ['Task'，'Hours of Hours'，'Test'，'每天的小时数，'测试']，
 ['Work'，11、12、11、12]，
 ['Eat'，2、13、2、13]，
 ['Commute'，2 15、2、34]，
 [观看电视，2、17、7、24]，
 [睡眠，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字段：

（我想将Jan和Feb合并为图片中的图片）

请告知...

解决方案

您可以使用就绪 事件用于在完成绘制后手动更改图表。

在Google图表中没有可用的选项来添加其他标题行。

这使此答案有点像黑客。

无论如何，图表本身都是普通的 TABLE 元素

这是一个简单的示例，我根据提供给图表的数据进行假设。

也可能需要考虑其他因素。

例如，当滚动条存在并且标题行保持固定，将有第二个标题行要处理。最后我还是检查了一下...

这种方法应该可以在简单的表格图表下正常工作。

我已经使用这种方法在以下位置添加了总行数：底部，等等...

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

  google.load（'visualization'，'1'，{packages：['table']，callback：drawChart }）;函数drawChart（）{var divTableChart; divTableChart = document.getElementById（’tablechart’）; var data = google.visualization.arrayToDataTable（[[''任务'，'每日工作时间'，'任务'，'每日工作时间']，['工作'，11，'工作'，12]，['饮食' ，2，工作，13]，[通勤，2，工作，34]，[观看电视，2，工作，24]，[睡眠，7，工作， 13]]）; var chart = new google.visualization.Table（divTableChart）; google.visualization.events.addListener（chart，'ready'，function（）{var headerRow; var newRow; //获取标题行并克隆以保持Google图表样式headerRow = divTableChart.getElementsByTagName（'THEAD'）[0]。 rows [0]; newRow = headerRow.cloneNode（true）; //修改新行以合并单元格并添加标签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'; / /插入新行/克隆行divTableChart.getElementsByTagName（'THEAD'）[0] .insertBefore（newRow，headerRow）;}）; chart.draw（data）;}  

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

I have a page that displays data in the form of a Table. I use Google Charts and here is the code:

<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>

And here's a working JS FIDDLE: https://jsfiddle.net/alex4uthis/kt21bf0k/

I would like to get the following format:

(I would like to merge Jan and Feb same as in the image)
Please advise...

解决方案

You can use the 'ready' event to change the chart manually once finished drawing.

There are no options available in the google chart to add additional header rows.
Which makes this answer somewhat of a hack.

Regardless, the chart itself is a normal TABLE element

This is a simple example and I make assumptions based on the data provided to the chart.
Other factors may need to be considered as well.
For instance, when a scrollbar is present and the header row remains fixed, there will be a second header row to deal with. Last I checked anyway...

This approach should work fine given a simple table chart.
I have used this approach to add total rows at the bottom, etc...

I use cloneNode to make sure the new row has the same style as the rest of the chart.

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>

这篇关于Google表格合并列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！