將圖像添加到Google可視化圖表

Question

如何在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) ] 
 
\t 
 
\t ]); 
 

 
    var options = { 
 
    timeline: { groupByRowLabel: true }, 
 
\t allowHTML: true, 
 
\t 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>

請幫我瞭解我在這裏失蹤的腳本。

Answer 1

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