Adding images to google visualization chart

How can i add images in google visualization chart.

Below is the script which i am trying

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>

链接地址: http://www.djcxy.com/p/86230.html

上一篇: PDF.js使用滚动条呈现pdf

下一篇: 将图像添加到Google可视化图表