html - 将图像添加到谷歌可视化图表

Question

我如何在谷歌可视化图表中添加图像。

下面是我正在尝试的脚本

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>

请帮助我理解我在这里缺少的东西。

Answer 1

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', '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>