「Bootstrapデザイン」✕「円グラフ」解析

カスタマイズ例

・このページ上部の円グラフは、「EASY PIE CHART」を利用していると思われ

・明示的にライブラリ単体ファイルを読み込んでいないため若干分かりづらいが、jsファイルに以下のような記載がある

<script type="text/javascript">

		$(document).ready(function () {

			$('a[rel=tooltip]').tooltip();



			// Easy Pie Charts

			var easyPieChartDefaults = {

				animate: 2000,

				scaleColor: false,

				lineWidth: 12,

				lineCap: 'square',

				size: 100,

				trackColor: '#e5e5e5'

			}

			$('#easy-pie-chart-1').easyPieChart($.extend({}, easyPieChartDefaults, {

・また、動作確認のために設置したサンプルで、同ライブラリを読み込んだところ無事エラーが消えたため

・なお、中の数字がアニメーションしていないのは、もしかすると最新バージョンを利用していないためかもしれない

カスタマイズ例

・このページ上部の円グラフは、「jQuery Knob」を利用している

・上記とは異なり、明示的にライブラリ単体ファイルを読み込んでいるため、その意味では分かりやすい
・しかし、そもそも「jQuery Knob」なるライブラリを知らなかったし、キーワード「pie」なる文字もどこにも入っていないため、突き止めるまでには結構苦労したよ
・また、うんざりするぐらいたくさん「js」ファイルを読み込んでいるため、自分が欲しい円グラフに関するものを特定するのに時間がかかった
▼/js/custom.js

$(document).ready(function(){



	/* ---------- Acivate Functions ---------- */

	$("#overlay").delay(1250).fadeOut(500);



	circle_progess();

	

});





/* ---------- Circle Progess Bars ---------- */



function circle_progess() {

	

	var divElement = $('div'); //log all div elements

	

	$(".greenCircle").knob({

        'min':0,

        'max':100,

        'readOnly': true,

        'width': 120,

        'height': 120,

        'fgColor': '#b9e672',

        'dynamicDraw': true,

        'thickness': 0.2,

        'tickColorizeValues': true,

		'skin':'tron'

    })



    $(".orangeCircle").knob({

        'min':0,

        'max':100,

        'readOnly': true,

        'width': 120,

        'height': 120,

        'fgColor': '#FA5833',

        'dynamicDraw': true,

        'thickness': 0.2,

        'tickColorizeValues': true,

		'skin':'tron'

    })



	$(".lightOrangeCircle").knob({

        'min':0,

        'max':100,

        'readOnly': true,

        'width': 120,

        'height': 120,

        'fgColor': '#f4a70c',

        'dynamicDraw': true,

        'thickness': 0.2,

        'tickColorizeValues': true,

		'skin':'tron'

    })



    $(".blueCircle").knob({

        'min':0,

        'max':100,

        'readOnly': true,

        'width': 120,

        'height': 120,

        'fgColor': '#2FABE9',

        'dynamicDraw': true,

        'thickness': 0.2,

        'tickColorizeValues': true,

		'skin':'tron'

    })



	$(".yellowCircle").knob({

        'min':0,

        'max':100,

        'readOnly': true,

        'width': 120,

        'height': 120,

        'fgColor': '#e7e572',

        'dynamicDraw': true,

        'thickness': 0.2,

        'tickColorizeValues': true,

		'skin':'tron'

    })



	$(".pinkCircle").knob({

        'min':0,

        'max':100,

        'readOnly': true,

        'width': 120,

        'height': 120,

        'fgColor': '#e42b75',

        'dynamicDraw': true,

        'thickness': 0.2,

        'tickColorizeValues': true,

		'skin':'tron'

    })

	

	

}              

 
JSファイルが動的生成
・下記タグはJSファイルが動的生成するため、予め記述しておくと二重表示されてしまう

<canvas width="120" height="120"></canvas>

・ここら辺の細かい挙動は、「単体デモ設置」＆「カスタマイズ」を実施して確認する必要があるかも

バージョンの問題
▼jquery.knob.js
・リンク先 … Version: 1.1.2 (22/05/2012)
・最新 … Version: 1.2.0 (15/07/2012)
・最新ファイルをそのまま読み込んだらうまく動作しなかった
・色とかもおかしくなったし
・多分、バージョンアップに伴い、オプション設定とか若干変更になったものだと思われる

アニメーション？
・リンク先を見るとアニメーション対応していないように見えるが、単に遅延読み込みしているだけなので、実際にはアニメーション対応している