Question

用户从

中选择后，每个表格行都有一个弹出窗口

google.visualization.events.addListener(table, 'select', function() {}

但默认的Google可视化表格行不会显示为可点击。

我希望它们显示为可点击的用户。所以我添加了这段代码没有运气。

var container = document.getElementById(divName);
var table = new google.visualization.Table(container);
table.draw(data, options);
google.visualization.events.addListener(table, 'ready', function() {
    container.getElementsByTagName('TR')[0].html = '<a href="#" />';
    console.log("table ready");
});

即使控制台也无法打印任何内容。任何帮助都会得到满足。

Answer 1

如果您只是希望当用户悬停行时光标变为手您可以在图表div

上使用css

#chart_div tr {
  cursor: pointer;
}

你也可以使用图表的cssClassNames选项并指定那种方式的CSS 唯一的问题是你失去了图表的默认css，
所以必须提供的不仅仅是cursor

如果要显示“超链接”，可以更改第一个单元格的文本但是您无法将整行包装在锚标记<a>

中

请参阅以下工作代码段，其中包含两个...

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Month', '2015', '2016'],
      ['Jan', 10, 15],
      ['Feb', 12, 18],
      ['Mar', 14, 21],
      ['Apr', 16, 24]
    ]);

    var container = document.getElementById('chart_div');
    var chart = new google.visualization.Table(container);

    google.visualization.events.addListener(chart, 'ready', function () {
      var tableRows = container.getElementsByTagName('tbody')[0].rows;
      // change first cell to link
      Array.prototype.forEach.call(tableRows, function(row) {
        row.cells[0].innerHTML = '<a href="#">' + row.cells[0].innerHTML + '</a>';
      });
    });

    chart.draw(data, {
      allowHtml: true
    });
  },
  packages: ['table']
});

#chart_div tr {
  cursor: pointer;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

通过链接谷歌可视化表包装每一行

1 个答案: