使用google圖表工具在谷歌地圖api infowindow內容字符串

我想使用谷歌圖表工具（從可視化API;而不是圖像圖表）使用infoBubble。信息非常好，正是我所需要的。我的項目需要在infobubble的其中一個選項卡中使用圖表。所以我試圖使用這段代碼（見下面）來構建一個contentString，它將在div的內容中創建一個圖表。儘管如此，它並沒有讓任何圖表發生。有什麼東西看起來不對，特別是內容字符串？使用google圖表工具在谷歌地圖api infowindow內容字符串

//returns the status string 
function GetPublicProjectStatusString(data){ 

    var contentString = '<div id="content" style="margin:0;">'+ 
      '<h3>' + 'Project Phase' + '</h3>'+ 
      '<p>' + data.ProjectPhase + '</p>'+ 
      '<div id="parentDiv">' + 
       '<div id="chartDiv" style="top:0px;left:0px;width:200px;height:200px;">' + 
       '</div>' + 
       '<div id="secondDiv">' + 
        '<h3>' + 'Start Date' + '</h3>' + 
       '</div>' + 
      '</div>' + 
     '</div>' + 
     '<script type="text/javascript">' + 
      'var chartdata = new google.visualization.DataTable();' + 
      'chartdata.addColumn("string", "Source");' + 
      'chartdata.addColumn("number", "Amount");' + 
      'chartdata.addRows([' + 
       '["Federal",4],' + 
       '["State",8],' + 
       '["County",9],' + 
       '["Local",14],' + 
      ']);' + 
      'var options = {"title":"Project Budget"' + 
       '"width":200,' + 
       '"height":200};' + 
      'var chart = new google.visualization.PieChart(document.getElementById("chartDiv"));' + 
      'chart.draw(data,options);' + 
     '</script>'; 

    return contentString; 

}

來源

2012-03-01 jdb1a1

我認爲以下方法可能對您有所幫助，因爲我不認爲您可以在內容字符串中使用腳本標記。

，你要放置圖形

var contentString = "<div id='chart_div'></div>";

看一看，可以適應圖表添加到內容串股利這個谷歌圖表示例使用一個div的內容串：

Google Charts Tools Example

然而，在你的內容串股利可能會被用戶輸入像點擊一個標誌，所以你不能直接在圖表添加到它（這是在圖的例子做），因爲它不是一部分創建dom然而。因此，您必須收聽創建infoBubble的事件。對於在谷歌地圖API連接到的標記的信息窗口，這將是這樣的：

google.maps.event.addListener(infoWindow, 'domready', function() { drawChart(); });

如果信息窗口是您創建的信息窗口和drawChart功能你包裹在適應圖表的代碼示例

希望這有助於。

來源

2012-06-18 00:18:13 Klodder

如果在domready事件處理程序中未能如此呼叫chart::draw()，這似乎是導致我看到的「...瀏覽器不支持Google圖表」錯誤消息的原因。

來源

2012-08-18 18:26:11

使用google圖表工具在谷歌地圖api infowindow內容字符串

回答

相關問題