Google Visualizations 上的多行标题

发布于 2024-10-12 02:56:20 字数 641 浏览 6 评论 0原文

我正在尝试创建一个具有多行标题的数据表。我将在这里举例：

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

年份标题可以修复，因为我不想按此进行排序。有没有办法在谷歌可视化中做到这一点？

更新

用JS附加它不起作用，排序完成后它会消失。

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

原文

I am trying to create a DataTable with a multi row header. I'll exemplify here:

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

The years headers can be fixed as I don't want to do sorting by that.
Is there a way to do that in Google Visualizations?

Update

Attaching it with JS does NOT work, and it will disappear when sorting is done.

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

甚是思念 2024-10-19 02:56:20

看来它不能在 googleVisualizations 中完成，所以我使用 DataTables 完成了它。

回复收藏 0 原文

九歌凝 2024-10-19 02:56:20

尝试在列标签中使用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>

Try using html table in Column Label and setting allowHtml:true in options.

Here is a sample work around,(not the exact requirement for you).
This may give you some insights to build it.

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

回复收藏 0 原文