Chart js-绘制气泡图的每个气泡的中心

Chart.canvasHelpers.defaultDrawPoint = Chart.canvasHelpers.drawPoint;
Chart.canvasHelpers.drawPoint = function(ctx, pointStyle, radius, x, y){
    // PointStyle undefined is default 
    // PointStyle === "circle" is the default named style
    if(pointStyle === undefined || pointStyle === "circle"){
    
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, Math.PI * 2);
        ctx.closePath();
        ctx.fill();   
        
        // custom code here
        ctx.save();  // save the state
        ctx.strokeStyle = "white";
        ctx.strokeWidth = 4;
        ctx.beginPath();
        ctx.moveTo(x - radius *0.3, y - radius *0.3);
        ctx.lineTo(x + radius *0.3, y + radius *0.3);
        ctx.moveTo(x + radius *0.3, y - radius *0.3);
        ctx.lineTo(x - radius *0.3, y + radius *0.3);
        ctx.stroke();
        ctx.restore(); // restor the state
        
    }else{  // all other styles pass on to default handler
        Chart.canvasHelpers.defaultDrawPoint(ctx, pointStyle, radius, x, y);
    }
}

// some utils to add data
// returns a random int
const rand = (min, max = min + (min = 0))=> Math.floor( Math.random() * (max-min) + min);    
// returns a random data point {x,y,r}
const randData = ()=>({x : rand(0,50), y: rand(5,50), r: rand(4,20)});
// create a chart.
const ctx = canvas.getContext("2d");
const chart = new Chart(ctx, {
   type: "bubble",
   data: {
      datasets: [{
         label: "Random Data",
         backgroundColor: "#7AF",
         data: (()=>{
            var dat = [];
            for(var i = 0; i < 10; i++){ dat.push(randData()) }
            return dat;
         })(),
      }]
   },
   options: { responsive: false } // this is required to work or it throws
                                  // not sure why by it is not due to the
                                  // changes
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id=canvas height=200 width=400></canvas>