google-visualization - 将图像放置在 Google 可视化表格单元格中

Question

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

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

但是，我需要能够在单元格内使用图像（通过 URL）。似乎该AddColumn函数仅支持文档string中的, number, boolean, date,datetime和timeofdaytypes 。datatable

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

Answer 1

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

Answer 2

以下代码说明：

1.“图像”必须以“字符串”类型传递，

2.如何将“img”标签包含在javascript中，图像可以作为src传递，

3.如何使allowHtml属性为真。

<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>