將Google圖表添加到FusionTableLayer infowindow

Question

我試圖在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。

還有一件事！可以從一行數據中顯示圖表。在我點擊一個國家的例子中？

Answer 1

這有點困難。

FTLayer的infowindow不會立即打開，因爲infowindow的數據將被異步請求。

當您立即調用drawVisualization時，不能保證infowindow內容已經在DOM中可用，#visualization_div將不可用。

問題：FTLayer的infowindow沒有domready-event，你永遠不知道什麼時候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> 

Answer 2

我也發現了第二種方式，也許不那麼複雜的，但工作
1.融合表創建圖表
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>' + 

DEMO

而且我們還可以插入查詢到URL所以才選擇行是在谷歌圖

e.row [「COUNTRY_NAME」。價值

'<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"/>' + 

DEMO 2

Answer 3

我解決了這個問題，通過將圖表渲染爲帶有gnuplot的PNG，並將它們作爲Fusion Table中一列URL中的靜態圖像提供。

這不是一個Google Chart/javascript解決方案，但我們有更多的數據點比我們想用Google Chart動態地繪製。