将一个谷歌图表添加到FusionTableLayer infowindow [英] Add a google chart to a FusionTableLayer infowindow
问题描述
我试图在InfoWindow（Fusion Table图层）内显示图表（Google Chart API），但问题出在容器未收回错误：容器为空或未定义。每当我尝试在InfoWindow中包含div时。
我试图解决基于这个解决方案的问题，但它并不适用于融合表
使用Google Maps API添加谷歌图表到信息窗口
请帮忙
< script type =text / javascript>
google.load（'visualization'，'1'，{packages：['corechart']}）;
函数drawVisualization（）{
var queryText = encodeURIComponent（SELECT Year，Austria，Bulgaria，Denmark，Greece FROM 641716）;
google.visualization.drawChart（{
containerId：'visualization_div'，
dataSourceUrl：'https://www.google.com/fusiontables/gvizdata?tq='，
query：SELECT Year，Austria，Bulgaria，Denmark，Greece FROM 641716，
refreshInterval：5，
chartType：PieChart，
选项：{
title：按国家的每年咖啡消费量，
vAxis：{title：Year}，
hAxis：{title ：杯}
}
}）;
}
函数initialize（）{
var map = new google.maps.Map（document.getElementById（'map-canvas'），{
center：new google.maps .LatLng（29.296435107347698，-29.54822280000008），
zoom：2，
mapTypeId：google.maps.MapTypeId.ROADMAP
}）;
var layer = new google.maps.FusionTablesLayer（{
query：{
select：'col0'，
from：'1PoUAVtdJKOKnJT_ZYkoM7yDpGw-wNJMHXakPeC0'
}，
map：map
}）;
google.maps.event.addListener（layer，'click'，function（e）{
drawVisualization（this）;
e.infoWindowHtml + =< div id ='visualization_div' >< / div>; {
}
}）;
}
google.maps.event.addDomListener（window，'load'，initialize）;
< / script>
PS。
还有一件事！可以从一行数据中显示图表。在我的一个被点击的国家的例子中？
这有点难。
FTLayer的infowindow不会立即打开，因为infowindow的数据将被异步请求。
当您立即调用drawVisualization时，不能保证infowindow内容已经在DOM中可用， #visualization_div 将不可用。
问题：FTLayer的infowindow没有准备好的事件，你永远不知道什么时候infowindow准备好了。另一个问题是：图表也会异步绘制，结果将会是infowindow的一个不受欢迎的外观（图表将在infowindow下绘制，而不是在里面）。 / p>
可能的解决方案（可能有其他解决方案）：使用定制的infowindow代替：
< script type =text / javascript>
google.load（'visualization'，'1'，{packages：['corechart']}）;
//传递infowindow作为参数，我们稍后需要它
function drawVisualization（infowindow）{
var queryText = encodeURIComponent（SELECT Year，Austria，Bulgaria，\
Denmark，Greece FROM 641716）;
/ *注意：我们在这里不需要ContainerId，
我们使用节点引用和draw
*也注意：我们在这里使用ChartWrapper，因为我们需要
图表就绪事件重新绘制infowindow
* /
var chart = new google.visualization.ChartWrapper（{
dataSourceUrl：'https：// www。 google.com/fusiontables/gvizdata?tq='，
query：SELECT Year，Austria，Bulgaria，Denmark，Greece FROM 641716，
refreshInterval：5，
chartType：PieChart，
options：{
title：按国家分列的每年咖啡消费量，
vAxis：{title：Year
hAxis：{title：Cups}
}
}）;
var ready = google.visualization.events.addListener（chart，'ready'，function（）{
//重新指定map属性重绘
// infowindow当图表被绘制时
infowindow.setMap（infowindow.getMap（））;
//移除就绪侦听器
google.visualization.events.removeListener（准备好）;
}）;
//绘制图表
chart.draw（infowindow.getContent（）。lastChild）;
$ b函数initialize（）{
map = new google.maps.Map（document.getElementById（'map-canvas'），{
center：new google.maps.LatLng（29.296435107347698，-29.54822280000008），
zoom：2，
mapTypeId：google.maps.MapTypeId.ROADMAP
}）;
var layer = new google.maps.FusionTablesLayer（{
query：{
select：'col0'，
from：'1PoUAVtdJKOKnJT_ZYkoM7yDpGw-wNJMHXakPeC0'
}，
map：map，
//不使用FTLayer的infowindows
suppressInfoWindows：true
}）;
//定制infowindow
infowindow =新google.maps.InfoWindow（）;
google.maps.event.addListener（layer，'click'，function（e）{
//当infowindow准备就绪时调用drawVisualization
google。 maps.event.addListenerOnce（infowindow，'domready'，function（）{
drawVisualization（infowindow）;
}）;
//为infowindow
var node创建内容= document.createElement（'div'）;
node.innerHTML = e.infoWindowHtml;
//创建绘制图表的节点
node.appendChild（document.createElement（' div'））;
//打开infowindow
infowindow.setOptions（{position：e.latLng，content：node，map：map}）;
}）;
}
google.maps.event.addDomListener（window，'load'，initialize）;
< / script>
I'm trying to display chart (Google Chart API) inside InfoWindow (Fusion Table layer), but the problem is with container "Uncaught Error: The container is null or not defined." whenever I try to include div inside InfoWindow.
I was trying to solve the problem based on this solution, but it's not working with fusion table Add a google chart to a infowindow using google maps api
Please help
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
function drawVisualization() {
var queryText = encodeURIComponent("SELECT Year, Austria, Bulgaria, Denmark, Greece FROM 641716");
google.visualization.drawChart({
"containerId": 'visualization_div',
"dataSourceUrl": 'https://www.google.com/fusiontables/gvizdata?tq=',
"query":"SELECT Year, Austria, Bulgaria, Denmark, Greece FROM 641716",
"refreshInterval": 5,
"chartType": "PieChart",
"options": {
"title":"Yearly Coffee Consumption by Country",
"vAxis": {"title": "Year"},
"hAxis": {"title": "Cups"}
}
});
}
function initialize() {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(29.296435107347698, -29.54822280000008),
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var layer = new google.maps.FusionTablesLayer({
query: {
select: 'col0',
from: '1PoUAVtdJKOKnJT_ZYkoM7yDpGw-wNJMHXakPeC0'
},
map: map
});
google.maps.event.addListener(layer, 'click', function(e) {
drawVisualization(this);
e.infoWindowHtml += "<div id='visualization_div'></div>";{
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
PS.
One more thing ! It's possible to display chart from data from one row. In my example for one country that is clicked ?
It's a bit more difficult.
The infowindow of a FTLayer doesn't open immediately, because the data for the infowindow will be requested asynchronously.
When you call drawVisualization immediately there is no guarantee that the infowindow-content is already available in the DOM, the #visualization_div will not be available yet.
The problem: there is no domready-event for the infowindow of the FTLayer, you'll never know when the infowindow is ready.
Another problem: the chart will also be drawn asynchronously, the result would be a undesirable look of the infowindow(the chart will be drawn under the infowindow, not inside)
Possible solution(there may be others): use a custom infowindow instead:
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
//pass the infowindow as argument, we need it later
function drawVisualization(infowindow) {
var queryText = encodeURIComponent("SELECT Year, Austria, Bulgaria, \
Denmark, Greece FROM 641716");
/*note: we don't need the ContainerId here,
we use the node-reference with draw
*also note: we use ChartWrapper here, because we need
the ready-event of the chart to redraw the infowindow
*/
var chart=new google.visualization.ChartWrapper({
"dataSourceUrl": 'https://www.google.com/fusiontables/gvizdata?tq=',
"query":"SELECT Year, Austria, Bulgaria, Denmark, Greece FROM 641716",
"refreshInterval": 5,
"chartType": "PieChart",
"options": {
"title":"Yearly Coffee Consumption by Country",
"vAxis": {"title": "Year"},
"hAxis": {"title": "Cups"}
}
});
var ready=google.visualization.events.addListener(chart, 'ready', function(){
//re-assign the map-property to redraw the
//infowindow when the chart has been drawn
infowindow.setMap(infowindow.getMap());
//remove the ready-listener
google.visualization.events.removeListener(ready);
});
//draw the chart
chart.draw(infowindow.getContent().lastChild);
}
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(29.296435107347698, -29.54822280000008),
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var layer = new google.maps.FusionTablesLayer({
query: {
select: 'col0',
from: '1PoUAVtdJKOKnJT_ZYkoM7yDpGw-wNJMHXakPeC0'
},
map: map,
//don't use the infowindows of the FTLayer
suppressInfoWindows:true
});
//a custom infowindow
infowindow=new google.maps.InfoWindow();
google.maps.event.addListener(layer, 'click', function(e) {
//call drawVisualization when the infowindow is ready
google.maps.event.addListenerOnce(infowindow,'domready',function(){
drawVisualization(infowindow);
});
//create the content for the infowindow
var node=document.createElement('div');
node.innerHTML=e.infoWindowHtml;
//create the node where the chart will be drawn
node.appendChild(document.createElement('div'));
//open the infowindow
infowindow.setOptions({position:e.latLng,content:node,map:map});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
这篇关于将一个谷歌图表添加到FusionTableLayer infowindow的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
