將HTML鏈接添加到Google Charts表

Question

我正在嘗試將HTML鏈接添加到Google Chart Table列。 我有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>

Answer 1

allowHTML屬性區分大小寫。 它必須是{allowHtml：true}。

Answer 2

你應該使用格式化程序。

如果用HTML替換值，那么排序將無法正常工作。

Answer 3

在visualization = new google.visualization.Table...和visualization.draw(data, {allowHTML: true}) ，添加一個新類DataView來格式化列：

示例：在這里，我們將包含網站名稱的第一列與第三列中給出的URL進行超鏈接，然后在第三列中超鏈接URL字符串本身。 列的索引不是data.table中的實際索引，而是相對於.format(data, [,]) ，它是在聲明變量以格式化列¹之后指定的。

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

將HTML鏈接添加到Google Charts表

問題描述

3 個解決方案

解決方案1
13 已采納 2013-01-15 17:40:09

解決方案2
2 2015-03-31 14:05:51

解決方案3
1 2018-02-03 05:40:21

將HTML鏈接添加到Google Charts表

問題描述

3 個解決方案

解決方案1 13 已采納 2013-01-15 17:40:09

解決方案2 2 2015-03-31 14:05:51

解決方案3 1 2018-02-03 05:40:21

解決方案1
13 已采納 2013-01-15 17:40:09

解決方案2
2 2015-03-31 14:05:51

解決方案3
1 2018-02-03 05:40:21