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": 7,
    },
    {
      "task": "朝食",
      "hour": 2,
    },
    {
      "task": "定例ミーティング",
      "hour": 1,
    },
    {
      "task": "マーケティング支援・技術サポート支援",
      "hour": 2,
    },
    {
      "task": "昼食",
      "hour": 1,
    },
    {
      "task": "コンサルミーティング実施（社外）",
      "hour": 2,
    },
    {
      "task": "その他企画＆調査（社内）",
      "hour": 2,
    },
        {
      "task": "その他フォローアップ",
      "hour": 1,
    },
    {
      "task": "勉強",
      "hour": 1,
    },
    {
      "task": "夕食、家族との時間、自分の時間",
      "hour": 3,
    },


  ];

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

});