javascript 将 HTML 链接添加到 Google 图表表格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14343468/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add HTML Link to Google Charts Table
提问by Michael Shnitzer
I'm trying to add an HTML link to a Google Chart Table column. I have setHTML: true for both the column and the table, but its just showing the HTML code instead of interpreting it. Can someone point me in the right direction?
我正在尝试将 HTML 链接添加到 Google 图表表格列。我已经 setHTML: true 列和表，但它只是显示 HTML 代码而不是解释它。有人可以指出我正确的方向吗？
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>
?
回答by Michael Shnitzer
The allowHTML property is case sensitive. It has to be {allowHtml: true}.
allowHTML 属性区分大小写。它必须是 {allowHtml: true}。
回答by Rafal Enden
You should use formatters.
你应该使用格式化程序。
If you replace value with HTML then sorting will not work properly.
如果您用 HTML 替换值，则排序将无法正常工作。
回答by Samir
Between visualization = new google.visualization.Table...and visualization.draw(data, {allowHTML: true}), add a new class, DataViewto 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. 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 columns1.
示例：在这里，我们将包含网站名称的第一列与第三列中给出的 URL 超链接，然后在第三列中超链接 URL 字符串本身。列索引不是 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});
