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 );

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

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

chart[i] = new CanvasJS.Chart("chartContainer" + i, {
  animationEnabled: true,
  backgroundColor: "rgba(255,255,255,0.5)",
  theme: "light2",
  //title:{
  //	text: "A測点",
  //  fontSize: 20,
  //},
  axisX:{
    includeZero: true,
    crosshair: {
      enabled: false,
      snapToDataPoint: true
    },
    lineThickness: 0,
    maximum:5,
    minimum:-5,
    labelFontSize: 0,
    tickThickness: 0,
    stripLines: [{
    value:3,
    }],
  },
  axisY: {
    includeZero: true,
    crosshair: {
      enabled: false,
      snapToDataPoint: false
    },
    lineThickness: 0,
    gridThickness: 0,
    maximum:5,
    minimum:-5,
    labelFontSize: 0,
    tickThickness: 0
  },
  toolTip:{
    //shared:true
    cornerRadius: 4,
    borderThickness: 2,
    borderColor: "blue",
    content:"【A-" + (i+1) +"測点】<br/>X方向: {x}km<br/>Y方向 :{y}km"
  },  
  legend:{
    cursor:"pointer",
    verticalAlign: "top",
    horizontalAlign: "left",
    dockInsidePlotArea: true,
    fontSize: 15
    /* itemclick: toogleDataSeries */
  },
  data: [{
    highlightEnabled: false,
    cursor: "crosshair",
    type: "line",
    lineThickness: 3,
    showInLegend: false,
    markerType: "circle",
    markerSize: 0,
    color: "#4040FF",
    /* legendText: "aaaaa", */
    /* howInLegend: true, */
    dataPoints: [
      { x: 0, y: 0,markerSize: 6,toolTipContent:"設置位置" },
      { x:...