如何使用数据库中的国家/地区填充Jvector Map？

(I am new to Javascript and jQuery..) I have a dashboard and I want to display a map that shows the countries where participants of a particular event are coming from. With this, I opted with Jvector Map. I am having a hard time displaying the countries in the map, coming from my database.

dashboard.js

var mapData = {};
$('#world-map').vectorMap({
    map: 'world_mill_en',
    backgroundColor: "transparent",
    regionStyle: {
        initial: {
            fill: '#e4e4e4',
            "fill-opacity": 0.9,
            stroke: 'none',
            "stroke-width": 0,
            "stroke-opacity": 0
        }
    },

    series: {
        regions: [{
            values: function() {
                $.ajax({
                    url:"includes/sql/fetchcountries.php",
                    method:"GET",
                    data:mapData,
                    dataType:"json",
                    success: function(data){
                        mapData = data;          
                        console.log(mapData);
                    }
                })
            },
            scale: ["#1ab394", "#22d6b1"],
            normalizeFunction: 'polynomial'
        }]
    },
});

fetch.php

<?php 
   require '../auth/dbh.inc.auth.php';
   $id = $_SESSION['ntc_id'];

   $stmt = $conn->prepare("SELECT DISTINCT(participants.p_country) FROM ntc_participants
                       INNER JOIN participants ON participants.p_id=ntc_participants.p_id_fk
                       WHERE ntc_participants.ntc_id_fk=?");

  $data = array();
  mysqli_stmt_bind_param($stmt, "i", $id);
  $stmt->execute();
  $result = $stmt->get_result();
  if($result->num_rows === 0);
  if($row = $result->fetch_assoc()) {
     $data[] = [
      $row['p_country'] => 0 ]; //the value 0 is just a placeholder.. The jvector map feeds on this format: "US":298, "SA": 200
 }
  echo json_encode($data);
?>

Could anyone be gracious enough to walk me through all the wrong things I'm doing in my code? Appreciate all the help! :)

Ajax is asynchronous, so You are creating the map before the data has been downloaded.

Initialize the map with empty values for Your region:

$('#world-map').vectorMap({
  ...
     values: {}
  ...
});

Then, whenever You need to show the data, set it dynamically:

$.get("includes/sql/fetchcountries.php", function(data) {
  var mapObj = $("#world-map").vectorMap("get", "mapObject");
  mapObj.series.regions[0].setValues(data);
});

During the ajax invocation and data download maybe You can show a spinner (please look at beforeSend inside the jQuery full ajax documentation: https://api.jquery.com/jquery.ajax/).

Here is the reference for setValues:

http://jvectormap.com/documentation/javascript-api/jvm-dataseries/