javascript - 在 InfoBubble.js 中使用 Chart.js 来实现 Google map API

Question

我正在尝试使用Chart.js里面InfoBubble.js 。你可以在这里看到我迄今为止所做的工作 http://jsfiddle.net/qJZe5/1/ 。您可以看到折线图正在 map 下方加载(我将其包含在内是为了测试目的)。它在 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);

Answer 1

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

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

working fiddle

dialog create event documentation