JSFiddle - React, Tailwind, and code Playground

by katsukino

HTML

<div id="AllBox" class="allbox">
  <!-- <div style="width:300px;text-align:center;margin-bottom:-5px">　Y</div> -->
  <dib id="chartContainer" style="width:400px;height:400px;" class="cont pos divSize"></dib>
</div>
<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>

CSS

body {
}
.allbox{
  margin:0;
  top:0px;
  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 = 400;
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 );
  $("#AllBox").append("<div id='chartContainer' class='cont pos divSize'>");
  let DatX = -6;
  let DatY = -2;	//1 + i * 0.8;
  //let PlotDat = calcPos(DatX,DatY,30,1,true);

	let Points=[];
  let PlotData = calcArrowHeadPos(DatX,DatY,30,2,false,true,2);

	console.log(PlotData[1]);

	Points.push({x:0, y:0,markerColor:"green",toolTipContent:"Point Zero"});
  Points.push({x:DatX, y:DatY, markerType:"none",markerColor:"blue"});
	Points.push({x: PlotData[1][2].x, y: PlotData[1][2].y,markerType: "none", toolTipContent: null});
    Points.push({x: PlotData[1][1].x, y: PlotData[1][1].y,markerType: "none", toolTipContent: null});
    Points.push({x: PlotData[1][0].x, y: PlotData[1][0].y,markerType: "none", toolTipContent: null});
    Points.push({x: PlotData[1][3].x, y: PlotData[1][3].y,markerType: "none", toolTipContent: null});
    Points.push({x: PlotData[1][2].x, y: PlotData[1][2].y,markerType: "none", toolTipContent: null});
  
/* 		Points.push({x:DatX, y:null,markerType:"none",toolTipContent:null});
		    Points.push({x:DatX, y:DatY, markerType:"none",markerColor:"blue"}); 
		    for (i=1;i<PlotData[0];i++){
		      Points.push({x: PlotData[1][i].x, y: PlotData[1][i].y,markerType: "none", toolTipContent: null});
		    } */
  //console.log(Points);

  chart = new CanvasJS.Chart("chartContainer", {
		animationEnabled: true,
    //backgroundColor: "rgba(220,220,220,1)",
    theme: "light",
    axisX:{
    	includeZero: true,
     	crosshair: {
	      enabled: true,
	      snapToDataPoint: false
	    },
      title:"X方向【min】",
	    lineThickness: 1,
      gridThickness: 1,
      gridDashType:"dot",
	 ...