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

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

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

はじめに


チャートの描画で有名なライブラリにはchart.jsなどがあるが、ゲージなどの描画に適したライブラリがないかと探してみると、JustGageというのがありました。

用途としては、車のスピードメーターや飛行機のコクピットのイメージでの使い道や、ゲームの体力ゲージなどの表示にも使えるかと思います。
使い方はとても簡単ですが、サンプルがあまり詳しく載っていないようなので、使い方と簡単なカスタム方法を以下で書いていきます。

Just Gageを使う準備

公式サイトからzip形式のファイルをダウンロード
http://justgage.com/

解凍したうちの、以下2つのファイルをコピー
justgage.js
raphael-2.1.4.min.js

任意の場所に配置

JustGageを使いたいページのHTMLファイル内でスクリプトを読込む

上記で使う準備は完了

JustGageのサンプル

公式にもあるのと同程度のサンプルを作ってみる

index.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>

common.js

var g = new JustGage({
    id: "gauge",
    value: 47,
    min: 0,
    max: 100,
    title: "Speed",
    label: "KM",
});

common.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;
}

サンプル

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

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,
    }],
});

サンプル

https://weblion303.net/sample/justgage/index2.html

解説

common.js(6)
pointer : trueを指定することでゲージ上に時計の針のような物が付与される
pointerの形を指定するには以下のように書く

pointerOptions: {
    toplength: -1,
    bottomlength: 5,
    bottomwidth: 5,
    color: '#FF0040',
    stroke: '#ffffff",
    stroke_width: 2,
    stroke_linecap: 'round'
},

common.js(9)
ゲージの幅を調整することができる

common.js(10~18)
ゲージの色を指定しているが、valueの値によって0~50までの色の表示と、50~100までの色の表示を分けるように指定している。

ドーナッツ型のゲージ

common3.js

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
});

サンプル

https://weblion303.net/sample/justgage/index3.html

解説

common.js(8)
donut: trueで半円のゲージではなく、円形のゲージにすることができる

アニメーションを無効にする

値を動的に変化させようと思うとアニメーションが邪魔だったりする。
ダウンロードしたプラグインに手を加えることでアニメーションの設定を無効にすることができる。
startAnimationTime~の部分でdataset, 700となっている部分に0を指定する。

justgage.js(149~160)

    // 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),

サンプル

https://weblion303.net/sample/justgage/index4.html

影やフォントの指定

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,
});

サンプル

https://weblion303.net/sample/justgage/index5.html

解説

common.js (10~13)
ゲージに影の効果を加えることができる

common.js(14)
value値のフォントカラーを指定

common.js(17)
タイトルのフォントサイズを指定