このトピックは、igRadialGauge™ コントロールをウェブ ページに追加し、それをデータにバインドする方法を説明します。
以下は、このトピックを理解するための前提条件として必要な情報を示しています。
トピック
Ignite UI for jQuery の概要: Ignite UI for jQuery™ ライブラリにつぃての一般的情報
Ignite UI for jQuery で JavaScript リソースを使用: このトピックは、必要な JavaScript リソースを追加して Ignite UI for jQuery ライブラリからコントロールを使用する場合の全般的なガイダンスを提供します。
igRadialGauge の概要: このトピックは、主要機能、チャート使用の最小要件およびユーザー機能性など、igRadialGauge コントロールについての概念的な情報を提供します。
このトピックは、以下のセクションで構成されます。
ここでは、Web ページにラジアル ゲージ コントロールを追加する手順を説明します。
以下のスクリーンショットは最終結果のプレビューです。
このトピックでは、ラジアル ゲージを Web ページに追加する方法を順を追って説明します。以下はプロセスの概念的な概要です。
必要なリソースへの参照の追加
igLoader を使用した JavaScript のリソースの参照igRadialGauge が必要とする HTML マークアップの追加
以下の手順は、igRadialGauge コントロールを Web ページに追加する方法を示します。
必要なリソースへの参照を追加します。
概要
必要なリソースを参照します。リソースの参照には以下のものがあります。
Web サイトまたは Web アプリケーションの Scripts/ig という名前のフォルダーへの Ignite UI for jQuery JavaScript ファイルの追加 (詳細は、Ignite UI for jQuery での JavaScript リソースの使用のトピックを参照してください)。
リソースは手動またはローダー (推奨) を使用して追加できます。
igLoader を使用した JavaScript のリソースの参照
Ignite UI for jQuery ライブラリのコントロールで必要な JavaScript および CSS リソースの読み込みには、igLoader™ コントロールを使用することをお勧めします。最初に、igLoader スクリプトをページに追加します。
HTML の場合:
<script type="text/javascript" src="Content/ig/infragistics.loader.js"></script>
HTML ビューでは、以下のように igLoader のインスタンスを作成する必要があります。
HTML の場合:
<script type="text/javascript">
$.ig.loader({
scriptPath: "Scripts/ig/",
cssPath: "Content/ig/",
resources: "igRadialGauge"
});
<script>
resources オプションを igRadialGauge コントロールが描画されるように指定します。
igRadialGauge が必要とする HTML マークアップを追加します。
HTML の例
ゲージのインスタンス コードで参照されるラジアル ゲージの DIV 要素を追加します。
HTML の場合:
<div id="gauge" class="gaugeContainer"></div>
ラジアル ゲージのインスタンスを作成します。
HTML の例
ゲージの div タグをラップしてゲージを描くには、igRadialGauge コントロールをインスタンス化してそのメイン オプションを設定する必要があります。以下のコードを、データ配列定義について上記で使用された <script> タグの既存のコードに追加します。
JavaScript の場合:
$(function () {
$("#gauge").igRadialGauge({
width: "450px",
height: "450px"
});
});
(オプション) 結果を確認します。
結果を検証するには、ページを保存し、Web ブラウザーで最終結果を確認します。ラジアル ゲージは、プレビューに示すように描画されます。
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
背景の構成 (igRadialGauge): このトピックでは、igRadialGauge™ コントロールのバッキング機能の概念的な概要を提供します。バッキング領域のプロパティについて説明し、実装例を提供します。
ラベルの構成 (igRadialGauge): このトピックでは、igRadialGauge™ コントロールを使用したラベルの概念的な概要を提供します。ラベルのプロパティについて説明し、ラベルの構成方法の例も示します。
針の構成 (igRadialGauge): このトピックでは、igRadialGauge™ コントロールを使用した針の概念的な概要を提供します。針のプロパティについて説明し、針の構成方法の例も示します。
範囲の構成 (igRadialGauge): このトピックでは、igRadialGauge™ コントロールの範囲の概念的な概要を提供します。範囲のプロパティについて説明し、範囲をラジアル ゲージに追加する方法の例も示します。
スケールの構成 (igRadialGauge): このトピックでは、igRadialGauge™ コントロールのスケールの概念的な概要を提供します。スケールのプロパティについて説明し、スケールの実装方法の例も示します。
目盛の構成 (igRadialGauge): このトピックでは、igRadialGauge™ コントロールを使用した目盛の概念的な概要を提供します。目盛のプロパティについて説明し、目盛の実装方法の例を示します。
このトピックについては、以下のサンプルも参照してください。
API の使用: ボタンおよび API ビューアーが igRadialGauge の針のメソッドを紹介します。ボタンをクリックすると、ランタイムで針の値を変更するか、針の現在値を取得できます。
ゲージのアニメーション: このサンプルは、transitionDuration プロパティを設定してラジアル ゲージを簡単にアニメーション化する方法を紹介します。
ゲージ針: ポインターとして表示される針は、スケールで単一の値を示します。以下のオプション ペインでラジアル ゲージコントロールの針を操作できます。
ラベル設定: このサンプルは、ラジアル ゲージ コントロールのラベル設定の方法を紹介します。スライダーを使用して、labelInterval および labelExtent プロパティのラベルへの影響を確認できます。
針のドラッグ: このサンプルは、Mouse イベントを使用してラジアル ゲージ コントロールの針をドラッグする方法を紹介します。
範囲: 範囲は、スケールで値の指定した領域を強調表示する視覚的な要素です。オプション ペインを使用してラジアルゲージコントロールの Range プロパティを設定できます。
スケールの設定: スケールは、ラジアル ゲージで値の範囲を定義します。オプション ペインを使用してラジアルゲージコントロールの Scale プロパティを設定できます。
目盛: ゲージの目盛をユーザーが指定した間隔で表示できます。オプション ペインを使用してラジアル ゲージ コントロールの目盛りプロパティを設定できます。
オンラインで表示: GitHub