Javascript GoogleCharts：如何创建具有分组列名称的表？

我正在尝试使用Google图表创建一个表，其中列名中的一些数据可以放在更高级别的列名中，以帮助提高可读性

在这个例子中，我想把“第一组”和“第二组”移到一个“更高”的层次；所以左边的桌子会和右边的桌子一样

---

我已经阅读了文档，还没有找到这方面的参考资料。可能吗？如果是，什么是好的方法？谢谢。

像这样的东西（使用jQuery），您可以根据自己的定制需求进行修改：

google.setOnLoadCallback（drawTable）；
函数drawTable（）{
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'Name'）；
data.addColumn（'number'，'Salary'）；
data.addColumn（'boolean'，'全职雇员'）；
data.addRows([
['Mike'，{v:10000，f:'10000'}，对]，
['Jim'，{v:8000，f:'8000'}，假]，
['Alice'，{v:12500，f:'12500'}，对]，
['Bob'，{v:7000，f:'7000'}，对]
]);
var table=新的google.visualization.table（document.getElementById（'table_div'）；
table.draw（数据，{showRowNumber:true，宽度：'100%，高度：'100%}）；
var tablehead='My Header我将此作为一个答案提交，因为我没有足够的声誉发表评论，尽管这实际上是@KevinBrown对答案的评论：

首先，这太棒了！我想投赞成票，但还是缺少代表票，所以值得一提的是，+1

但是，有一个小错误-如果表足够大，可以获得滚动条，则添加的标题将与行一起滚动，而不是保持不变。我看到“stock”标题得到一个动态调整的
style=“top:40px；”
当一个人在表格中滚动时，顶部会发生变化。到目前为止，我还无法获得添加的标题来进行相同的操作。如果我找到了，我将在这里发布，除非有人在我之前获得它

明白了：
您需要捕获表上的滚动事件，然后将股票标题行的style属性复制到标题行。可能有一种更优雅和/或更健壮的方法，但目前这对我有效：

google.setOnLoadCallback(drawTable);

function drawTable() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('number', 'Salary');
  data.addColumn('boolean', 'Full Time Employee');
  data.addRows([
    ['Mike',  {v: 10000, f: '$10,000'}, true],
    ['Jim',   {v:8000,   f: '$8,000'},  false],
    ['Alice', {v: 12500, f: '$12,500'}, true],
    ['Bob',   {v: 7000,  f: '$7,000'},  true]
  ]);

  var table = new google.visualization.Table(document.getElementById('table_div'));

  table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
  var tablehead ='<tr class="google-visualization-table-tr-head"><th class="google-visualization-table-th gradient unsorted" colspan="4">My Header</th></tr';
  var stuff = jQuery('#table_div').find('thead').prepend(tablehead);

  //Add scroll event handler to div enclosing table:
  var stuff = $('#playerTable_div').find('div').scroll(function(event) {
    //my custom header row is the first row in the thead section:
    var myHeaderRow = $('#playerTable_div').find('thead').children('tr');
    //the "stock" header row immediately follows mine:
    var stockHeaderRow = myHeaderRow.next('tr');
    //copy the stock th element's style to mine: 
    var styleToCopy = stockHeaderRow.children('th').attr("style");
    myHeaderRow.children('th').attr("style", styleToCopy);
  });

}

google.setOnLoadCallback（drawTable）；
函数drawTable（）{
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'Name'）；
data.addColumn（'number'，'Salary'）；
data.addColumn（'boolean'，'全职雇员'）；
data.addRows([
['Mike'，{v:10000，f:'10000'}，对]，
['Jim'，{v:8000，f:'8000'}，假]，
['Alice'，{v:12500，f:'12500'}，对]，
['Bob'，{v:7000，f:'7000'}，对]
]);
var table=新的google.visualization.table（document.getElementById（'table_div'）；
table.draw（数据，{showRowNumber:true，宽度：'100%，高度：'100%}）；
var tablehead='My header当然，我不希望有任何按“更高”级别列名排序的功能。优雅的解决方案，易于推广。+1谢谢！
google.setOnLoadCallback(drawTable);

function drawTable() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('number', 'Salary');
  data.addColumn('boolean', 'Full Time Employee');
  data.addRows([
    ['Mike',  {v: 10000, f: '$10,000'}, true],
    ['Jim',   {v:8000,   f: '$8,000'},  false],
    ['Alice', {v: 12500, f: '$12,500'}, true],
    ['Bob',   {v: 7000,  f: '$7,000'},  true]
  ]);

  var table = new google.visualization.Table(document.getElementById('table_div'));

  table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
  var tablehead ='<tr class="google-visualization-table-tr-head"><th class="google-visualization-table-th gradient unsorted" colspan="4">My Header</th></tr';
  var stuff = jQuery('#table_div').find('thead').prepend(tablehead);

  //Add scroll event handler to div enclosing table:
  var stuff = $('#playerTable_div').find('div').scroll(function(event) {
    //my custom header row is the first row in the thead section:
    var myHeaderRow = $('#playerTable_div').find('thead').children('tr');
    //the "stock" header row immediately follows mine:
    var stockHeaderRow = myHeaderRow.next('tr');
    //copy the stock th element's style to mine: 
    var styleToCopy = stockHeaderRow.children('th').attr("style");
    myHeaderRow.children('th').attr("style", styleToCopy);
  });

}