我正在尝试在InfoWindow(Fusion Table图层)中显示图表(Google Chart API),但问题在于容器“未捕获错误:容器为空或未定义。”每当我尝试在InfoWindow中包含div时。
我试图基于此解决方案解决问题,但它不适用于融合表 Add a google chart to a infowindow using google maps api
请帮忙
<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。
还有一件事!可以从一行的数据中显示图表。在我的例子中,点击了一个国家?
答案 0 :(得分:1)
我也找到了第二种方式,也许不是那么复杂但是工作
1.在Fusion Table中创建图表
2.从发布选项卡复制链接
3.将链接粘贴到iframe中。我为此做了一些标签
'<div id="tab-2">' + //firts tab content
'<iframe src="https://www.google.com/fusiontables/embedviz?containerId=googft-gviz-canvas&q=select+col2%2C+col3+from+1NLk1HStpHzzSedbjQioau_7fSxeVlmb4G4A46MM+order+by+col3+desc+limit+6&viz=GVIZ&t=PIE&uiversion=2&gco_forceIFrame=true&gco_hasLabelsColumn=true&gco_useFirstColumnAsDomain=true&gco_is3D=false&gco_pieHole=0.5&gco_booleanRole=certainty&gco_colors=%5B%22%233366CC%22%2C%22%23DC3912%22%2C%22%23FF9900%22%2C%22%23109618%22%2C%22%23990099%22%2C%22%230099C6%22%2C%22%23DD4477%22%2C%22%2366AA00%22%2C%22%23B82E2E%22%2C%22%23316395%22%2C%22%23994499%22%2C%22%2322AA99%22%2C%22%23AAAA11%22%2C%22%236633CC%22%2C%22%23E67300%22%2C%22%238B0707%22%2C%22%23651067%22%2C%22%23329262%22%2C%22%235574A6%22%2C%22%233B3EAC%22%2C%22%23B77322%22%2C%22%2316D620%22%2C%22%23B91383%22%2C%22%23F4359E%22%2C%22%239C5935%22%2C%22%23A9C413%22%2C%22%232A778D%22%2C%22%23668D1C%22%2C%22%23BEA413%22%2C%22%230C5922%22%2C%22%23743411%22%5D&gco_hAxis=%7B%22useFormatFromData%22%3Atrue%2C+%22viewWindow%22%3A%7B%22max%22%3Anull%2C+%22min%22%3Anull%7D%2C+%22minValue%22%3Anull%2C+%22maxValue%22%3Anull%7D&gco_vAxes=%5B%7B%22useFormatFromData%22%3Atrue%2C+%22viewWindow%22%3A%7B%22max%22%3Anull%2C+%22min%22%3Anull%7D%2C+%22minValue%22%3Anull%2C+%22maxValue%22%3Anull%7D%2C%7B%22useFormatFromData%22%3Atrue%2C+%22viewWindow%22%3A%7B%22max%22%3Anull%2C+%22min%22%3Anull%7D%2C+%22minValue%22%3Anull%2C+%22maxValue%22%3Anull%7D%5D&gco_theme=maximized&gco_legend=none&width=00&height=150"frameborder="0"; scrolling="no"/>' +
'</div>' +
我们还可以在网址中插入查询,因此只有选定的行位于Google图表
中e.row ['Country_Name']。value
'<div id="tab-2">' + //firts tab content
'<iframe src="https://www.google.com/fusiontables/embedviz?containerId=googft-gviz-canvas&q=select+col0%2C+col1%2C+col2%2Ccol3+from+1r4egxlD-9QeK-4gBrdtTGQFrhdrBoxNhBwQbWUc+%20WHERE%20Country_Name=%27'+ e.row['Country_Name'].value +'%27+order+by+col1+asc+limit+10&viz=GVIZ&t=COLUMN&uiversion=2&gco_forceIFrame=true&gco_hasLabelsColumn=true&att=true&gco_theme=maximized&width=300&height=150"frameborder="0"; scrolling="no"/>' +
答案 1 :(得分:0)
这有点困难。
FTLayer的infowindow不会立即打开,因为infowindow的数据将被异步请求。
当您立即调用drawVisualization时,无法保证INFowindow内容已在DOM中可用,#visualization_div
将无法使用。
问题:FTLayer的infowindow没有domready-event事件,你永远不会知道infowindow何时准备就绪。
另一个问题:图表也会异步绘制,结果将是一个不受欢迎的infowindow外观(图表将在infowindow下绘制,而不是在内部)
可能的解决方案(可能还有其他解决方案):改为使用自定义信息窗口:
<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>
答案 2 :(得分:0)
我通过使用gnuplot将图表呈现为PNG并将其作为来自Fusion Table中的一列URL的静态图像来解决此问题。
这不是谷歌图表/ JavaScript解决方案,但我们有更多的数据点,而不是我们想要使用谷歌图表即时绘制。