Question

我正在尝试使用多行标头创建DataTable。我在这里举例说明：

|               2008           |           2009          |
---------------------------------------------------------
|    price      |   qty.       |    price    |   qty     |
---------------------------------------------------------
|     93993     |  34434       |     34244   |   3434    |
.....

年份标题可以修复，因为我不想按此排序。有没有办法在Google可视化中实现这一目标？

更新

使用JS附加它不起作用，并且在完成排序时它将消失。

$(".google-visualization-table-table").prepend("<tr class='google-visualization-table-tr-head'><td colspan='4'>something</tr>");

Answer 1

似乎无法在googleVisualizations中执行此操作，因此我使用DataTables进行了此操作。

Answer 2

尝试在列标签中使用html表格，并在选项中设置 allowHtml：true 。

以下是一个示例解决方法，（不是您的确切要求）。这可能会为您提供构建它的一些见解。

<html>
  <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
      google.load('visualization', '1', {packages:['table']});
      google.setOnLoadCallback(drawTable);
      function drawTable() {
        var data = new google.visualization.DataTable();
        data.addColumn('number', '<table align="center" width="100%"><tr><td colspan="2">Year1</td></tr> <tr><td>price</td> <td>qty</td></tr></table>');
        data.addColumn('number', '<table align="center" width="100%"><tr><td colspan="2">Year2</td></tr> <tr><td>price</td> <td>qty</td></tr></table>');
        data.addRow([{v: 1, f: '<table align="center" width="100%"><tr><td>93993</td> <td>34434</td></tr></table>'},
                     {v: 2, f: '<table align="center" width="100%"><tr><td>34244</td> <td>3434</td></tr></table>'} ]);
        data.addRow([{v: 2, f: '<table align="center" width="100%"><tr><td>93995</td> <td>34435</td></tr></table>'},
                     {v: 2, f: '<table align="center" width="100%"><tr><td>34245</td> <td>3435</td></tr></table>'} ]);
        var table = new google.visualization.Table(document.getElementById('table_div'));
        table.draw(data, {showRowNumber: true, allowHtml:true });
         }
      </script>
  </head>

  <body>
    <div id='table_div'></div>
  </body>
</html>

Answer 3

您可以在表的排序行（行= 0）上点击事件后预先/附加它吗？

Answer 4

如果该选项可用，您可以禁用排序。要禁用排序，请将'sort': 'disable'传递给draw()方法。

Google Visualizations上的多行标题

4 个答案: