Question

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

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

但是，我需要能够在单元格内使用图像（通过URL）。似乎AddColumn函数仅支持string，number，boolean，date，datetime和timeofday类型datatable documentation。

有没有办法绕过这个或我缺少的东西能够将网络图像插入某些单元格？

Answer 1

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

Answer 2

以下代码说明：

1.how＆＃34; Image＆＃34;必须以类型＆＃34;字符串＆＃34;，

传递

2.how＆＃34; img＆＃34;标签可以包含在javascript中，图像可以作为src传递，

3.如何使allowHtml属性为真。

＆＃13;

<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);

		function imgInTable()
		{
			var data = new google.visualization.DataTable();
		
			data.addColumn('string', 'Politician');
			/*HTML Tag is enclosed in quotes. Therefore it has to be of string datatype*/
			data.addColumn('string', 'Criminal Cases');
			data.addRows([
				['P1', "<img src='16.PNG'>"]
				]);


			/*img_div is the id of the div element in the html code where you want to place the table*/
			var table = new google.visualization.Table(document.getElementById('img_div'));
			/*allowHtml: true is must for img tag to work*/
			table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});
		}
</script>

＆＃13;

将图像放在Google Visualization Table单元格中

2 个答案: