谷歌交互式图表与图像自定义html工具提示
Google Interactive Charts with images as custom html tooltip
好吧,我是新手,所以请原谅我。我试图创建一个谷歌交互式折线图与自定义的HTML工具提示,从网络周围的其他来源的图像。但我不能让它工作;它甚至不会出现。这是我目前所做的(由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}
如果这不能解决问题,也试着把你的回调调到load:
google.load('visualization', '1', {"callback" : drawChart, 'packages': ["corechart"]});
//google.setOnLoadCallback(drawChart);
相关文章:
- 如何使用Node/Express显示有关特定错误的自定义html页面
- 自定义HTML元素属性未显示-Web组件
- 如何使用ReSharper自定义HTML工具进行JavaScript测试
- 如何访问自定义 HTML 属性
- AngularJS将变量绑定到自定义html属性
- 自定义HTML Shiv的缺点
- 将 d3 演示中的圆圈和文本替换为包含自定义 HTML 和 ko 绑定的 foreignObject
- Wordpress:添加自定义HTML文件
- 使用带有自定义HTML元素的图像usemap
- jQuery使用自定义select()自动完成:自定义HTML中的超链接
- 在递归循环javascript之后,为JSON键变量使用自定义HTML元素
- 如果JavaScript标签是通过谷歌标签管理器插入到页面上的,那么它们的延迟程度是多少;s的自定义HTML
- 如何在没有代码隐藏访问权限的情况下将自定义 HTML 属性添加到 ASP.NET 标签
- 将自定义 HTML 元素与本机元素区分开来
- 如何使用自定义 html 标记来告诉脚本将 html 放在哪里
- 如何在 JSP 中读取 jsp 内部的值打印(作为自定义 HTML 标记)更改事件
- React JSX 中的自定义 HTML 元素标记
- 无法识别流星自定义 HTML 标记
- 使用自定义 html 打印高库存
- Ryan Fait 自定义 HTML 表单和新添加的元素