Javascript 谷歌图表进入信息窗口

我似乎无法在互联网上找到一个适合当前问题的好解决方案。我想在信息窗口中显示谷歌图表。但我一直得到一个空的。谁能帮帮我吗

这是一份标记代码的副本，并带有infowindow。它在一个循环中，所以我可以得到多个标记

    for (i = 0; i < get_markers.length; i++) { 

        var marker = new google.maps.Marker({
                position: new google.maps.LatLng(get_markers[i][1], get_markers[i][2]),
                map: map});

        google.maps.event.addListener(marker, 'click',(function(marker, i,infowindow) 
        {
            return function() {

                        var con = '<div id="chart_div1"></div>';

            infowindow.setContent(con);
            infowindow.open(map, marker);
            map.setCenter(marker.getPosition());

            drawChart(this);
        }

    })(marker, i,infowindow));
     markers.push(marker);

（i=0；i var marker=new google.maps.marker({ 职位：新google.maps.LatLng（get_markers[i][1]，get_markers[i][2]）， map:map}）； google.maps.event.addListener（标记，'click'，（函数（标记，i，信息窗口） { 返回函数（）{ var con=''； infowindow.setContent（con）； 信息窗口。打开（地图、标记）； map.setCenter（marker.getPosition（））； 图纸（本）； } })（标记，i，信息窗口）； 标记器。推（标记器）； 这就是我查看谷歌图表的方式。（不在信息窗口内）

google.load（'visualization'，'1'，{'packages'：['corechart']}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=new google.visualization.DataTable（）；
变量选项={
标题：“按犯罪类型分类”，
is3D:'正确'，
宽度：500，
身高：300
};
var chart=new google.visualization.BarChart（document.getElementById（'chart_div1'）；
chart.draw（数据、选项）；}

我想把谷歌图表放进信息窗口。任何建议都非常感谢。谢谢！请帮我解决这个问题

我知道有很多这样的事件，但我没能跟上，因为我还是谷歌图表领域的新手。

for（I=0；I

for（i=0；i

google.load('visualization', '1', {'packages':['corechart']});

google.setOnLoadCallback(drawChart);

function drawChart() {

  var data = new google.visualization.DataTable(<?=$jsonTable?>);
  var options = {
      title: 'By Crime Type',
      is3D: 'true',
      width: 500,
      height: 300
    };
 var chart = new google.visualization.BarChart(document.getElementById('chart_div1'));
  chart.draw(data, options);}

        var marker1 = new google.maps.Marker({
                position: new google.maps.LatLng(get_markers[i][1], get_markers[i][2]),
                map: map});

        google.maps.event.addListener(marker1, 'click', function() {
        drawChart(this);
        window.location.href="?brgy_id="+get_markers[i][0];
        infowindow.open(map,marker);

        });

}

for (i = 0; i < locations.length; i++) 
{
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][0], locations[i][1]),
        map: map,
        icon: locations[i][2]
    });
    markers.push(marker);
    addInfoWindow(marker, locations[i][3]);
}

function addInfoWindow(marker, message) 
{
    var infoWindow = new google.maps.InfoWindow({
        content: message
    });

    google.maps.event.addListener(marker, 'click', function () {
        //infoWindow.open(map, marker);
        drawChart(map, marker);
    });
}

function drawChart(map, marker) {
    //Create the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Slices');
    data.addRows([
    ['Customer Coverage', 14],
    ['Call Average', 09],
    ['MTP Deviation', 04],
    ['SGPI Compliance', 06],
    ['Campaign Compliance', 05]
    ]);

    //Set chart options
    var options = {
        'title': 'KPI',
        'width': 300,
        'height': 150
    };

    var node = document.createElement('div'),
        infoWindow = new google.maps.InfoWindow(),
        chart = new google.visualization.PieChart(node);

    chart.draw(data, options);
    infoWindow.setContent(node);
    infoWindow.open(map, marker);
}

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>