在mapbox弹出窗口中显示一个pieChart

Question

当我单击该点时，我想显示一个饼图以显示我的数据。

//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>

现在，我的代码仅显示数据文本。 我可以在弹出窗口中创建div元素并使用任何外部api（例如Google图表）访问数据并在div中创建饼图吗？