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": 2,
    },
    {
      "task": "チームミーティング",
      "hour": 1,
    },
    {
      "task": "SNS投稿・事務作業",
      "hour": 2,
    },
    {
      "task": "ランチ",
      "hour": 1,
    },
    {
      "task": "コンテンツ作りなどの時間をかける作業",
      "hour": 5,
    },
    {
      "task": "買い物・夕食",
      "hour": 2,
    },
        {
      "task": "家族団らん・たまに勉強",
      "hour": 4,
    },



  ];

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

});