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

円グラフを作るのにおすすめな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数値のサイズ
textAdditionalCssstyle属性を追加
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 !');
  });
 });

 

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