在Google線形圖上的線條註釋上添加圖像

Question

下面是創建折線圖的代碼。我正在嘗試在線條註釋的頂部添加圖像。這裏有一個演示jsfiddle。 下面是代碼：

google.charts.load('current', {packages: ['corechart', 'line']}); 
google.charts.setOnLoadCallback(drawBasic); 

function drawBasic() { 

     var data = new google.visualization.DataTable(); 

     data.addColumn('number', 'X'); 
     data.addColumn({type: 'string', role: 'annotation'}); 
     data.addColumn('number', 'Dogs'); 
     data.addColumn('number', 'Cats'); 

     data.addRows([ 
     [0,null, 0, 1], [1,'', 10,3], [2,null, 23,6], [3,null, 17,7], [4,null, 18,4], [5,null, 9,7] 
     ]); 

     var options = { 
     curveType : 'function', 
     hAxis: { 
      title: 'Time', 
      gridlines: { 
       color: 'transparent' 
      } 
     }, 
     vAxis: { 
      title: 'Popularity', 
      gridlines: { 
       color: 'transparent' 
      } 
     }, 
     annotations: { 
      style: 'line', 
      position: 'top' 
     } 
     }; 

     var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 

     chart.draw(data, options); 
    } 

我真的無法弄清楚如何做到這一點。任何人都曾經這樣做過？

Answer 1

添加'role': 'tooltip', 'p': {'html': true}});在your data.addColumn和 在options使用：tooltip: { isHtml: true }。

HTML：

<div id="chart"></div> 

的JavaScript：

function drawChart() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('number', 'y'); 
    data.addColumn('number', 'Line 1'); 
    data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}}); 
    data.addColumn('number', 'Line 2');  

    data.addRow([1, 1, '<img src="https://www.google.com/images/srpr/logo6w.png" style="width:30px;height:50px"/>', 2]); 
    data.addRow([2, 2,'<img src="https://www.google.com/images/srpr/logo6w.png" style="width:30px;height:50px"/>', 4]); 
    data.addRow([3, 3,'<img src="https://www.google.com/images/srpr/logo6w.png" style="width:30px;height:50px"/>', 6]); 
    data.addRow([4, 4,'<img src="https://www.google.com/images/srpr/logo6w.png" style="width:30px;height:50px"/>', 8]); 
    data.addRow([5, 5,'<img src="https://www.google.com/images/srpr/logo6w.png" style="width:30px;height:50px"/>', 10]); 

    var options = { 
     title: 'Graph', 
     hAxis: { 
      title: 'Time', 
      gridlines: { 
       color: 'transparent' 
      } 
     }, 
     vAxis: { 
      title: 'Popularity', 
      gridlines: { 
       color: 'transparent' 
      } 
     }, 
     annotations: { 
      style: 'line', 
      position: 'top' 
     }, 
     tooltip: {isHtml: true}, 
    }; 

    var chart = new google.visualization.LineChart(document.getElementById('chart')); 
    chart.draw(data, options); 
} 

google.load("visualization", "1", { 
    packages: ["corechart"] 
}); 

google.setOnLoadCallback(drawChart); 

見JsFiddle。

Answer 2

您可以添加元素的圖表，一旦'ready'事件觸發
（或'animationfinish'使用動畫時）

首先，需要找到註解，這將是<rect>元素

相似他們將有一個'width'的1

但他們會有不同的'fill'屬性
（記住這一點，如果有更多的樣式設置在annotations選項設置）

以下工作片斷找到註釋行，並增加了頂端

google.charts.load('current', { 
 
    callback: drawBasic, 
 
    packages: ['corechart'] 
 
}); 
 

 
function drawBasic() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('number', 'X'); 
 
    data.addColumn({type: 'string', role: 'annotation'}); 
 
    data.addColumn('number', 'Dogs'); 
 
    data.addColumn('number', 'Cats'); 
 
    data.addRows([ 
 
    [0, null, 0, 1], 
 
    [1, '', 10, 3], 
 
    [2, null, 23, 6], 
 
    [3, null, 17, 7], 
 
    [4, null, 18, 4], 
 
    [5, null, 9, 7] 
 
    ]); 
 

 
    var options = { 
 
    annotations: { 
 
     position: 'top', 
 
     style: 'line' 
 
    }, 
 
    hAxis: { 
 
     gridlines: { 
 
     color: 'transparent' 
 
     }, 
 
     title: 'Time' 
 
    }, 
 
    vAxis: { 
 
     gridlines: { 
 
     color: 'transparent' 
 
     }, 
 
     title: 'Popularity' 
 
    }, 
 
    }; 
 

 
    var container = document.getElementById('chart_div'); 
 
    var chart = new google.visualization.LineChart(container); 
 

 
    google.visualization.events.addListener(chart, 'ready', function() { 
 
    Array.prototype.forEach.call(container.getElementsByTagName('rect'), function(rect) { 
 
     if ((rect.getAttribute('width') === '1') && (rect.getAttribute('fill') === '#999999')) { 
 
     var xPos = parseFloat(rect.getAttribute('x')); 
 
     var yPos = parseFloat(rect.getAttribute('y')); 
 

 
     var whiteHat = container.appendChild(document.createElement('img')); 
 
     whiteHat.src = 'http://findicons.com/files/icons/512/star_wars/16/clone_old.png'; 
 
     whiteHat.className = 'whiteHat'; 
 

 
     // 16x16 (image size in this example) 
 
     whiteHat.style.top = (yPos - 8) + 'px'; 
 
     whiteHat.style.left = (xPos) + 'px'; 
 
     } 
 
    }); 
 
    }); 
 

 
    chart.draw(data, options); 
 
}

.whiteHat { 
 
    border: none; 
 
    position: absolute; 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>

圖像