JSFiddle - React, Tailwind, and code Playground

by katsukino

HTML

<div id="AllBox" class="allbox">
  <!-- <div id="chartContainer" class="cont pos divSize"></div> -->
</div>
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>>
<script
  src="https://code.jquery.com/jquery-3.7.0.min.js"
    
  
  integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g="
  crossorigin="anonymous"></script>

CSS

body {
  background-image: url("https://thumb.ac-illust.com/f2/f2d953069106b4a619395315533f13cf_t.jpeg");
  background-repeat: no-repeat;
}
.allbox{
  margin:0;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

.cont {
  background-color:rgba(255,255,255,0.0);
  border:1px solid gray;
  border-radius:10px;
  position:absolute;
  margin:0;
  padding:0;
  display:block;
  /*transform: translate(80px,110px);*/
}
.pos {
  top:0px;
  left:0px;
  /*transform: translate(80px,110px);*/
}

JavaScript

let chCount = 5;
let chart=[];
let chSize = 150;
let deg2Rad = Math.PI/180;
let rot = 0;
let oneSide = true;

window.onload = function () {
	// スタイルシートの同適生成　チャートコンテナのサイズ指定
  //スタイル エレメントを作成
  let style1 = document.createElement("style");
  //スタイルをヘッダに入れる
  document.head.appendChild(style1);
  //スタイルシートの定義
  style1.sheet.insertRule(".divSize{ width:" + chSize + "px;height:" + chSize + "px;}", 0 );

let Xaxis;
Xaxis = new Object();
Xaxis.includeZero = true;
Xaxis.crosshair ={enabled:false,snapToDataPoint: false}
Xaxis.crosshairSnapToDatePoint = true;
Xaxis.lineThickness = 0;
Xaxis.maximum = 5;
Xaxis.minimum = -5;
Xaxis.labelFontSize = 10;
Xaxis.tickThickness = 1;
Xaxis.tickPlacement = "inside";
Xaxis.labelPlacement = "inside";

let Yaxis;
Yaxis = new Object();
Yaxis.includeZero = true;
Yaxis.crosshair ={enabled:false,snapToDataPoint: false}
Yaxis.crosshairSnapToDatePoint = true;
Yaxis.lineThickness = 0;
Yaxis.maximum = 5;
Yaxis.minimum = -5;
Yaxis.labelFontSize = 10;
Yaxis.tickThickness = 1;

let leg;
leg = new Object();
leg.cursor="pointer";
leg.verticalAlign= "top";
leg.horizontalAlign= "left";
leg.dockInsidePlotArea= true;
leg.fontSize= 15;

let ttp;
ttp = new Object();
ttp.cornerRadius= 4;
ttp.borderThickness= 2;
ttp.borderColor= "rgba(0,0,255,1)";

// チャートコンテナの動的生成
for (let i=0;i<chCount;i++){
  $("#AllBox").append("<div id='chartCon" + i + "' class='cont pos divSize'>");

ttp.content="【A-" + (i+1) +"測点】<br/>X方向: {x}km<br/>Y方向 :{y}km";

let DatX = -4;
let DatY = -1 + i * -0.8;
let PlotDat = calcPos(DatX,DatY,30,1,oneSide);

chart[i] = new CanvasJS.Chart("chartCon" + i, {
  animationEnabled: true,
  backgroundColor: "rgba(255,255,255,0.5)",
  theme: "light2",
	axisX:Xaxis,
/*   axisX:{
    includeZero: true,
    crosshair: {
      enabled: false,
      snapToDataPoint: true
    },
    lineThickness: 0,
    maximum:5,
    minimum:-5,
    labelFontSize: 0,
    tickThickness: 0
  },
   */  
	axisY:Yaxis,   
/*   axisY: {
    includeZero: true,
    crosshair: {
   ...