将HTML链接添加到Google图表表
Add HTML Link to Google Charts Table
我正在尝试向Google图表表列添加一个HTML链接。我为列和表都设置了setHTML:true,但它只是显示HTML代码,而不是解释它。有人能给我指明正确的方向吗?
感谢
<!--
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>
allowHTML属性区分大小写。它必须是{allowHtml:true}。
您应该使用格式化程序。
如果将值替换为HTML,则排序将无法正常工作。
在visualization = new google.visualization.Table...
和visualization.draw(data, {allowHtml: true})
之间,添加一个新类DataView以格式化列:
示例:在这里,我们超链接包含网站名称的第一列,第三列给出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});
相关文章:
- 如何在Google柱状图中动态添加行/列
- 使用Google Maps API向标记添加多个字符
- 在Google Chrome扩展中添加事件侦听器
- 将Google AdWords转换跟踪(javascript)代码添加到PrestaShop/Smarty页面中
- 如何在Google Geochart图表的工具提示文本中添加新行
- 将Google Adwords脚本添加到Vaadin应用程序中
- 仅将元素附加到页面的正文标签,而不添加到iframe facebook、google+、twister
- 如何将waze事件标记添加到带有流量的google地图javascript API生成的地图
- 将Google Analytics添加到空网站
- 在同一网页上添加多个 Google 地点实例
- 如何使用Google Analytics添加自定义事件跟踪
- 如何在不添加html脚本标记的情况下使用google-maps-api-v3
- 访问MySQL数据库,使用JavaScript在Google Maps API V3上添加标记
- 添加<a>元素添加到使用Apps脚本的Google文档中
- 添加“;密码”;键入Google Apps Script inputBox
- 在Google Analytics和Google Tag Manager中添加此共享事件
- 使用Knockout.js的数组方法将地图标记添加到Google地图
- 将信息框作为HTML标签属性(AngularJS)添加到Google Maps Marker
- 添加用于在 Google 地图 API v3 中打开信息窗口的链接
- 使用 jquery 复制 Google+ “添加评论”效果