[JS]円グラフにピッツァのようなかわいいアニメーションを与えるスクリプト -Pizza Pie Charts

サイト構築 -JavaScript

Post on:2013年11月5日

Pizza Pie Chartsのデモ

デモはChrome, Safari, Firefox, Operaなどのモダンブラウザ、IEは9+でご覧ください。

デモ

デモはピッツァ（左）、ドーナツ（右）の2種類があります。

1ピースを抜き出すかわいいエフェクトは、こんな感じです。

デモのアニメーション

ダウンロードできるデモファイルには、別のデモもついています。

ダウンロードファイルのデモ

Pizza Pie Chartsの使い方

Step 1: 外部ファイル

jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。

<link href="stylesheets/pizza.css" media="screen, projector, print" rel="stylesheet" type="text/css" />

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/vendor/snap.svg.js"></script>
<script src="js/jquery.pizza.js"></script>

Step 2: HTML

HTMLは二つの要素から構成されており、ul要素には円グラフのデータ、div要素は円グラフの描画、となっています。
ul要素のdata属性とdiv要素のidは、値を同じにします。

<ul data-pie-id="my-cool-chart">
  <li data-value="36">Pepperoni</li>
  <li data-value="14">Sausage</li>
  <li data-value="8">Cheese</li>
  <li data-value="11">Mushrooms</li>
  <li data-value="7">Chicken</li>
  <li data-value="24">Other</li>
</ul>
<div id="my-cool-chart"></div>

Step 3: CSS

円グラフの各アイテムにカラーを設定します。

ul[data-graph] li:nth-child(1) {
  color: red;
}

ul[data-graph] li:nth-child(2) {
  color: red;
}

ul[data-graph] li:nth-child(3) {
  color: yellow;
}

Step 4: JavaScript

スクリプトを初期化し、実行します。

  <script>
    $(window).load(function() {
      Pizza.init();
    })
  </script>

オプションでは、ピッツァ・ドーナツのデザイン、ストロークのカラー・サイズ、アニメーションのスピードなどが設定できます。

Pizza.init('#example1', {
  donut: false,
  donut_inner_ratio: 0.4,   // between 0 and 1
  percent_offset: 30,       // relative to radius
  stroke_color: '#333',
  stroke_width: 0,
  show_percent: true,       // show or hide the percentage on the chart.
  animation_speed: 500,
  animation_type: 'elastic' // options: backin, backout, bounce, easein,
});