Question

我有一个以表格形式显示数据的页面。我使用谷歌图表，这是代码：

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
      google.load("visualization", "1", {packages:["table"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
         ['Task', 'Hours per Day', 'Test', 'Hours per Day', 'Test'],
          ['Work',     11, 12, 11, 12],
          ['Eat',      2, 13, 2, 13],
          ['Commute',  2, 15, 2, 34],
          ['Watch TV', 2, 17, 7, 24],
          ['Sleep',    7, 18, 2, 13]
        ]);

       var chart = new google.visualization.Table(document.getElementById('tablechart'));
       chart.draw(data);
      }
    </script>
<div id="tablechart" style="width: 700px; height: 400px; position: relative;"></div>

这是一个有效的JS FIDDLE：https://jsfiddle.net/alex4uthis/kt21bf0k/

我想获得以下格式：

（我想将Jan和Feb合并在图像中）请指教......

Answer 1

完成绘图后，您可以使用'ready'事件手动更改图表。

Google图表中没有可用的选项来添加其他标题行这使得这个答案有点像黑客。

无论如何，图表本身是一个普通的TABLE元素

这是一个简单的例子，我根据提供给图表的数据做出假设其他因素也可能需要考虑例如，当存在滚动条并且标题行保持固定时，将有第二个标题行来处理。最后我还是检查了......

这种方法应该可以很好地给出一个简单的表格图表我已经使用这种方法在底部添加总行等...

我使用cloneNode来确保新行与图表的其余部分具有相同的样式。

＆＃13;

google.load('visualization', '1', {packages:['table'], callback: drawChart});

function drawChart() {
  var divTableChart;

  divTableChart = document.getElementById('tablechart');

  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day', 'Task', 'Hours per Day'],
    ['Work',     11, 'Work', 12],
    ['Eat',      2, 'Work', 13],
    ['Commute',  2, 'Work', 34],
    ['Watch TV', 2, 'Work', 24],
    ['Sleep',    7, 'Work', 13]
  ]);

  var chart = new google.visualization.Table(divTableChart);

  google.visualization.events.addListener(chart, 'ready', function () {
    var headerRow;
    var newRow;

    // get header row and clone to keep google chart style
    headerRow = divTableChart.getElementsByTagName('THEAD')[0].rows[0];
    newRow = headerRow.cloneNode(true);

    // modify new row to combine cells and add labels
    newRow.deleteCell(newRow.cells.length - 1);
    newRow.deleteCell(newRow.cells.length - 1);
    newRow.cells[0].colSpan = 2;
    newRow.cells[0].innerHTML = 'Jan';
    newRow.cells[1].colSpan = 2;
    newRow.cells[1].innerHTML = 'Feb';

    // insert new / cloned row
    divTableChart.getElementsByTagName('THEAD')[0].insertBefore(newRow, headerRow);
  });

  chart.draw(data);
}

＆＃13;

<script src="https://www.google.com/jsapi"></script>
<div id="tablechart"></div>

＆＃13;

Google表格合并列

1 个答案: