［Wijmo入門］Gaugeコントロールの使い方 – 基本機能編 –

「Wijmo（ウィジモ）」は業務アプリケーションの様々な要件に対応できるUI部品を備えたJavaScriptライブラリです。

Wijmoには、線形や円形のゲージを表示できる「Gauge（ゲージ）」コントロールが含まれています。この記事では、Gaugeコントロールを使って線形ゲージ、ブレットグラフ、円形ゲージの3種類のゲージを作成する方法を紹介します。

開発環境の準備とWijmoの参照
線形ゲージを作成する
ブレットグラフを作成する
円形ゲージを作成する
さいごに

開発環境の準備とWijmoの参照

この記事では以下の開発環境を使用します。

作成するファイルは次の7つです。

page1.html	ページ本体。ページの要素としてGaugeコントロール（線形ゲージ）を配置します
page2.html	ページ本体。ページの要素としてGaugeコントロール（ブレットグラフ）を配置します
page3.html	ページ本体。ページの要素としてGaugeコントロール（円形ゲージ）を配置します
page1.js	Gaugeコントロール（線形ゲージ）を作成するコードを記載します
page2.js	Gaugeコントロール（ブレットグラフ）を作成するコードを記載します
page3.js	Gaugeコントロール（円形ゲージ）を作成するコードを記載します
styles.css	各種ページ要素のスタイル定義を記載します

ページ上の要素のスタイルを以下のように「styles.css」で定義します。

#gauge1{
    height: 2em;
    width: 600px;
    margin-left: 20px;
    margin-top: 80px;
}
#gauge2{
    width: 600px;
    margin-left: 20px;
    margin-top: 100px;
}
#gauge3{
    height: 240px;
    width: 600px;
    margin-left: 20px;
    margin-top: 20px;
}

線形ゲージを作成する

それでは「page1.html」と「page1.js」に次のようなコードを記述してGaugeコントロールを作成しましょう。ここでは3種類のゲージの中から、線形ゲージを表示する方法を紹介します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>線形ゲージ</title>
    <link rel="stylesheet" type="text/css" href="css/wijmo.min.css" />
    <link rel="stylesheet" type="text/css" href="css/styles.css">
    <script src="scripts/wijmo.min.js"></script>
    <script src="scripts/wijmo.gauge.min.js"></script>
    <script src="scripts/cultures/wijmo.culture.ja.min.js"></script>
    <script src="scripts/page1.js"></script>
</head>
<body>
    <div>
        <label>線形ゲージの方向: </label>
        <select id="direction">
            <option value="Left">左へ増加</option>
            <option value="Right" selected>右へ増加</option>
            <option value="Up">上へ増加</option>
            <option value="Down">下へ増加</option>
        </select>
        </br></br>
    </div>
    <div id="gauge1"></div>
</body>
</html>

document.addEventListener("DOMContentLoaded", function () {
    InitializeGauge()
});

function InitializeGauge(){
    // 線形ゲージの基本設定
    const linearGauge = new wijmo.gauge.LinearGauge('#gauge1', {
        min: 0,
        max: 100,
        value: 75,
        step: 1,
        isAnimated: true,
        isReadOnly: false,
        showRanges: false,
        showText: 'All',
        ranges: [
            { min: 0, max: 30, color: 'red' },
            { min: 30, max: 70, color: 'gold' },
            { min: 70, max: 100, color: 'green' },
        ]
    });

    // 線形ゲージ方向の切り替え
    document.querySelector('#direction').addEventListener('change', e => {
        switch(document.querySelector('#direction').value){
            case 'Left':
                linearGauge.direction = 'Left';
                linearGauge.hostElement.style.height = '2em';
                linearGauge.hostElement.style.width = '600px';
                linearGauge.hostElement.style.marginTop = '80px';
                linearGauge.hostElement.style.marginLeft = '20px';
                break;
            case 'Right':
                linearGauge.direction = 'Right';
                linearGauge.hostElement.style.height = '2em';
                linearGauge.hostElement.style.width = '600px';
                linearGauge.hostElement.style.marginTop = '80px';
                linearGauge.hostElement.style.marginLeft = '20px';
                break;
            case 'Up':
                linearGauge.direction = 'Up';
                linearGauge.hostElement.style.height = '240px';
                linearGauge.hostElement.style.width = '2em';
                linearGauge.hostElement.style.marginTop = '-30px';
                linearGauge.hostElement.style.marginLeft = '100px';
                break;
            case 'Down':
                linearGauge.direction = 'Down';
                linearGauge.hostElement.style.height = '240px';
                linearGauge.hostElement.style.width = '2em';
                linearGauge.hostElement.style.marginTop = '-30px';
                linearGauge.hostElement.style.marginLeft = '100px';
                break;
        }
    });
}

LinearGaugeクラスのコンストラクタ内で設定しているプロパティは、線形ゲージ以外のゲージにも共通しています。それぞれの機能を以下に示します。

プロパティ名	説明
min	ゲージに表示できる最小値
max	ゲージに表示できる最大値
value	ゲージに表示される値
step	「value」プロパティを増減する量
isAnimated	値変更時のアニメーションの有無
isReadOnly	値編集の可否
showRanges	「ranges」プロパティに含まれる範囲の表示／非表示
showText	表示するテキストの種類
ranges	独自のゾーンを指定する範囲のコレクション

「select」タグの「change」イベントで設定している「direction」プロパティは線形ゲージだけの機能で、値を増加する方向を指定します。設定値と増加方向は次のとおりです。

プロパティ値	説明
Left	右から左へ増加
Right	左から右へ増加
Up	下から上へ増加
Down	上から下へ増加

作成したページを表示すると次のようになります。

また、マウスでゲージを変化させると、「value」プロパティの値が「ranges」コレクションで指定したどの範囲に含まれるかによって、ゲージの色が変化します。

「select」タグで「上へ増加」を選択すると下の図のようになります。このとき、次の2つのプロパティも同時に変更することで横向きのゲージを適切に縦向きにしています。

hostElement.style.height
hostElement.style.width

ブレットグラフを作成する

次に線形ゲージとよく似たブレットグラフを作成します。

ブレットグラフには、現在の値とターゲット値を表示できるほか、現在の値が良好か不良かを識別するための範囲を設定することもできます。ブレットグラフに特有な機能は次のとおりです。

プロパティ名	説明
bad	値が不良と見なされる基準値
good	値が良好と見なされる基準値
target	目標値

これらのプロパティの値を分かりやすく表示するには「showRanges」プロパティを「true」に設定しておく必要があります。このプロパティが「false」のときには、「value」プロパティが上記のプロパティの値を超えるたびにゲージの色が変化するだけなので、各プロパティの設定値がどこにあるのか確認しづらくなります。

ブレットグラフを表示するための「page2.html」と「page2.js」は次のようになります。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>ブレットグラフ</title>
    <link rel="stylesheet" type="text/css" href="css/wijmo.min.css" />
    <link rel="stylesheet" type="text/css" href="css/styles.css">
    <script src="scripts/wijmo.min.js"></script>
    <script src="scripts/wijmo.gauge.min.js"></script>
    <script src="scripts/cultures/wijmo.culture.ja.min.js"></script>
    <script src="scripts/page2.js"></script>
</head>
<body>
    <div id="gauge2"></div>
</body>
</html>

document.addEventListener("DOMContentLoaded", function () {
    InitializeGauge()
});

function InitializeGauge(){
    // ブレットグラフの基本設定
    const bulletGauge = new wijmo.gauge.BulletGraph('#gauge2', {
        min: 0,
        max: 100,
        value: 75,
        step: 1,
        bad: 30,
        good: 60,
        target: 80,
        isAnimated: true,
        isReadOnly: false,
        showRanges: true,
        showText: 'All'
    });
}

このページを表示すると次のようなブレットグラフになります。

円形ゲージを作成する

円形ゲージはドーナッツチャートから一部のセグメントを切り出したような形をしています。円形ゲージ特有の機能は、次のプロパティで設定します。

プロパティ名	説明
startAngle	ゲージの開始角度
sweepAngle	ゲージの開始から終末までの角度
autoScale	ゲージの自動的な拡大縮小目標値

ここでは「showRanges」プロパティを「true」に設定して「ranges」プロパティで設定したゾーンを表示します。そして「pointer」プロパティが参照する「range」クラスの「thickness」プロパティを使ってゲージの幅を狭くしてゾーンを見やすくしています。

円形ゲージを表示する「page3.html」と「page3.js」は次のとおりです。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>円形ゲージ</title>
    <link rel="stylesheet" type="text/css" href="css/wijmo.min.css" />
    <link rel="stylesheet" type="text/css" href="css/styles.css">
    <script src="scripts/wijmo.min.js"></script>
    <script src="scripts/wijmo.gauge.min.js"></script>
    <script src="scripts/cultures/wijmo.culture.ja.min.js"></script>
    <script src="scripts/page3.js"></script>
</head>
<body>
    <div id="gauge3"></div>
</body>
</html>

document.addEventListener("DOMContentLoaded", function () {
    InitializeGauge()
});

function InitializeGauge(){
    // 円形ゲージの基本設定
    const radialGauge = new wijmo.gauge.RadialGauge('#gauge3', {
        min: 0,
        max: 100,
        value: 75,
        step: 1,
        isAnimated: true,
        isReadOnly: false,
        showRanges: true,
        showText: 'All',
        pointer: {
            thickness: 0.4,
            color: 'steelblue'
        },
        ranges: [
            { min: 0, max: 30, color: 'lightpink' },
            { min: 30, max: 70, color: 'lightyellow' },
            { min: 70, max: 100, color: 'lightgreen' },
        ],
        startAngle: 90,
        sweepAngle: 270,
        autoScale: false
    });
}

作成したページは次のようになります。

今回ご紹介した各種設定は以下のデモアプリケーションでも確認できます（“Run Project”をクリックするとデモが起動します）。

Gaugeコントロールの利用については以下のドキュメントも用意していますので、ここで紹介できなかった機能については、これらのドキュメントを参照していただければと思います。

ヘルプ
https://demo.grapecity.com/wijmo/docs/Topics/Gauge/Gauge-Overview
APIリファレンス
https://demo.grapecity.com/wijmo/api/modules/wijmo_gauge.html
デモ
https://demo.grapecity.com/wijmo/demos/Gauge/Overview/purejs

さいごに

今回はWijmoに含まれているGaugeコントロールの基本的な使用方法を紹介いたしました。Wijmoには、Gaugeコントロールの他にもFlexChart、FlexMap、FinancialChartなどの多様なコントロールが用意されています。さまざまなアプリケーションに最適なデータ可視化機能を提供するこれらのコントロールをぜひご検討いただけますと幸いです。

この他にもWijmoの各種コントロールの基本的な使い方や応用的な使い方の解説を連載記事として公開しています。こちらも是非ご覧ください。

製品サイトでは、Wijmoの機能を手軽に体験できるデモアプリケーションやトライアル版も公開しておりますので、こちらもご確認ください。

また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。

＼この記事をシェアする／