JSFiddle - React, Tailwind, and code Playground

by katsukino

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
<input name="grpinf" type="hidden" id="grpinf" autopostback="False" value='{"Common":{"YMax":25.0,"YMin":0.0,"DataLineCol":"rgba(0,115,230,1)","LUVal":[16.0,19.0,22.0,7.7E+30],"LUName":["U1","U2","U3","undefined"],"LUCol":["rgba(255,162,68,0.2)","rgba(255,128,255,0.2)","rgba(150,150,150,0.2)","rgba(255,0,0,0.2)"],"LULineCol":["rgba(255,162,68,0.4)","rgba(255,128,255,0.4)","rgba(150,150,150,0.4)","rgba(255,0,0,0.4)"],"LLVal":[10.0,8.0,6.0,4.0],"LLName":["L1","L2","L3","L4"],"LLCol":["rgba(255,162,68,0.2)","rgba(255,128,255,0.2)","rgba(150,150,150,0.2)","rgba(255,0,0,0.2)"],"LLLineCol":["rgba(255,162,68,0.4)","rgba(255,128,255,0.4)","rgba(150,150,150,0.4)","rgba(255,0,0,0.4)"]},"Section":{"XMax":10.0,"XMin":0.0,"DataFillCol":"rgba(0,115,230,1)","FillCol":"rgba(182, 182, 182,1)","LineCol":"rgba(115,115,115,1)","Embank":22.0,"LabelPos":0.5,"DataCount":6,"SectionData":[[0.0,22.0],[1.0,22.0],[2.5,5.0],[7.5,5.0],[9.0,22.0],[10.0,22.0]]},"TimeChart":{"XMax":"2018-10-09T18:00:00","XMin":"2018-10-02T18:00:00","Xinterval":1.0,"Yinterval":5.0,"DataType":"line","Yrev":false,"LineWidth":2.0,"MarkSize":7.0,"MarkBorderCol":"rgba(0,115,230,1)"}}'>

JavaScript

let grp = JSON.parse(document.getElementById("grpinf").value);

//管理値 エリア＆横線
let stripLines = [];
let i;
// 上限値
for (i = 0; i < 4; i++) {
	// 値が 0 から 2 まで計 3 回実行される  0,1,2
	if (grp.Common.LUVal[i] < 1.1E+30){
		if (grp.Common.LUName[i] !=="undefined") {
				stripLines.push({value:grp.Common.LUVal[i],thickness:2,showOnTop: true,color:grp.Common.LULineCol[i],labelAlign: "far",label:grp.Common.LUName[i],labelFontColor:"rgba(0,0,0,0.3)"});
		}
    if (grp.Common.LUVal[i + 1] < 1.1E+30){
        stripLines.push({startValue:grp.Common.LUVal[i],endValue:grp.Common.LUVal[i+1],showOnTop: true,color:grp.Common.LUCol[i]});
    } else {
        stripLines.push({startValue:grp.Common.LUVal[i],endValue:grp.Common.YMax,showOnTop: true,color:grp.Common.LUCol[i]});
        break;
		}
  }
}
	//下限値
let splineRange=[];
for (i = 0; i < 4; i++) {
	if (grp.Common.LLVal[i] < 1.1E+30){
		if (grp.Common.LLName[i] !== "undefined"){
			stripLines.push({value:grp.Common.LLVal[i],thickness:2,showOnTop: true,color:grp.Common.LLLineCol[i]});
		}
		if (grp.Common.LLVal[i + 1] < 1.1E+30){
			splineRange[i]=stripLines.push({startValue:grp.Common.LLVal[i],endValue:grp.Common.LLVal[i+1],showOnTop: true,color:grp.Common.LLCol[i]},{color:grp.Common.LLLineCol[i],showOnTop: true,labelAlign: "far",label:grp.Common.LLName[i],labelFontColor:"rgba(0,0,0,0.3)",thickness:0},);
		} else {
			splineRange[i]=stripLines.push({startValue:grp.Common.LLVal[i],endValue:grp.Common.YMin,showOnTop: true,color:grp.Common.LLCol[i]},{color:grp.Common.LLLineCol[i],showOnTop: true,labelAlign: "far",label:grp.Common.LLName[i],labelFontColor:"rgba(0,0,0,0.3)",thickness:0});
			break;
		}
	}
}

var chart = new CanvasJS.Chart("chartContainer", {
  axisX: {
  	maximum:100,
  },
  axisY: {
  	maximum: grp.Common.YMax,
    interval: grp.TimeChart.Yinterval,
    stripLines: stripLines,
  },
  data: [{
    type: "area",
    dataPoints: [
      { x: 10, y: 0 },
      { x: 20, y: 23 },
      { x: 30, y: 24 },
      { x: 40, y: 22 },
  ...