Google 图表：如何创建包含分组列名称的表格？

Question

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

在此示例中，我想将 "Group 1" 和 "Group 2" 移动到 'higher' 级别；所以左边的 table 最终会像右边的 table.

我已通读文档，但未找到相关参考。可能吗？如果是，什么是好的方法？谢谢

Answer 1

像这样的呢（使用jQuery），你可以根据自己的自定义需求修改：

 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: ',000'}, true],
      ['Jim',   {v:8000,   f: ',000'},  false],
      ['Alice', {v: 12500, f: ',500'}, true],
      ['Bob',   {v: 7000,  f: ',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

我将此作为答案提交，因为我没有足够的声誉来发表评论，尽管它实际上是@KevinBrown 对答案的评论：

首先，这太棒了！我会投票，但再次缺乏代表，所以对于它的价值，+1。

有一个小错误，但是 - 如果 table 足够大以获得滚动条，添加的 header 会随行滚动而不是保持原样。我看到 "stock" header 得到一个 dynamically-adjusted style="top: 40px;"，当滚动浏览 table 时顶部会发生变化。到目前为止，我还无法让添加的 header 执行相同的操作。如果我弄明白了，我会 post 在这里，除非有人比我先弄明白！

知道了：您需要在 table 上捕获滚动事件，然后将库存 header 行的样式属性复制到您的 header 行。可能有更优雅的 and/or 稳健的方式，但目前这对我有用：

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: ',000'}, true],
    ['Jim',   {v:8000,   f: ',000'},  false],
    ['Alice', {v: 12500, f: ',500'}, true],
    ['Bob',   {v: 7000,  f: ',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 让我开始！

Google 图表：如何创建包含分组列名称的表格？

Google Charts: How to create tables with grouped columns names?

javascript

data-visualization

google-visualization