c3.js donut chart

by Donggun Kim

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div id="piechart"></div>

<div style="text-align:center">
  <h5>
  차트div 바깥에서도 색깔을 연결할 수 있다.
  </h5>
  <span id="text-apple">사과</span>
  <span id="text-walnut">호두</span>
  <span id="text-berry">블루베리</span>
  <span id="text-cheese">치즈</span>
  <span id="text-strawberry">딸기</span>
</div>

JavaScript

var pieData = {
  사과: 500,
  호두: 200,
  블루베리: 666,
  치즈: 54,
  딸기: 120
};
var chartDonut = c3.generate({
  bindto: "#piechart",
  data: {
    json: [pieData],
    keys: {
      value: Object.keys(pieData),
    },
    type: "donut",
  },
  donut: {
    title: "파이의 종류",
  },
});

var chartDonutColors = chartDonut.data.colors();
$("#text-apple").css("color", chartDonutColors["사과"]);
$("#text-walnut").css("color", chartDonutColors["호두"]);
$("#text-berry").css("color", chartDonutColors["블루베리"]);
$("#text-cheese").css("color", chartDonutColors["치즈"]);
$("#text-strawberry").css("color", chartDonutColors["딸기"]);