通过链接谷歌可视化表

问题描述：

包裹每一行我对每个表行一个弹出窗口，一旦用户从通过链接谷歌可视化表

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

但默认情况下谷歌的可视化表中的行不显示为可点击选择。

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

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

即使控制台不打印任何东西。任何帮助将被appriciated。

答

如果你只想当用户将鼠标悬停
您可以使用CSS图表上div

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

它的工作。谢啦。！ –

通过链接谷歌可视化表

相关推荐