Thêm hình ảnh vào biểu đồ trực quan của google

Question

Làm cách nào tôi có thể thêm hình ảnh vào biểu đồ trực quan hóa của google.

Dưới đây là kịch bản mà tôi đang cố gắng

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>

Xin hãy giúp tôi hiểu những gì tôi đang mất tích ở đây.

Answer 1

Dường như allowHTML tùy chọn không được hỗ trợ cho google.visualization.Timeline đối tượng, nhưng bạn có thể xem xét để tùy chỉnh SVG (hình ảnh chèn vào thanh trong ví dụ này) một lần biểu đồ được trả lại như chứng minh dưới đây:

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>