jQuery
【jQuery】レスポンシブのアニメーション円グラフプラグインRotapie
April 8, 2017

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