如何在谷歌可视化图表中添加图像.
下面是我正在尝试的脚本
google.setonLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example4.2');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string',id: 'Role' });
dataTable.addColumn({ type: 'string',id: 'Name' });
dataTable.addColumn({ type: 'date',id: 'Start' });
dataTable.addColumn({ type: 'date',id: 'End' });
dataTable.addRows([
[ 'President','George Washington',new Date(0,12,0),3,0) ],[ 'President','<img class="devsite-avatar" src="http://i.stack.imgur.com/FVDLV.jpg?s=32&g=1">John Adams',3),14,'Thomas Jefferson',15,1),28,'',13,0) ]
]);
var options = {
timeline: { groupByRowLabel: true },allowHTML: true,avoidOverlappingGridLines: false
};
chart.draw(dataTable,options);
}
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['timeline']}]}"></script>
<div id="example4.2" style="height: 200px;"></div>
请帮助我理解我在这里缺少的东西.
解决方法
似乎google.visualization.Timeline对象不支持allowHTML选项,但是您可以考虑在呈现图表后自定义SVG(在此示例中将图像插入到条形图中),如下所示：
google.load('visualization','1.0',{
'packages': ['timeline','annotatedtimeline']
});
google.setonLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example4.2');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string',id: 'Role' });
dataTable.addColumn({ type: 'string',id: 'Name' });
dataTable.addColumn({ type: 'date',id: 'Start' });
dataTable.addColumn({ type: 'date',id: 'End' });
dataTable.addRows([
['President',new Date(1789,30),new Date(1797,2,4)],['President','John Adams',4),new Date(1801,new Date(1809,4)]]);
var options = {
timeline: { groupByRowLabel: false}
};
chart.draw(dataTable,options);
configureChart();
}
function configureChart() {
var chartContainer = document.getElementById('example4.2');
var svg = chartContainer.getElementsByTagName('svg')[0];
var barLabels = svg.querySelectorAll("text[text-anchor='start']");
for (var i = 0; i < barLabels.length; i++) {
if (barLabels[i].innerHTML == "George Washington") {
var bararea = barLabels[i].prevIoUsSibling;
var x = bararea.getAttribute('x');
var y = bararea.getAttribute('y');
var presidentIcon = createImage({ href: 'https://upload.wikimedia.org/wikipedia/commons/e/e4/LaWrence_Washington.jpg',x: x,y: y,width: 20,height: 20 });
bararea.parentElement.appendChild(presidentIcon);
barLabels[i].setAttribute('x',parseFloat(x) + 20);
}
}
}
function createImage(options) {
var image = document.createElementNS('http://www.w3.org/2000/svg','image');
image.setAttributeNS(null,'height',options.height);
image.setAttributeNS(null,'width',options.width);
image.setAttributeNS('http://www.w3.org/1999/xlink','href',options.href);
image.setAttributeNS(null,'x',options.x);
image.setAttributeNS(null,'y',options.y);
image.setAttributeNS(null,'visibility','visible');
return image;
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script> <div id="example4.2" style="height: 600px;"></div>