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你爲我開始了！