在谷歌地图api infowindow内容字符串中使用谷歌图表工具 [英] using google chart tools in a google maps api infowindow content string

问题描述

我正在尝试使用谷歌图表工具（来自可视化API;而不是图像图表），使用 infoBubble 。信息非常好，正是我所需要的。我的项目需要在infobubble的其中一个选项卡中使用图表。所以我试图使用这段代码（见下面）来构建一个contentString，它将在div的内容中创建一个图表。尽管如此，它并没有让任何图表发生。有什么看起来不对，特别是内容字符串？

I am trying to use the google chart tools (from the visualization api; not the image charts) using an infoBubble. The infobubble is awesome; does exactly what I need it to. My project calls for using a chart in one of the tabs on the infobubble. So I am trying to use this code (see below) to build a contentString that will create a chart in the div's content. It isn't making any charts happen, though. Does anything look wrong, in particular, with the content string?

//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;

}  

推荐答案

以下方法可能对您有所帮助，因为我不认为您可以在内容字符串中使用脚本标记。

I think the following approach might be helpful to you as I dont think you can use the script tags in the content string.

在要放置的内容字符串中使用div您的图表

Use a div in the content string where you want to place your graph

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

看看这个谷歌图表示例，可以将图表添加到div中内容字符串：

Have a look at this google chart example that can be adapted to add the chart to the div in the content string:

谷歌图表工具示例

然而，您的内容字符串中的div可能会由用户输入创建，例如点击标记，因此您无法直接将图表添加到它（在图表示例中完成），因为它不是dom的一部分。因此，您必须收听创建infoBubble的事件。对于连接到Google Maps API中的标记的infowindow，这将是这样的：

However the div in your content string will probably be created by user input like clicking a marker so you cannot directly add the chart to it (which is done in the chart example) as it is not part of the dom yet. Therefor your have to listen to the event that creates the infoBubble. For a infowindow connected to a marker in the google maps api this will be something like this:

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

其中，infoWindow是您创建的信息窗口，并绘制一个函数用于包装修改后的图表代码示例。

Where infoWindow is the info window you created and drawChart a function you wrap the adapted chart code example in.

希望这有助于。

这篇关于在谷歌地图api infowindow内容字符串中使用谷歌图表工具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！