通过链接谷歌可视化表格来包装每一行 [英] wrap each row by link google visualization table

问题描述

  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 =＃/> gt ;'; 
 console.log（table ready）; 
}）; 
  

解决方案

如果您只想将光标更改为一个当用户将行悬停在$ b $行时b可以在图表上使用css div

  #chart_div tr { 
光标：指针; 
} 
  

您也可以使用图表的 cssClassNames 选项，并指定css的方式

唯一的问题是你失去了图表的默认css，

所以必须提供的不仅仅是游标

如果您想要显示超链接，您可以更改第一个单元格的文本

，但是您无法将整行记录在锚标记中< 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（图表'ready'，function（）{var tableRows = container.getElementsByTagName（'tbody'）[0] .rows; //将第一个单元格改为链接Array.prototype.forEach.call table row，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;}  

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

I have a pop windows for every table row once they selected by user from

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

But default google visualization table rows not display as clickable.

I want them to display as clickable to users. So I added this code with no luck.

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");
}); 

Even console not print anything. Any help would be appriciated.

解决方案

if you just want the cursor to change to a hand when the user hovers the row
you can use css on the chart div

#chart_div tr {
  cursor: pointer;
}

you could also use the chart's cssClassNames option and assign the css that way
only problem there is you lose the chart's default css,
so have to supply more than just cursor

if you want a 'hyperlink' to show, you can change the text of the first cell
but you cannot wrap entire rows in an anchor tag <a>

see following working snippet, which incorporates both...

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>

这篇关于通过链接谷歌可视化表格来包装每一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！