今日の人気記事

  1. テーブルのヘッダーを固定してデータ行をスクロール表示「tbodyScroll」
  2. JSONデータからテーブルを表示「Columns」 - ソート - 検索 - ページャー
  3. テキストの手動入力っぽいアニメーションを実装「TypeType」
  4. レスポンシブ・グリッドを実装「Awesome Grid」
  5. スクロールすると自動でコンテンツを読み込む「PageMe」

アニメ効果付きの円グラフを作成「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>
スポンサーリンク

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