Google Charts：如何创建具有分组列名称的表？

Question

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

在这个例子中，我想将“组1”和“组2”移动到“更高”的水平;所以左桌最终会像右桌一样。

我已经通过文件阅读，并没有发现这个参考。可能吗？如果是的话，什么是好方法？谢谢。

Answer 1

什么这样的事情（使用jQuery的），你可以为自己的定制需求修改：

https://jsfiddle.net/7tq6sdwc/

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

    } 

结果：

Answer 2

我提交这是一个答案，因为我没有足够的声望发表评论，尽管这真的是评论@KevinBro的答案wn：

首先，这太棒了！我会赞成，但又缺乏代表，所以为了它的价值，+1。

但是有一个小错误 - 如果表的大小足够大以至于无法移动滚动条，那么添加的标题将与行一起滚动而不是保持放置状态。我看到“股票”头获得动态调整的style="top: 40px;"顶部是在一个滚动通过表时更改。到目前为止，我还没有能够获得添加的标题来做同样的事情。如果我知道了，我会在这里发布，除非有人在我面前得到它！

知道了： 您需要捕获表格上的滚动事件，然后将库存标题行的样式属性复制到标题行。有可能是一个更优雅的和/或可靠的方法，但是这是在做什么工作对我来说：

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

} 

感谢@Kevin你为我开始了！