Javascript 使用Mapbox GL js动态添加Chart.js对象

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

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++;
});

var i=0；
地图上的“点击”、“行程”功能（e）{
var coordinates=e.features[0]。geometry.coordinates.slice（）；
var nTripsMonth=e.features[0].properties.nTripsMonth；
而（数学abs（e.lngLat.lng-坐标[0]）>180）{
坐标[0]+=e.lngLat.lng>坐标[0]？360:-360；
}
新建mapboxgl.Popup（）
.setLngLat（坐标）
.setHTML（“”）
.addTo（地图）；
map.flyTo（{center:e.features[0].geometry.coordinates，zoom:18}）；
var ctx=document.getElementById（'foo'+i）.getContext（'2d'）；
控制台日志（ctx）
var图表=新图表（ctx{
类型：'bar'，
数据：{
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”]，
数据集：[{
标签：“分发”，
背景颜色：“rgb（255，99，132）”，
边框颜色：“rgb（255，99，132）”，
数据：1个月
}]
},
});
i++；
});

这是我想要的方式，但是我觉得这不是正确的方式