JSFiddle - React, Tailwind, and code Playground

by developanda

HTML

<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"/ >
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet" />

    <div>
        <div id="splineAreaChart" class="chart"></div>
    </div>

CSS

.chart {
            display: inline-block;
        }

JavaScript

$(function() {

  var data = [
{ "x":0, "y1":0.0000001,"y2":NaN, "y3": NaN, 'xLabel':''},
{ "x":5, "y1":0.0000016,"y2":NaN, "y3": NaN ,'xLabel':''},
{ "x":10, "y1":0.0000134,"y2":NaN, "y3": NaN ,'xLabel':''},
{ "x":15, "y1":0.0000873,"y2":NaN, "y3": NaN,'xLabel':''},
{ "x":20, "y1":0.0004432,"y2":NaN, "y3": NaN,'xLabel':''},
{ "x":25, "y1":0.0017528,"y2":NaN, "y3": NaN,'xLabel':''},
{ "x":30, "y1":0.0053991,"y2":0.0053991, "y3": NaN,'xLabel':'-2σ'},
{ "x":35, "y1":NaN,"y2":0.0129518, "y3": NaN,'xLabel':''},
{ "x":40, "y1":NaN,"y2":0.0241971, "y3": 0.0241971,'xLabel':'−1σ'},
{ "x":45, "y1":NaN,"y2":NaN, "y3": 0.0352065,'xLabel':''},
{ "x":50, "y1":NaN,"y2":NaN, "y3": 0.0398942,'xLabel':'0'},
{ "x":55, "y1":NaN,"y2":NaN, "y3": 0.0352065,'xLabel':''},
{ "x":60, "y1":NaN,"y2":0.0241971, "y3": 0.0241971,'xLabel':'1σ'},
{ "x":65, "y1":NaN,"y2":0.0129518, "y3": NaN,'xLabel':''},
{ "x":70, "y1":0.0053991,"y2":0.0053991, "y3": NaN,'xLabel':'2σ'},
{ "x":75, "y1":0.0017528,"y2":NaN, "y3": NaN,'xLabel':''},
{ "x":80, "y1":0.0004432,"y2":NaN, "y3": NaN,'xLabel':''},
{ "x":85, "y1":0.0000873,"y2":NaN, "y3": NaN,'xLabel':''},
{ "x":90, "y1":0.0000134,"y2":NaN, "y3": NaN,'xLabel':''},
{ "x":95, "y1":0.0000016,"y2":NaN, "y3": NaN,'xLabel':''},
{ "x":100, "y1":0.0000001,"y2":NaN, "y3": NaN,'xLabel':''},
  ];





  CreateChart();



  function CreateChart() {
    $("#splineAreaChart").igDataChart({
      width: "500px",
      height: "500px",
      title: "正規分布図",
      horizontalZoomable: false,
      verticalZoomable: false,
      dataSource: data,
      axes: [{
          name: "xAxis",
          type: "categoryX",
          label: 'xLabel',
          labelTextStyle: "8pt Verdana",
        },
        {
          name: "yAxis",
          type: "numericY",
          minimumValue: 0,
          labelTextStyle: "8pt Verdana",
        }
      ],
      series: [

        CreateSeries("y1"),      
        CreateSeries("y2"),
        CreateSeries("y3"),
		      	

      ]
    });
  }

 ...