JSFiddle - React, Tailwind, and code Playground

by katsukino

HTML

<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
<script
  src="https://code.jquery.com/jquery-3.7.1.min.js"
  integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
  crossorigin="anonymous">
</script>
<div id="AllBox" class="allbox">
</div>

CSS

body {
}
.allbox{
  margin:0;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

.cont {
  background-color:rgba(255,255,255,0.0);
  border:0px solid gray;
  border-radius:10px;
  position:absolute;
  margin:0;
  padding:0;
  display:block;
}

.pos {
  top:0px;
  left:0px;
}

JavaScript

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

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 = 6;	//1 + i * 0.8;
let PlotDat = calcPos(DatX,DatY);

chart[i] = new CanvasJS.Chart("chartContainer" + i, {
  animationEnabled: true,
  backgroundColor: "rgba(208,208,208,1)",
  theme: "light2",
  axisX:{
    includeZero: true,
    crosshair: {
      enabled: false,
      snapToDataPoint: false
    },
    lineThickness: 0,
    maximum:10,
    minimum:-10,
    labelFontSize: 0,
    tickThickness: 0
  },
  axisY: {
    includeZero: true,
    crosshair: {
      enabled: false,
      snapToDataPoint: false
    },
    lineThickness: 0,
    gridThickness: 0,
    maximum:10,
    minimum:-10,
    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: "bottom",
    horizontalAlign: "left",
    dockInsidePlotArea: true,
    /* itemclick: toogleDataSeries */
  },
  data: [{
    highlightEnabled: false,
    cursor: "crosshair",
    type: "line",
    lineThickness: 3,
    showInLegend: false,
    markerType: "circle",
    markerSize: 6,
    /* color: "#F08080", */
    color: "#4040FF",
    dataPoints: [
      { x: 0, y: 0,markerColor: "green",toolTipContent:"設置位置" },
      /* { x: 4, y: 1 + i*0.8, markerSize: 8,markerColor: "blue", }, */
      { x: DatX, y: DatY, markerType: "none",markerSize: 8,markerColor: "blue" },
      { x:...