с помощью инструментов Google Chart в строке содержимого API-интерфейса Google Maps API - PullRequest
Новая
       12

с помощью инструментов Google Chart в строке содержимого API-интерфейса Google Maps API

1 голос
/ 02 марта 2012

Я пытаюсь использовать инструменты Google Chart (из API визуализации; не диаграмм с изображениями), используя infoBubble . Infobubble потрясающий; делает именно то, что мне нужно. Мой проект требует использования диаграммы на одной из вкладок инфопузыря. Поэтому я пытаюсь использовать этот код (см. Ниже) для создания contentString, которая создаст диаграмму в содержимом div. Это не делает никаких графиков, хотя. Что-то не так выглядит, в частности, со строкой содержимого? 

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

}

Ответы [ 2 ]

3 голосов
/ 18 июня 2012

Я думаю, что следующий подход может быть полезен для вас, поскольку я не думаю, что вы можете использовать теги script в строке содержимого.

Используйте div в строке содержимого, где вы хотите разместить свой график 

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

Посмотрите на этот пример диаграммы Google, который можно адаптировать для добавления диаграммы в div в строке содержимого:

Пример Google Charts Tools

Однако div в вашей строке содержимого, вероятно, будет создан пользовательским вводом, например щелчком по маркеру, поэтому вы не сможете напрямую добавить к нему диаграмму (что сделано в примере с диаграммой), поскольку она еще не является частью dom. Для этого вам необходимо прослушать событие, которое создает инфо-пузырь. Для информационного окна, подключенного к маркеру в API карт Google, это будет примерно так: 

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

Где infoWindow - это информационное окно, которое вы создали, и drawChart - функция, в которую вы помещаете пример адаптированного кода диаграммы.

Надеюсь, это поможет.

0 голосов
/ 18 августа 2012

В противном случае вызов chart::draw() в обработчике события domready, по-видимому, был причиной сообщения об ошибке «... браузер не поддерживает Google Charts».

...