![](/img/trans.png)
[英]Google Charts - Getting default content mixed in with custom HTML for tooltip
[英]Google Interactive Charts with images as custom html tooltip
好吧,我真的很陌生,所以請耐心等待。 我正在嘗試使用自定義HTML工具提示創建Google交互式折線圖,這些提示是來自網絡上其他來源的圖像。 但是我無法使它起作用。 它甚至不會顯示。 到目前為止,這是我所擁有的(由developers.google.com指導):
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"> </script>
<script type="text/javascript">
// Load the Visualization API and the chart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', 'Date');
dataTable.addColumn('number', 'Slices');
dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
dataTable.addRows([
['January 1, 2015', 3, '<img width=100px src="https://upload.wikimedia.org/wikipedia/commons/2/28/Flag_of_the_USA.svg">'],
['January 2, 2015', 2, '<img width=100px src="https://upload.wikimedia.org/wikipedia/commons/2/28/Flag_of_the_USA.svg">'],
['January 3, 2015', 5, '<img width=100px src="https://upload.wikimedia.org/wikipedia/commons/2/28/Flag_of_the_USA.svg">'],
['January 4, 2015', 4, '<img width=100px src="https://upload.wikimedia.org/wikipedia/commons/2/28/Flag_of_the_USA.svg">'],
['January 5, 2015', 2, '<img width=100px src="https://upload.wikimedia.org/wikipedia/commons/2/28/Flag_of_the_USA.svg">']
]);
// Set chart options
var options = {
tooltip. {isHtml: true},
focusTarget: 'category',
'title':'How Much Pizza I Ate',
'width':900,
'height':400,
legend: { position: 'bottom' }
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(dataTable, options);
}
</script>
</head>
我知道我可能在做完全錯誤的事情。 我會感謝某人的幫助。 謝謝!
這是一個錯誤:
tooltip. {isHtml: true}
應該:
tooltip: {isHtml: true}
如果那不能解決問題,請嘗試將回調移至負載中:
google.load('visualization', '1', {"callback" : drawChart, 'packages': ["corechart"]});
//google.setOnLoadCallback(drawChart);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.