Javascript 在地图框弹出窗口中显示图表

我想在单击点时显示一个饼图来显示我的数据

//html part
<div id="map"></div>


//javaScript
<script >


var peopleJSON = [{
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [144.961027, -37.795947]
            },
            "properties": {
                "building_name": "Art West",
                "student": 100,
                "staff": 200,
                "total": 300,
            }
        },

map.on('load', function(){
                map.addLayer({
                'id': 'test',
                'type': 'circle',
                'source' : {
                    "type": "geojson",
                    "data": {
                        "type": "FeatureCollection",
                        "features": peopleJSON,
                    }

                },
                'paint':{
                    'circle-color': '#00b7bf',
                    'circle-radius':8
                    'circle-stroke-width': 1,
                    'circle-stroke-color': '#333',
                }
            });

            map.on('click', 'test', function (e) {
                new mapboxgl.Popup()
                .setLngLat(e.lngLat)
                .setHTML(
                 "Building Name: " + e.features[0].properties.building_name
                + "<br> detail: " + e.features[0].properties.detail
                + "<br> total: " + e.features[0].properties.total
                 )
                .addTo(map);
                });


            })
</script>

//html部分
//javaScript
var peopleJSON=[{
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[144.961027，-37.795947]
},
“财产”：{
“建筑名称”：“艺术西部”，
“学生”：100，
“工作人员”：200人，
“总数”：300，
}
},
map.on（'load'，function（））{
map.addLayer({
'id'：'test'，
“类型”：“圆”，
“来源”：{
“类型”：“geojson”，
“数据”：{
“类型”：“FeatureCollection”，
“功能”：peopleJSON，
}
},
“油漆”：{
“圆形颜色”：“00b7bf”，
“圆半径”：8
“圆笔划宽度”：1，
“圆圈笔画颜色”：“333”，
}
});
映射（'click'，'test'，函数（e）{
新建mapboxgl.Popup（）
.setLngLat（e.lngLat）
.setHTML(
“建筑名称：”+e.features[0]。properties.Building\u Name
+
详细信息：“+e.features[0].properties.detail”
+“
总计：”+e.features[0].properties.total
)
.addTo（地图）；
});
})

现在，我的代码只显示数据的文本。 我是否可以在弹出窗口中创建一个div元素，并使用任何外部api（如google图表）访问数据并在div中创建piechart