jQueryプラグインjquery-barIndicator.jsを使って、多機能なインジケーターバーを実装します。使い方は簡単で、パーセント表示する値をspan要素で包み、ID名を付け、そのIDにスクリプトでオプションを指定するだけです。サンプル1はオプション無しのデフォルトです。サンプル2はバーの色、背景の色、バーの高さを指定しています。サンプル3はパーセントの値の範囲でバーの色を変化させています。その他、パーセント表示の位置を変えたり、マイルストーンを追加したり、パーセントではなく数量にしたり、max、minを指定することなども可能です。

■サンプル1 Horizontal(デフォルト)

24

 

■サンプル2 バーの色と背景の色、高さを指定

35
var opt55 = {
	foreColor:'#ef55fc', //バーの色
	backColor:'#8b66ea', //背景の色
	horBarHeight:28 //バーの高さ
	}
$('#test55').barIndicator(opt55);

 

■サンプル3 値の範囲による色替え

18 33 49 62 95
var opt61 = {
	colorRange:true,
	colorRangeLimits: {
		optimal: '0-20-#1699d4',  //0から20%までの青
		newRangeOne: '21-40-#0dc51d',  //21から40%まで緑
		newRangeTwo: '41-60-gold',  //41から60%まで黄
		newRangeThree: '61-90-darkorange',  //61から90%まで橙
		critical: '91-100-red'  //91から100%まで赤
	}
}
$('.testBar61').barIndicator(opt61);

 

※参照元:https://github.com/kapantzak/barIndicator
戻るボタン