Rotapieはレスポンシブのアニメーション円グラフjQueryプラグイン。

jQueryへの（CDNまたはローカル）リンク、jquery.rotapie.jsファイルへのリンクを含めます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/scripts/jquery.rotapie.js"></script>

jqueryを持つ要素を選択し、.rotapie（）を呼び出す。

<script>
$(function(){
     var pie = $('#myDiv').rotapie();
});
</script>

円グラフを設定

<script>
$(function(){
   var pie = $('#myDiv').rotapie({
      slices: [                                // An array of slice objects.
         { color: '#006673', percentage: 10},  // Each slice object requires a color and percentage.
         { color: '#0294a8', percentage: 30 }, // The font color defaults to the color but can be overriden by specifying fontColor.
         { color: '#77ccd1', percentage: 60}
      ],
      sliceIndex: 0, // Start index selected slice.
      deltaAngle: 0.2, // The rotation angle in radians between frames, smaller number equals slower animation.
      minRadius: 100, // Radius of unselected slices, can be set to percentage of container width i.e. '45%'.
      maxRadius: 110, // Radius of selected slice, can be set to percentage of container width i.e. '50%'.
      minInnerRadius: 55, // Smallest radius inner circle when animated, set to 0 to disable inner circle, can be set to percentage of container width i.e. '30%'.
      maxInnerRadius: 65, // Normal radius inner circle, set to 0 to disable inner circle, can be set to percentage of container width i.e. '35%'.
      innerColor: '#fff', // Backgroundcolor inner circle.
      minFontSize: 30, // Smallest fontsize percentage when animated, set to 0 to disable percentage display, can be set to percentage of container width i.e. '10%'.
      maxFontSize: 40, // Normal fontsize percentage, set to 0 to disable percentage display, can be set to percentage of container width i.e. '20%'.
      fontYOffset: 0, // Vertically offset the percentage display with this value, can be set to percentage of container width i.e. '-10%'.
      fontFamily: 'Times New Roman', // Font-family percentage display.
      fontWeight: 'bold', // Font-weight percentage display.
      decimalPoint: '.', // Can be set to comma or other symbol.
      clickable: true, // If set to true a user can select a different slice by clicking on it.
      beforeAnimate: undefined, // Callback function called before starting animation. Read the documentation for more information.
      afterAnimate: undefined // Callback function called after animation. Read the documentation for more information.
   });
});
</script>

<script>
$(function(){
   var pie = $('#myDiv').rotapie(....);
   pie.animate(index, pieIndex); // Animate the pie chart to the next slice index.
   pie.repaint(pieIndex); // Redraw the pie chart, is often used after changing settings via "getSettings".
   pie.getSettings(pieIndex); // Retrieve the settings object.
});
</script>

MIT

• Tag
• jQuery
• Responsive