Question

我正在Chart.js内使用InfoBubble.js。你可以看到我迄今为止所做的工作http://jsfiddle.net/qJZe5/1/。您可以看到折线图正在地图下方加载（我将其包含在测试目的中）。它以奇怪的方式在InfoBubble内部工作。例如，当您运行JSFiddle时，单击标记，然后启动＆＃39;没有任何反应。关闭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

在InfoBubble.js中使用Chart.js for Google Maps API

1 个答案: