このトピックではコード例を使用して、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 ライブラリ内の複数のファイルで配布される機能に依存します。必要なリソースは以下の方法で読み込むことができます。
|
以下のいずれかを追加します。
|
igLinearGauge
を HTML ページへ追加するための一般的な手順を簡単に示すと、以下のようになります。
igLinearGauge
コントロールを保存するターゲット要素の作成
igLinearGauge
のインスタンスの作成
基本的な描画オプションの構成
スケールの構成
針の追加
比較範囲の追加
この手順では、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>
<!-- Target element for the igLinearGauge -->
<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>
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
igLinearGauge の ASP.NET MVC アプリケーションへの追加: このトピックではコード例を使用して、ASP.NET MVC ヘルパーで ASP.NET MVC ビューに igLinearGauge
コントロールを追加する方法を説明します。
jQuery および MVC API リファレンス リンク (igLinearGauge): このトピックでは、igLinearGauge
コントロールと ASP.NET MVC ヘルパーに関する API 参照ドキュメントへのリンクを提供します。
以下のサンプルでは、このトピックに関連する情報を提供しています。
igLinearGauge
コントロールのシンプルな構成を紹介します。オンラインで表示: GitHub