jQueryプラグインjquery-barIndicator.jsを使って、多機能なインジケーターバーを実装します。使い方は簡単で、パーセント表示する値をspan要素で包み、ID名を付け、そのIDにスクリプトでオプションを指定するだけです。サンプル1はオプション無しのデフォルトです。サンプル2はバーの色、背景の色、バーの高さを指定しています。サンプル3はパーセントの値の範囲でバーの色を変化させています。その他、パーセント表示の位置を変えたり、マイルストーンを追加したり、パーセントではなく数量にしたり、max、minを指定することなども可能です。
var opt55 = {
foreColor:'#ef55fc', //バーの色
backColor:'#8b66ea', //背景の色
horBarHeight:28 //バーの高さ
}
$('#test55').barIndicator(opt55);
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);
