javascript - 在InfoBubble.js中为Google Maps API使用Chart.js

我正在尝试在Chart.js内使用InfoBubble.js。您可以在http://jsfiddle.net/qJZe5/1/看到我到目前为止所做的工作。您可以看到折线图正在地图下方加载（出于测试目的，我将其包括在内）。它以一种奇怪的方式在InfoBubble内部运行。例如，当您运行JSFiddle时，单击标记，然后单击“启动”，则什么也没有发生。关闭InfoBubble，然后重试即可。

第一次单击“启动”时如何显示图形？

我认为以下几行不当。任何帮助将不胜感激。谢谢。

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

编辑：我还注意到，如果删除HTML中用于加载图形的代码，则没有任何效果。

我的代码：

function drawChart() {
    var randomScalingFactor = function () {
        return Math.round(Math.random() * 100)
    };
    var lineChartData = {
        labels: ["Jan", "Feb", "Mar", "Apr", "May"],
        datasets: [{
            label: "Week 1",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
        }, {
            label: "Week 2",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
        }]
    };
    var options = {
        animation: true,
        scaleShowGridLines: true,
        scaleGridLineColor: "rgba(0,0,0,.05)",
        scaleGridLineWidth: 1,
        bezierCurve: true,
        bezierCurveTension: 0.5,
        pointDot: true,
        pointDotRadius: 4,
        pointDotStrokeWidth: 2,
        pointHitDetectionRadius: 20,
        datasetStroke: true,
        datasetStrokeWidth: 2,
        datasetFill: true
    };
    var ctx = document.getElementById("canvas").getContext("2d");
    new Chart(ctx).Line(lineChartData, options);
}

function initialize() {
    var myLatlng = new google.maps.LatLng(-25.363882, 131.044922);
    var mapOptions = {
        zoom: 5,
        center: myLatlng
    };

    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var contentString = '<div id="content">' +
        '<a onclick="$(&quot;#graph&quot;).dialog();" href="#">Launch</a>' +
        '<div id="graph"><canvas id="canvas" height="250" width="250"></canvas></div>' +
        '</div>';

    var infowindow = new InfoBubble({
        content: contentString
    });

    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: 'Uluru (Ayers Rock)'
    });
    google.maps.event.addListener(marker, 'click', function () {
        infowindow.open(map, marker);
        google.maps.event.addListener(infowindow, 'domready', function() { drawChart(); });
    });
}

google.maps.event.addDomListener(window, 'load', initialize);

最佳答案

在JQuery对话框的“ create”方法中调用drawGraph函数：

'<a onclick="$(&quot;#graph&quot;).dialog({create: function( event, ui ) { drawChart(); }});" href="#">Launch</a>' +

working fiddle

dialog create event documentation

关于javascript - 在InfoBubble.js中为Google Maps API使用Chart.js，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24922058/