このサイトで JavaScript が必要です。

バージョン

Is this content useful?

Thank you for your feedback!

Thank you for your feedback! You have rated this topic in the last 30 days.

igBulletGraph の HTML ページへの追加

トピックの概要

目的

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

前提条件

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

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

このトピックの内容

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

igBulletGraph を HTML ページに追加 - 概要

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

要件

以下の表で、igBulletGraph コントロールを使用するための要件を簡単に説明しています。

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

jQuery および jQuery UI JavaScript リソース

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

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

全般的な igBulletGraph JavaScript リソース

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

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

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

JS リソース	説明
infragistics.util.js infragistics.util.jquery.js	Ignite UI for jQuery ユーティリティ
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.ui.widget.js	すべての Ignite UI for jQuery ウィジェットの基本 igWidget。
infragistics.bulletgraph.js	igBulletGraph コントロール
infragistics.ui.bulletgraph.js	igBulletGraph ウィジェット

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

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

手順

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

igBulletGraph コントロールを保存するターゲット要素の作成。
igBulletGraph のインスタンスの作成
基本的な描画オプションの構成
スケールの構成
パフォーマンスバーの追加
比較マーカーの構成
比較範囲の追加

igBulletGraph を HTML ページに追加 - 手順

概要

この手順では、igBulletGraph のインスタンスを HTML ページに追加し、寸法およびスケールを設定して、パフォーマンスバー、比較マーカー、および 3 つの比較範囲をインスタンスに追加します。

この手順では、必要なリソースを HTML ページのヘッダーに追加することを前提としています。そのため、document ready イベントで igBulletGraph コントロールのインスタンスを作成し、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/modules/infragistics.ui.bulletgraph.css" rel="stylesheet"/>
    <script type="text/javascript" src="../../js/jquery.min.js"></script>
    <script type="text/javascript" src="../../js/jquery-ui.js"></script>
    <!-- Bullet Graph Required JavaScript Files -->
    <script src="../../igniteui/js/modules/infragistics.util.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.util.jquery.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.ext_core.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.ext_collections.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.ext_ui.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.dv_jquerydom.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.dv_core.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.dv_geometry.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.ui.widget.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.bulletgraph.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.ui.bulletgraph.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>

手順

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

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

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

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

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

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

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

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

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

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

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

HTML の場合:
```
 $("#bulletGraph").igBulletGraph({
     …
     value:"35"
 });
```
比較マーカーを構成します。

比較目盛マーカーのスケールへの配置は、targetValue プロパティの値で制御します。この例では、targetValue を 43 に設定します。

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

パフォーマンスバーで表示された値とある意味を持たせた範囲の値を比較するためには、比較範囲をスケール上に表示する必要があります。比較範囲は、内部に複数の個別の範囲を定義できる ranges プロパティが制御します。各範囲には、独自の開始値と終了値 (startValue および endValue) と色 (brush) があります。

この例では、3 つの比較範囲を構成します。それぞれ異なる灰色のグラデーションで、スケール目盛の 0、15、30 から開始します。

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

全コード

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

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>
    <!-- Bullet Graph Required JavaScript Files -->
    <script src="../../igniteui/js/modules/infragistics.util.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.util.jquery.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.ext_core.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.ext_collections.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.ext_ui.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.dv_jquerydom.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.dv_core.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.dv_geometry.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.ui.widget.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.bulletgraph.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.ui.bulletgraph.js" type="text/javascript"></script>
        <script type="text/jscript">
        $(function () {             
            $("#bulletGraph").igBulletGraph({
                width: "300px",
                height: "70px",
                minimumValue: "5",
                maximumValue: "55",
                value:"35",
                targetValue:"43",
                ranges: [{
                    name: 'range1',
                    startValue: 0,
                    endValue: 15,
                    brush: '#DCDCDC'
                },
                {
                    name: 'range2',
                    startValue: 15,
                    endValue: 30,
                    brush: '#A9A9A9'
                },
                {
                    name: 'range3',
                    startValue: 30,
                    endValue: 55,
                    brush: '#808080'
                }
                ]
            });
        });
    </script>
</head>
<body>
    <!-- Target element for the igBulletGraph -->
      <div id="bulletGraph"></div>
</body>
</html>

Ignite UI | ヘルプトピック

igBulletGraph の HTML ページへの追加

トピックの概要

目的

前提条件

このトピックの内容

igBulletGraph を HTML ページに追加 - 概要

要件

手順

igBulletGraph を HTML ページに追加 - 手順

概要

プレビュー

前提条件

手順

全コード

関連コンテンツ

トピック

サンプル

Ignite UI | ヘルプ トピック

igBulletGraph の HTML ページへの追加

トピックの概要

目的

前提条件

このトピックの内容

igBulletGraph を HTML ページに追加 - 概要

要件

手順

igBulletGraph を HTML ページに追加 - 手順

概要

プレビュー

前提条件

手順

全コード

関連コンテンツ

トピック

サンプル

Ignite UI | ヘルプトピック