綺麗な円グラフが作れるプラグイン「jquery-plugin-circliful」の使い方

スポンサーリンク
Pocket
LINEで送る

円グラフを作るのにおすすめなjqueryプラグイン「jquery-plugin-circliful」の使い方です

jquery-plugin-circlifulの使い方

必要なファイルを読み込みます。

https://github.com/pguso/jquery-plugin-circliful

上のリンクからダウンロードし、以下のファイルを読込みます。

<link href="jquery.circliful.css" rel="stylesheet" type="text/css" />
<script src="jquery.circliful.min.js"></script>

 

次に円グラフを作る

<div>
  <div id="circle" ></div>
</div>
<script>
$( document ).ready(function() {
  $("#circle").circliful({
    animationStep: 5,
    foregroundBorderWidth: 5,
    backgroundBorderWidth: 15,
    percent: 75
  });
 });
</script>

 

オプション

オプションを設定することで円グラフをカスタマイズできます

スポンサーリンク
foregroundColor グラフの前景色
backgroundColor グラフの背景色
fillColor グラフの中心の色
pointColor グラフの数値がある場所の背景色
pointSize グラフの数値がある場所のサイズ
foregroundBorderWidth 前景の幅
backgroundBorderWidth 背景の幅
fontColor グラフの数値の色
percent グラフの値
animation アニメーションがするかないか
animationStep アニメーションの速度
percentageTextSize 数値のサイズ
textAdditionalCss style属性を追加
targetPercent 円グラフの外にグラフを作る
targetTextSize 円グラフの外側のグラフの数値の文字サイズ
targetColor 円グラフの外側のグラフの数値の文字色
text 出力する文字を設定
textStyle 文字にstyle属性を追加
textColor 文字色
textBelow 文字をグラフの中心にするか、グラフの下にするか
noPercentageSign %の表記を消すどうか
replacePercentageByText 中心の数値を変更
halfCircle 半円にする
animateInView スクロールするとグラフのアニメーションが起こる
decimals 小数点以下のの桁数
alwaysDecimals 最初から少数点を表示するか

 

アニメーションが完了した後に処理をする

コールバックを設定します。

アニメーションが終わった後にアラートが表示されます。

$( document ).ready(function() {
  $("#circle").circliful({
    animationStep: 5,
    foregroundBorderWidth: 5,
    backgroundBorderWidth: 15,
    percent: 90

  },function(){
    alert('done !');
  });
 });

 

こんな感じで自由度高くカスタマイズできるのでおすすめのライブラリです。