javascript - 使用 Mapbox GL JS 动态添加 Chart.js 对象

Question

我正在使用 Mapbox GL JS 和 Chart.js 来可视化带有可点击标记的地图。单击标记时，Chart.js 图形应显示在 Mapbox 弹出窗口中，该图形基于单击标记的信息。现在，这就是我实现它的方式：

var i = 0;
map.on("click", "trips", function (e) {
    var coordinates = e.features[0].geometry.coordinates.slice();
    var nTripsMonth = e.features[0].properties.nTripsMonth;

    while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
        coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
    }

    new mapboxgl.Popup()
        .setLngLat(coordinates)
        .setHTML('<canvas id="foo' + i + '"></canvas>')
        .addTo(map);
    map.flyTo({center: e.features[0].geometry.coordinates, zoom: 18});

    var ctx = document.getElementById('foo' + i).getContext('2d');

    console.log(ctx)
    var chart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [{
                label: 'Distribution',
                backgroundColor: 'rgb(255, 99, 132)',
                borderColor: 'rgb(255, 99, 132)',
                data: nTripsMonth
            }]
        },
    });
    i++;
});

这按我想要的方式工作，但是我觉得这不是正确的方法。

标签： javascriptchart.jsmapbox-gl-js