プログラム関係の備忘録。技術系記事1000記事以上を目指すブログ

【JavaScript】アニメーション対応のゲージ描画ライブラリJustGageについて

  • 2018年8月24日
  • 2018年8月26日
  • JavaScript
  • 4823view
  • 0件

はじめに


チャートの描画で有名なライブラリには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)
タイトルのフォントサイズを指定