在Google可视化表格单元格内放置图像

Question

我正在试验Google的可视化表格的表格和示例代码。

https://google-developers.appspot.com/chart/interactive/docs/gallery/table

不过，我需要能够利用细胞内的图像（通过URL）。看来AddColumn功能只支持string,number,boolean,date,datetime和timeofday类型每datatabledocumentation。

有没有办法解决这个问题或者我错过了能够将Web图像插入某些单元格的内容？

Answer 1

您必须使用包含HTML的“字符串”类型列来创建<img>标签。然后在表的选项中，您需要将allowHtml选项设置为true。

Answer 2

下面的代码说明：

1.how“图像”具有与类型“字符串”来传递，

2.how“IMG”标签可以被包括在JavaScript和图像可被传递作为源代码，

3.如何使allowHtml属性为true。

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
 
    <script type="text/javascript" src="//www.google.com/jsapi"></script> 
 

 
    <script type="text/javascript"> 
 
     google.charts.load('current', {'packages':['corechart']}); 
 
     
 
     google.load('visualization', '1', {packages:['table']}); 
 
     google.charts.setOnLoadCallback(imgInTable); 
 

 
\t \t function imgInTable() 
 
\t \t { 
 
\t \t \t var data = new google.visualization.DataTable(); 
 
\t \t 
 
\t \t \t data.addColumn('string', 'Politician'); 
 
\t \t \t /*HTML Tag is enclosed in quotes. Therefore it has to be of string datatype*/ 
 
\t \t \t data.addColumn('string', 'Criminal Cases'); 
 
\t \t \t data.addRows([ 
 
\t \t \t \t ['P1', "<img src='16.PNG'>"] 
 
\t \t \t \t ]); 
 

 

 
\t \t \t /*img_div is the id of the div element in the html code where you want to place the table*/ 
 
\t \t \t var table = new google.visualization.Table(document.getElementById('img_div')); 
 
\t \t \t /*allowHtml: true is must for img tag to work*/ 
 
\t \t \t table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'}); 
 
\t \t } 
 
</script>