[英]Google Interactive Charts with images as custom html tooltip
Okay so I'm really new at this, so please bear with me. 好吧,我真的很陌生,所以请耐心等待。 I'm trying to create a Google interactive line chart with custom HTML tooltips that are images from other sources around the web.
我正在尝试使用自定义HTML工具提示创建Google交互式折线图,这些提示是来自网络上其他来源的图像。 But I can't get this to work;
但是我无法使它起作用。 it won't even show up.
它甚至不会显示。 This is what I have so far (guided by developers.google.com):
到目前为止,这是我所拥有的(由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>
I know I'm probably doing something completely wrong. 我知道我可能在做完全错误的事情。 I would appreciate someone's help.
我会感谢某人的帮助。 Thank you!
谢谢!
This is an error: 这是一个错误:
tooltip. {isHtml: true}
should be: 应该:
tooltip: {isHtml: true}
If that doesn't fix the issue, also try moving your callback into the load: 如果那不能解决问题,请尝试将回调移至负载中:
google.load('visualization', '1', {"callback" : drawChart, 'packages': ["corechart"]});
//google.setOnLoadCallback(drawChart);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.