はじめに
チャートの描画で有名なライブラリにはchart.jsなどがあるが、ゲージなどの描画に適したライブラリがないかと探してみると、JustGageというのがありました。
用途としては、車のスピードメーターや飛行機のコクピットのイメージでの使い道や、ゲームの体力ゲージなどの表示にも使えるかと思います。
使い方はとても簡単ですが、サンプルがあまり詳しく載っていないようなので、使い方と簡単なカスタム方法を以下で書いていきます。
Just Gageを使う準備
公式サイトからzip形式のファイルをダウンロード
http://justgage.com/
解凍したうちの、以下2つのファイルをコピー
justgage.js
raphael-2.1.4.min.js
任意の場所に配置
JustGageを使いたいページのHTMLファイル内でスクリプトを読込む
上記で使う準備は完了
JustGageのサンプル
公式にもあるのと同程度のサンプルを作ってみる
index.html
[html]
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./common.css">
</head>
<body>
<div class="wrap">
<div id="gauge"></div>
</div>
<script src="./raphael-2.1.4.min.js"></script>
<script src="./justgage.js"></script>
<script src="./common.js"></script)
</body>
</html>
[/html]
common.js
[javascript]
var g = new JustGage({
id: "gauge",
value: 47,
min: 0,
max: 100,
title: "Speed",
label: "KM",
});
[/javascript]
common.css
[css]
.wrap {
height: 150px;
width:250px;
vertical-align: top;
background: #ccc;
text-align: center;
padding: 25px;
margin: 10px;
border-radius: 20px:
}
#gauge {
width:250px;
height:150px;
}
[/css]
サンプル
https://weblion303.net/sample/justgage/index.html
解説
common.js(1)
Just Gageを使いたいときにはJust Gageをnewするところから始まる
common.js(2)
html内でJustGageを入れたい場所にidを付け、その名称をここで指定する
common.js(3)
ゲージのvalue値。
動的に変化させたい場合はここを変える
common.js(4,5)
最低値と最大値の指定
common.js (6,7)
titleはゲージ上部に表示される
labelはゲージ中央のvalue値の下に表示される
JustGageの追加オプションの指定方法
htmlとcssは上記と同様に、common.jsを少し変更
ポインターの表示やゲージの変形
common2.js
[javascript]
var g = new JustGage({
id: "gauge",
value: 47,
min: 0,
max: 100,
pointer: true,
title: "Speed",
label: "KM",
gaugeWidthScale: 0.3,
customSectors: [{
color: ‘#ff0000’,
lo: 50,
hi: 100,
}, {
color: ‘#00ff00’,
lo: 0,
hi: 50,
}],
});
[/javascript]
サンプル
https://weblion303.net/sample/justgage/index2.html
解説
common.js(6)
pointer : trueを指定することでゲージ上に時計の針のような物が付与される
pointerの形を指定するには以下のように書く
[javascript]
pointerOptions: {
toplength: -1,
bottomlength: 5,
bottomwidth: 5,
color: ‘#FF0040’,
stroke: ‘#ffffff",
stroke_width: 2,
stroke_linecap: ‘round’
},
[/javascript]
common.js(9)
ゲージの幅を調整することができる
common.js(10~18)
ゲージの色を指定しているが、valueの値によって0~50までの色の表示と、50~100までの色の表示を分けるように指定している。
ドーナッツ型のゲージ
common3.js
[javascript]
var g = new JustGage({
id: "gauge",
value: 47,
min: 0,
max: 100,
Symbol : ‘%’,
pointer: true,
donut: true,
pointer: true,
gaugeWidthScale: 0.3,
pointerOptions: {
toplength: 10,
bottomlength: 10,
bottomwidth: 8,
color: ‘#000,’
},
counter: true
});
[/javascript]
サンプル
https://weblion303.net/sample/justgage/index3.html
解説
common.js(8)
donut: trueで半円のゲージではなく、円形のゲージにすることができる
アニメーションを無効にする
値を動的に変化させようと思うとアニメーションが邪魔だったりする。
ダウンロードしたプラグインに手を加えることでアニメーションの設定を無効にすることができる。
startAnimationTime~の部分でdataset, 700となっている部分に0を指定する。
justgage.js(149~160)
[javascript]
// startAnimationTime : int
// length of initial animation
startAnimationTime: kvLookup(‘startAnimationTime’, config, dataset, 0),
// startAnimationType : string
// type of initial animation (linear, >, <, <>, bounce)
startAnimationType: kvLookup(‘startAnimationType’, config, dataset, ‘>’),
// refreshAnimationTime : int
// length of refresh animation
refreshAnimationTime: kvLookup(‘refreshAnimationTime’, config, dataset, 0),
[/javascript]
サンプル
https://weblion303.net/sample/justgage/index4.html
影やフォントの指定
[javascript] var g = new JustGage({id: ‘gauge’,
value: 40,
min: 0,
max: 100,
Symbol: ‘%’,
donut: true,
pointer: true,
counter: true,
shadowOpacity: 1,
shadowSize: 2,
shadowVerticalOffset: 5,
valueFontColor: ‘#fff’,
title: "Speed",
titleFontColor: "grey",
titleMinFontSize: 20,
});
[/javascript]
サンプル
https://weblion303.net/sample/justgage/index5.html
解説
common.js (10~13)
ゲージに影の効果を加えることができる
common.js(14)
value値のフォントカラーを指定
common.js(17)
タイトルのフォントサイズを指定
