将HTML链接添加到Google Charts表
[英]Add HTML Link to Google Charts Table
问题描述
I'm trying to add an HTML link to a Google Chart Table column. 
我正在尝试将HTML链接添加到Google Chart Table列。 I have setHTML: true for both the column and the table, but its just showing the HTML code instead of interpreting it. 我有setHTML：对于列和表都是true，但它只显示HTML代码而不是解释它。 Can someone point me in the right direction? 有人能指出我正确的方向吗？
Thanks 谢谢
<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['table']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Name', 'Logged In'],
['<a href="LINK">Item 1</a>', 'Item 2'],
]);
data.setColumnProperty(0, {allowHTML: true});
// Create and draw the visualization.
visualization = new google.visualization.Table(document.getElementById('table'));
visualization.draw(data, {allowHTML: true});
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="table"></div>
</body>
</html>
3 个解决方案
解决方案1
13 已采纳 2013-01-15 17:40:09
The allowHTML property is case sensitive. allowHTML属性区分大小写。 It has to be {allowHtml: true}. 它必须是{allowHtml：true}。
解决方案2
2 2015-03-31 14:05:51
You should use formatters . 你应该使用格式化程序 。
If you replace value with HTML then sorting will not work properly. 如果用HTML替换值，那么排序将无法正常工作。
解决方案3
1 2018-02-03 05:40:21
Between visualization = new google.visualization.Table... and visualization.draw(data, {allowHTML: true}) , add a new class, DataView to format column(s): 在visualization = new google.visualization.Table...和visualization.draw(data, {allowHTML: true}) ，添加一个新类DataView来格式化列：
Example: Here, we hyperlink first column containing website name with URL given in the third column, and then hyperlink URL string itself in the third column. 示例：在这里，我们将包含网站名称的第一列与第三列中给出的URL进行超链接，然后在第三列中超链接URL字符串本身。 Index of columns are NOT the actual one in data.table but are relative to .format(data, [,]) which is specified after declaring variables to format columns 1 . 列的索引不是data.table中的实际索引，而是相对于.format(data, [,]) ，它是在声明变量以格式化列1之后指定的。
// hyperlink column containing website title
var format_name = new google.visualization.PatternFormat(
'<a href="{2}">{0}</a>');
// hyperlink URL column
var format_url = new google.visualization.PatternFormat(
'<a href="{0}">{0}</a>');
// apply formatters
// extract first three columns (or 0 and 2) for format_name variable
format_name.format(data, [0,1,2]);
// extract the third column for format_url variable
format_url.format(data, [2]);
// Use DataView to create read-only view for data.table
var view = new google.visualization.DataView(data);
// Use view instead of original data for data.table source
visualization.draw.draw(view, {allowHTML: true});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.