将图像放置在 Google 可视化表格单元格中答案

【问题标题】：place an image inside a Google Visualization Table cell将图像放置在 Google 可视化表格单元格中
【发布时间】：2014-03-05 19:44:00
【问题描述】：

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

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

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

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

【问题讨论】：

标签： google-visualization google-datatable

【解决方案1】：

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

【讨论】：

太棒了，谢谢。仅供参考，您必须用单引号将 HTML 括起来才能使其正常工作。它看起来很奇怪，但它似乎有效。
这并不是说你必须用单引号括起来，这取决于你在 HTML 内部使用的引号 - 你可以在外面使用单引号，在里面使用双引号，或者在外面使用双引号和单引号内部，或者您可以转义内部引号。例如，这些都是有效的：'<img src="foo.jpg" />'、"<img src='foo.jpg' />"、"<img src=\"foo.jpg\" />"。

【解决方案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>

【讨论】：