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},
{ "x":5, "y1":0.0000016},
{ "x":10, "y1":0.0000134},
{ "x":15, "y1":0.0000873},
{ "x":20, "y1":0.0004432},
{ "x":25, "y1":0.0017528},
{ "x":30, "y1":0.0053991},
{ "x":35, "y1":0.0129518},
{ "x":40, "y1":0.0241971},
{ "x":45, "y1":0.0352065},
{ "x":50, "y1":0.0398942},
{ "x":55, "y1":0.035206},
{ "x":60, "y1":0.0241971},
{ "x":65, "y1":0.0129518},
{ "x":70, "y1":0.0053991},
{ "x":75, "y1":0.0017528},
{ "x":80, "y1":0.0004432},
{ "x":85, "y1":0.0000873},
{ "x":90, "y1":0.0000134},
{ "x":95, "y1":0.0000016},
{ "x":100, "y1":0.0000001},
  ];





  CreateChart();



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

        CreateSeries("y1"),      
 
		      	

      ]
    });
  }

  function CreateSeries(valueMemberPath) {
    var series = {
      type: "splineArea",
      markerType: "none",
      xAxis: "xAxis",
      yAxis: "yAxis",
      name: valueMemberPath,
      title: valueMemberPath,
      valueMemberPath: valueMemberPath,
      isTransitionInEnabled: false,
      isHighlightingEnabled: false,
      showTooltip: false,
      thickness: 3
    }
    return series;
  }

});