在InfoBubble.js中使用Chart.js作为谷歌地图API

Question

我试图在InfoBubble.js中使用Chart.js。你可以看到我到目前为止所做的工作http://jsfiddle.net/qJZe5/1/。您可以看到线形图正在地图下方加载(我将其包含在其中是为了测试目的)。它在"信息泡泡"内部以一种奇怪的方式运作。例如，当您运行JSFiddle时，单击标记，然后'Launch'，什么也没有发生。关闭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);

Answer 1

在JQuery对话框的"create"方法中调用drawGraph函数

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

工作小提琴

对话框创建事件文档