将图像添加到Google可视化图表
如何在Google可视化图表中添加图片？
下面是我正在尝试的脚本
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,0,0,12,0,0), new Date(0,0,0,12,3,0) ],
[ 'President', '<img class="devsite-avatar" src="http://i.stack.imgur.com/FVDLV.jpg?s=32&g=1">John Adams', new Date(0,0,0,12,3,3), new Date(0,0,0,12,14,0) ],
[ 'President', 'Thomas Jefferson', new Date(0,0,0,12,15,1), new Date(0,0,0,12,28,0) ],
[ 'President', '', new Date(0,0,0,13,0, 0), new Date(0,0,0,13,0,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>看起来， allowHTML选项不支持google.visualization.Timeline对象，但是一旦图表呈现如下，您可以考虑自定义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', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4)],
['President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4)],
['President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 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>