アニメ効果付きの円グラフを作成「Circliful」
当ページのリンクには広告が含まれています。
スポンサーリンク
アニメ効果付きの円グラフを作成するプラグイン「Circliful」を紹介します。
jQueryプラグイン「Circliful」
このプラグインを使えば、簡単に画像を使わずに html5 canvas を使って、円グラフを作成することができます。
さらに、アニメーション効果を付加することができるので、おすすめプラグインです！
スポンサーリンク
デモの円グラフをご覧ください。
デモのソース（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>
スポンサーリンク