今日の人気記事

  1. 指定した要素がなんでも編集できちゃう「trocar.js」
  2. フローチャートを作成「Flow Chart」
  3. テーブルにタブ機能を追加「Table Tabs」
  4. クリック操作で開閉する左右のサイドパネル「Panel Slider」
  5. テーブルにスクロールバーをつける「Scroll Table」

アニメ効果付きの円グラフを作成「Circliful」

スポンサーリンク

アニメ効果付きの円グラフを作成するプラグイン「Circliful」を紹介します。

jQueryプラグイン「Circliful」

このプラグインを使えば、簡単に画像を使わずに html5 canvas を使って、円グラフを作成することができます。

さらに、アニメーション効果を付加することができるので、おすすめプラグインです!

スポンサーリンク

デモの円グラフをご覧ください。

「Circliful」のデモ

デモのソース(HTML + jQuery)


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Circlifulのデモでーす。">
<title>Circliful - jQueryプラグイン</title>
<link href="jquery.circliful.css" rel="stylesheet" type="text/css" />
</head>
<body>
</head><body><h1>Circlifulのデモでーす。</h1>

<div id="demo1" data-dimension="250" data-text="50" data-info="データのタイトル" data-width="30" data-fontsize="38" data-percent="35" data-fgcolor="#7ea568" data-bgcolor="#eee" data-type="half" data-icon="fa-task"></div>
<div id="demo2" data-dimension="250" data-text="80%" data-info="統計" data-width="30" data-fontsize="38" data-percent="35" data-fgcolor="#61a9dc" data-bgcolor="#eee"></div>

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="jquery.circliful.min.js"></script>
<script>
$( document ).ready(function() {
  $('#demo1').circliful();
  $('#demo2').circliful();
});
</script>
</body>
</html>
スポンサーリンク

関連記事(一部広告含む)