JSFiddle - React, Tailwind, and code Playground

by developanda

HTML

<script src="https://jp.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>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet">
</link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet">
</link>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/i18n/infragistics-ja.js"></script>


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

CSS

#chart {
  position: relative;
  float: left;
  margin-right: 10px;
  width: 800px !important;
  margin-bottom: 10px;
}

JavaScript

$(function() {

  var data = [{
      "task": "就寝",
      "hour": 8,
    },
    {
      "task": "朝食・情報収集・準備",
      "hour": 2,
    },
    {
      "task": "社内MTG",
      "hour": 1,
    },
    {
      "task": "短期的なアクション",
      "hour": 2,
    },
    {
      "task": "お昼休み",
      "hour": 1,
    },
    {
      "task": "長期的なアクション",
      "hour": 2,
    },
    {
      "task": "コンサルタント作業",
      "hour": 1,
    },
    {
      "task": "ミーティング",
      "hour": 2,
    },
    {
      "task": "晩御飯",
      "hour": 1,
    },
    {
      "task": "家族との時間・自分の時間",
      "hour": 4,
    },
    

  ];

  $("#chart").igPieChart({
    width: "435px",
    height: "435px",
    dataSource: data, //JSON data defined above
    valueMemberPath: "hour",
    labelMemberPath: "task",
    labelsPosition: "bestFit",
    startAngle: 250
  });

});