igLinearGauge の HTML ページへの追加

トピックの概要

目的

このトピックではコード例を使用して、igLinearGauge™ コントロールを HTML ページに追加する方法を説明します。

前提条件

このトピックを理解するために、以下のトピックを参照することをお勧めします。

igLinearGauge の概要: このトピックは、主要機能、最小要件およびユーザー機能性など、igLinearGauge コントロールの概念的な情報を提供します。

このトピックの内容

このトピックは、以下のセクションで構成されます。

igLinearGauge の HTML ページへの追加 - 概要

igLinearGauge の追加の概要

igLinearGauge コントロールを Web ページに追加するには、HTML の要素、インスタンス化のベースとなる <div> が必要です。igLinearGauge の基本構成には、寸法、すなわち width と height の値が必要です。

要件

以下の表で、igLinearGauge コントロールの要件を簡単に説明します。

必要なリソース説明必要な作業

jQuery および jQuery UI JavaScript リソース

Ignite UI for jQuery™ は、以下のフレームワークをもとにビルドされます。

ページの <head> セクションで両方のライブラリにスクリプト参照を追加します。

全般的な igLinearGauge JavaScript リソース

igLinearGauge コントロールは、Ignite UI for jQuery ライブラリ内の複数のファイルで配布される機能に依存します。必要なリソースは以下の方法で読み込むことができます。

Infragistics® Loader (igLoader™) を使用します。ページ上に igLoader へのスクリプト参照を含めるのみです。
必要なリソースを手動で読み込みます。以下の表にリストされる依存関係を使用する必要があります。
Ignite UI for jQuery パッケージのすべてのデータビジュアライゼーションコントロールのロジックを含む、2 つの結合ファイル (infragistics.core.js、infragistics.dv.js および infragistics.encoding.js (オプション)) を読み込みます。

以下の表は、igLinearGauge コントロール関連の Ignite UI for jQuery ライブラリの依存関係を示します。igLoader または結合ファイルを使用しない選択をした場合、これらのリソースを明示的に参照する必要があります。

JS リソース	説明
`infragistics.util.js` `infragistics.util.jquery.js`	Ignite UI for jQuery ユーティリティ
`infragistics.ui.widget.js`	すべての Ignite UI for jQuery ウィジェットの基本 igWidget。
`infragistics.ext_core.js` `infragistics.ext_collections.js` `infragistics.ext_ui.js` `infragistics.dv_jquerydom.js` `infragistics.dv_core.js` `infragistics.dv_geometry.js`	データビジュアライゼーションのコア機能
`infragistics.dv_interactivity.js`	パンニング、ズーム、ドラッグなどのユーザーインタラクションのサポートを提供します。
`infragistics.lineargauge.js`	igLinearGauge コントロール
`infragistics.ui.lineargauge.js`	igLinearGauge ウィジェット

以下のいずれかを追加します。

igLoader への参照
すべての必要な JavaScript ファイルへの参照 (左側の表に一覧表示)
結合ファイルへの参照および任意でエンコーディングを含むファイルへの参照

手順

igLinearGauge を HTML ページへ追加するための一般的な手順を簡単に示すと、以下のようになります。

igLinearGauge コントロールを保存するターゲット要素の作成
igLinearGauge のインスタンスの作成
基本的な描画オプションの構成
スケールの構成
針の追加
比較範囲の追加

igLinearGauge の HTML ページへの追加 - 手順

概要

この手順では、igLinearGauge のインスタンスを HTML ページに追加し、寸法およびスケールを設定して針と 3 つの比較範囲をインスタンスに追加します。

この手順では、必要なリソースを HTML ページのヘッダーに追加することを前提としています。そのため、document ready イベントで igLinearGauge コントロールのインスタンスを作成し、DOM の読み込みエラーが発生しないようにします。

プレビュー

以下のスクリーンショットは結果のプレビューです。

前提条件

この手順を実行するには、必要な JavaScript ファイルおよび HTML ページで参照する CSS ファイルが必要です。

HTML の場合:

<!DOCTYPE html>
<html>
<head>
    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="../../igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="../../igniteui/css/structure/infragistics.css" rel="stylesheet"/>
    <script type="text/javascript" src="../../js/jquery.min.js"></script>
    <script type="text/javascript" src="../../js/jquery-ui.js"></script>
    <!-- Linear Gauge Required JavaScript Files -->
    <script type="text/javascript" src="../../igniteui/js/modules/infragistics.util.js"></script>
    <script type="text/javascript" src="../../igniteui/js/modules/infragistics.util.jquery.js"></script>
    <script type="text/javascript" src="../../igniteui/js/modules/infragistics.ui.widget.js"></script>
    <script type="text/javascript" src="../../igniteui/js/modules/infragistics.ext_core.js"></script>
    <script type="text/javascript" src="../../igniteui/js/modules/infragistics.ext_collections.js"></script>
    <script type="text/javascript" src="../../igniteui/js/modules/infragistics.ext_ui.js"></script>
    <script type="text/javascript" src="../../igniteui/js/modules/infragistics.dv_jquerydom.js" ></script>
    <script type="text/javascript" src="../../igniteui/js/modules/infragistics.dv_core.js"></script>
    <script type="text/javascript" src="../../igniteui/js/modules/infragistics.dv_geometry.js"></script>
    <script type="text/javascript" src="../../igniteui/js/modules/infragistics.dv_interactivity.js"></script>
    <script type="text/javascript" src="../../igniteui/js/modules/infragistics.lineargauge.js"></script>
    <script type="text/javascript" src="../../igniteui/js/modules/infragistics.ui.lineargauge.js"></script>
</head>
<body>
</body>
</html>

手順

これらの手順に従って、igLinearGauge を HTML ページに追加します。

igLinearGauge コントロールを保存するターゲット要素の作成。

igLinearGauge コントロールをインスタンス化する HTML 本文に、 <div> 要素を作成します。

HTML の場合:
```
 <body>
     
       <div id="linearGauge"></div>
 </body>
```
igLinearGauge のインスタンスの作成

手順 1 で定義したターゲット要素のセレクターを使用して、igLinearGauge コントロールのインスタンスを作成します。

HTML の場合:
```
 <script type="text/javascript">
     $(function () {                        
         $("#linearGauge").igLinearGauge({
         });
     });
 </script>
```
基本的な描画オプションの構成。

igLinearGauge のインスタンスを作成する場合、width および height の各オプションを構成します。

HTML の場合:
```
 $("#linearGauge").igLinearGauge({
     width: "300px",
     height: "70px"
 });
```
スケールを構成します。

スケールの値をカスタマイズするには、 minimumValue および maximumValue プロパティを設定する必要があります。この例では、スケールは 5 から開始され 55 で終了します。

HTML の場合:
```
 $("#linearGauge").igLinearGauge({
     width: "300px",
     height: "70px",
     minimumValue: "5",
     maximumValue: "55"
 });
```
変化したスケールを以下のスクリーンショットに示します。
針の追加

igLinearGauge の主要なメジャーはその針により視覚化されます。値は value プロパティ設定で制御します。この例では、value を 35 に設定します。

HTML の場合:
```
 $("#linearGauge").igLinearGauge({
         …
     value:"35"
 });
```
以下のスクリーンショットは、これまでの手順で igLinearGauge コントロールの外観がどのようになるか示しています。
比較範囲を追加します。

パフォーマンスバーで表示された値とある意味を持たせた範囲の値を比較するためには、比較範囲をスケール上に表示する必要があります。比較範囲は、内部に複数の個別の範囲を定義できる ranges プロパティが制御します。各範囲には、独自の開始値と終了値 (startValue および endValue) と色 (brush) があります。この例では、3 つの比較範囲を構成します。それぞれ異なる灰色のグラデーションで、スケール目盛の 0、15、30 から開始します。

HTML の場合:
```
 $("#linearGauge").igLinearGauge({
     …
     ranges: [{
         name: 'range1',
         startValue: 0,
         endValue: 15,
         brush: 'red'
     },
     {
         name: 'range2',
         startValue: 15,
         endValue: 30,
         brush: 'yellow'
     },
     {
         name: 'range3',
         startValue: 30,
         endValue: 55,
         brush: 'green'
     }
     ]
 });
```
グラフの最終的な外観を以下に示します。

全コード

以下は、この手順の完全なコードです。

HTML の場合:

<!DOCTYPE html>
<html>
<head>
    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="../../igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="../../igniteui/css/structure/infragistics.css" rel="stylesheet"/>
    <script type="text/javascript" src="../../js/jquery.min.js"></script>
    <script type="text/javascript" src="../../js/jquery-ui.js"></script>
    <!-- Linear Gauge Required JavaScript Files -->
    <script type="text/javascript" src="../../igniteui/js/modules/infragistics.util.js"></script>
    <script type="text/javascript" src="../../igniteui/js/modules/infragistics.util.jquery.js"></script>
    <script type="text/javascript" src="../../igniteui/js/modules/infragistics.ui.widget.js"></script>
    <script type="text/javascript" src="../../igniteui/js/modules/infragistics.ext_core.js"></script>
    <script type="text/javascript" src="../../igniteui/js/modules/infragistics.ext_collections.js"></script>
    <script type="text/javascript" src="../../igniteui/js/modules/infragistics.ext_ui.js"></script>
    <script type="text/javascript" src="../../igniteui/js/modules/infragistics.dv_jquerydom.js" ></script>
    <script type="text/javascript" src="../../igniteui/js/modules/infragistics.dv_core.js"></script>
    <script type="text/javascript" src="../../igniteui/js/modules/infragistics.dv_geometry.js"></script>
    <script type="text/javascript" src="../../igniteui/js/modules/infragistics.lineargauge.js"></script>
    <script type="text/javascript" src="../../igniteui/js/modules/infragistics.ui.lineargauge.js"></script>
    <script type="text/javascript">
        $(function () {             
            $("#linearGauge").igLinearGauge({
                width: "300px",
                height: "70px",
                minimumValue: "5",
                maximumValue: "55",
                value:"35",
                ranges: [{
                    name: 'range1',
                    startValue: 0,
                    endValue: 15,
                    brush: 'red
                },
                {
                    name: 'range2',
                    startValue: 15,
                    endValue: 30,
                    brush: 'yellow'
                },
                {
                    name: 'range3',
                    startValue: 30,
                    endValue: 55,
                    brush: 'green'
                }
                ]
            });
        });
    </script>
</head>
<body>
    <!-- Target element for the igLinearGauge -->
      <div id="linearGauge"></div>
</body>
</html>

Ignite UI | ヘルプトピック

igLinearGauge の HTML ページへの追加

トピックの概要

目的