我有一个画布，分为四个部分，如下面的代码片段所示，在每个部分我们可以画一个带标题的圆圈。你能否告诉我，如何以这样的方式做到这一点，两个圆圈之间没有重叠或有标题。正如您在下面的代码片段中看到的那样，国家/地区的名称是重叠的，我不希望如此。如果还有其他方法可以实现这一点，请建议我。感谢
以下是我的html的代码：
<div id = "canvasContainer">
<canvas id = "canvas" width = "640" height = "480"></canvas>
</div>
以上html的Css：
.canvasContainer{
postion: relative;
}
.divtag{
width: 130px;
height: 40px;
border: 5px solid black;
position: absolute;
background-color: white;
padding: 5px;
padding-bottom: 2px;
font-size: 13px;
text-align: center;
font-weight: bold;
}
.divtag1{
position: absolute;
background: none;
font-size: 15px;
text-align: center;
font-weight: bold;
}
var jsondata = [{"country": "Russia", "cat1": "expressive", "cat2": "confrontational"},
{"country": "Israel", "cat1": "expressive", "cat2": "confrontational"},
{"country": "Italy", "cat1": "expressive", "cat2": "confrontational"},
{"country": "France", "cat1": "expressive", "cat2": "confrontational"},
{"country": "Spain", "cat1": "expressive", "cat2": "confrontational"},
{"country": "U.S.", "cat1": "expressive", "cat2": "confrontational"},
{"country": "India", "cat1": "expressive", "cat2": "avoiding"},
{"country": "Saudi Arabia", "cat1": "expressive", "cat2": "avoiding"},
{"country": "Mexico", "cat1": "expressive", "cat2": "avoiding"},
{"country": "Brazil", "cat1": "expressive", "cat2": "avoiding"},
{"country": "Philippines", "cat1": "expressive", "cat2": "avoiding"},
{"country": "UK", "cat1": "unexpressive", "cat2": "avoiding"},
{"country": "Sweden", "cat1": "unexpressive", "cat2": "avoiding"},
{"country": "Korea", "cat1": "unexpressive", "cat2": "avoiding"},
{"country": "Japan", "cat1": "unexpressive", "cat2": "avoiding"},
{"country": "Netherlands", "cat1": "unexpressive", "cat2": "confrontational"},
{"country": "Germany", "cat1": "unexpressive", "cat2": "confrontational"},
{"country": "Denmark", "cat1": "unexpressive", "cat2": "confrontational"},
{"country": "Denmark", "cat1": "unexpressive", "cat2": "confrontational"},
{"country": "Denmark", "cat1": "unexpressive", "cat2": "confrontational"},
{"country": "Denmark", "cat1": "unexpressive", "cat2": "confrontational"},
{"country": "Denmark", "cat1": "unexpressive", "cat2": "confrontational"},
{"country": "Antigua and Barbuda", "cat1": "expressive", "cat2": "confrontational"},
{"country": "Albania", "cat1": "expressive", "cat2": "confrontational"},
{"country": "United Arab Emirates", "cat1": "expressive", "cat2": "confrontational"},
{"country": "Bosnia and Herzegovina", "cat1": "expressive", "cat2": "confrontational"}];
window.onload = function(){
var canvas = null;//To get canvas element from the dom
var ctx = null; //To draw circle and label on the canvas
var CanvasWidth=0;//Total Width of the Canvas
var CanvasHeight=0;//Total Height of the Canvas
var ConvasContainer=null;//To add div to the start and end of vertical and Horizontal Line
var AxisText;//To add country name on the top of each circle
var MidX;//Mid point of the canvas w.r.t x-axis
var MidY;//Mid point of the canvas w.r.t y-axis
var colorName;//Color of the canvas circle
var colorArrays = ["#000000","#FF0000","#0000FF","#00FF00","#FF00FF","#800080"]; //All Colours for the circle
ConvasContainer=document.getElementById("canvasContainer");
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
CanvasHeight=canvas.offsetHeight;
CanvasWidth=canvas.offsetWidth;
ctx.lineWidth = 5;
ctx.beginPath();
//Drawing the vertical line
ctx.moveTo(CanvasWidth/2, 0);
ctx.lineTo(CanvasWidth/2, CanvasHeight);
ctx.stroke();
ctx.lineWidth = 5;
ctx.beginPath();
//Drawing horizontal Line
ctx.moveTo(CanvasWidth,CanvasHeight/2);
ctx.lineTo(0, CanvasHeight/2);
ctx.stroke();
//Adding CONFRONTATIONAL to the left of horizontal line
AxisText=document.createElement("div");
AxisText.innerHTML="CONFRONTATIONAL";
AxisText.className="divtag";
AxisText.style.top=((CanvasHeight/2)-25)+"px";
canvasContainer.appendChild(AxisText);
//Adding AVOID CONFRONTATIONAL to the right of horizontal line
AxisText=document.createElement("div");
AxisText.innerHTML=" AVOID CONFRONTATIONAL";
AxisText.className="divtag";
AxisText.style.top=((CanvasHeight/2)-25)+"px";
AxisText.style.left=(CanvasWidth-130)+"px";
canvasContainer.appendChild(AxisText);
//Adding EMTIONALLY EMPRESSIVE TO THE TOP OF Y axis
AxisText=document.createElement("div");
AxisText.innerHTML="EMTIONALLY EXPRESSIVE";
AxisText.className="divtag";
AxisText.style.left=((CanvasWidth/2)-70)+"px";
AxisText.style.top="0px";
canvasContainer.appendChild(AxisText);
//Adding EMTIONALLY UNEMPRESSIVE TO THE Buttom OF Y axis
AxisText=document.createElement("div");
AxisText.innerHTML="EMTIONALLY UNEXPRESSIVE";
AxisText.className="divtag";
AxisText.style.left=((CanvasWidth/2)-70)+"px";
AxisText.style.top=(CanvasHeight-40)+"px";
canvasContainer.appendChild(AxisText);
MidX=((CanvasWidth/2));
MidY=((CanvasHeight/2));
//For adding circle and Text Between CONFRONTATIONAL AND EMTIONALLY EXPRESSIVE
var Xvalue=29;
var Yvalue=70;
var Inc0=Yvalue;
//For adding circle and Text Between EMTIONALLY EXPRESSIVE AND AVOIDING
var X1value=MidX+40;
var Y1value=70;
var Inc=40;
//For adding circle and Text Between CONFRONTATIONAL AND EMTIONALLY UNEXPRESSIVE
var x2value=35;
var y2value=MidY+50;
var Inc1=MidY+50;
//For adding circle and Text Between EMTIONALLY UNEXPRESSIVE AND AVOIDING
var x3value=MidX+40;
var y3value=MidY+10;
var Inc3=40;
for(i=0;i<jsondata.length;i++)
{
var index=getRandomIndex(0,colorArrays.length-1);
colorName=colorArrays[Math.trunc(index)];
if(jsondata[i].cat1==="expressive"&&jsondata[i].cat2==="confrontational")
{
DrawCircle(Xvalue,Yvalue,colorName);//For Drawing cicle
Drawlabel(Xvalue-20,Yvalue-15,jsondata[i].country);//To Write country name above the circle
if((Xvalue+60)<(MidX-15))
{
Xvalue=Xvalue+60;
Yvalue=Yvalue+30;
}
else if((Yvalue+30)<MidY)
{
Xvalue=20;
Inc0=Inc0+30;
Yvalue=Inc0;
}
}
else if(jsondata[i].cat1==="expressive" &&jsondata[i].cat2==="avoiding")
{
DrawCircle(X1value,Y1value,colorName);//For Drawing circle
Drawlabel(X1value-20,Y1value-15,jsondata[i].country);//To Write country name above the circle
if((X1value+60)<(CanvasWidth-15))
{
X1value=X1value+60;
Y1value=Y1value+20;
}
else if((Y1value+30)<MidY)
{
X1value=MidX+60;
Y1value=70+Inc;
Inc=Inc+Inc;
}
}
else if(jsondata[i].cat1==="unexpressive" &&jsondata[i].cat2==="confrontational")
{
DrawCircle(x2value,y2value,colorName);//Fot Drawing Circle
Drawlabel(x2value-30,y2value-15,jsondata[i].country);//To Write country name above the circle
if((x2value+60)<(MidX-15))
{
x2value=x2value+60;
y2value=y2value+15;
}
else if((y2value+30)<CanvasHeight)
{
x2value=30;
y2value=Inc1+30;
Inc1=Inc1+30;
}
}
else if(jsondata[i].cat1==="unexpressive" &&jsondata[i].cat2==="avoiding")
{
DrawCircle(x3value-3,y3value+20,colorName);//For Drawing Circle
Drawlabel(x3value-20,y3value+3,jsondata[i].country);//To Write country name above the circle
if((x3value+60)<(CanvasWidth-15))
{
x3value=x3value+60;
y3value=y3value+20;
}
else if((y3value+30)<CanvasHeight)
{
x3value=MidX+60;
y3value=MidY+Inc3;
Inc3=Inc3+Inc3;
}
}
}
function getRandomIndex(min, max) {
return Math.random() * (max - min) + min;
}
function DrawCircle(x,y,color)
{
ctx.beginPath();
ctx.arc(x,y,4,0,2 * Math.PI);
ctx.fillStyle = color;
ctx.fill();
ctx.strokeStyle = color;
ctx.stroke();
}
function Drawlabel(left,top,countryname)
{
AxisText=document.createElement("div");
AxisText.innerHTML=countryname;
AxisText.className="divtag1";
AxisText.style.left=left+"px";
AxisText.style.top=top+"px";
canvasContainer.appendChild(AxisText);
}
}
.canvasContainer
{
postion: relative;
}
.divtag
{
width: 130px;
height: 40px;
border: 5px solid black;
position: absolute;
background-color: white;
padding: 5px;
padding-bottom: 2px;
font-size: 13px;
text-align: center;
font-weight: bold;
}
.divtag1
{
position: absolute;
background: none;
font-size: 15px;
text-align: center;
font-weight: bold;
}<html lang = "en">
<head>
<title>Countries</title>
</head>
<body>
<div id = "canvasContainer">
<canvas id = "canvas" width = "640" height = "480"></canvas>
</div>
</body>
</html>