Javascript 将HTML链接添加到Google图表表_Javascript

Javascript 将HTML链接添加到Google图表表

javascript

Javascript 将HTML链接添加到Google图表表,javascript,Javascript,我正在尝试向Google图表表列添加一个HTML链接。我为列和表设置了setHTML:true，但它只是显示HTML代码，而不是解释它。有人能给我指出正确的方向吗谢谢  <!DO

我正在尝试向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>


谷歌可视化API示例
load（'visualization'，'1'，{packages:['table']}）；
函数drawVisualization（）{
//创建并填充数据表。
var data=google.visualization.arrayToDataTable([
['Name'，'已登录']，
[“第2项”]，
]);
setColumnProperty（0，{allowtml:true}）；
//创建并绘制可视化。
可视化=新的google.visualization.Table（document.getElementById（'Table'）；
绘制（数据，{allowtml:true}）；
}
setOnLoadCallback（drawVisualization）；

allowHTML属性区分大小写。它必须是{allowtml:true}。

您应该使用

如果将值替换为HTML，则排序将无法正常工作。

在

可视化=新建google.visualization.Table…

和

可视化.draw（数据，{allowtml:true}）

之间，添加一个新类，以格式化列：

示例：在这里，我们使用第三列中给出的URL链接包含网站名称的第一列，然后在第三列中链接URL字符串本身。列的索引不是data.table中的实际索引，而是相对于

.format（data，[，]）

的，后者是在声明变量以格式化列之后指定的

//包含网站标题的超链接列
var format_name=新的google.visualization.PatternFormat(
'');
//超链接URL列
var format_url=new google.visualization.PatternFormat(
'');
//应用格式化程序
//提取format_name变量的前三列（或0和2）
格式_name.format（数据[0,1,2]）；
//提取format_url变量的第三列
format_url.format（数据，[2]）；
//使用DataView为data.table创建只读视图
var view=newgoogle.visualization.DataView（数据）；
//对data.table源使用视图而不是原始数据
draw.draw（视图，{allowtml:true}）；

您能详细说明一下吗？

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