比較範囲の構成 (igLinearGauge)

トピックの概要

目的

このトピックではコード例を使用して、igLinearGauge™ コントロールの範囲を構成する方法を説明します。説明には、範囲の数、位置、長さ、幅、および書式設定が含まれます。

前提条件

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

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

• igLinearGauge の追加: このトピック グループでは、igLinearGauge コントロールを HTML ページと ASP.NET MVC アプリケーションに追加する方法を説明します。

このトピックの内容

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

• 比較範囲の構成
  • 比較範囲構成の概要
  • 比較範囲構成の概要表
  • プロパティ設定
  • 例
• 関連コンテンツ
  • トピック
  • サンプル

比較範囲の構成

比較範囲構成の概要

igLinearGauge コントロールは、その範囲オブジェクトをインスタンス化することで複数の比較範囲をサポートします。

各範囲は、スケールのメジャーでの開始値や終了値、塗りつぶし色、および境界線の幅や色を指定することで個別に構成できます。スケール全域での比較範囲のサイズは、内側と外側の余白を調整して構成します。

比較範囲構成の概要表

以下の表で、igLinearGauge コントロールの比較範囲で構成できる要素を簡単に説明し、構成に使用するプロパティにマップします。

注: 各範囲の brush および outline プロパティに明示的に値を設定しない場合、値は igLinearGauge の rangeBrushes および rangeOutlines オブジェクトの値から読み取られます。値は、各範囲の色やアウトラインの塗りつぶしの設定に継続して使用するブラシ セットの事前定義にも使用できます。

プロパティ設定

以下の表では、任意の動作と各プロパティ設定のマップを示します。

例

以下のスクリーンショットは、以下の設定の結果、igLinearGauge に追加した比較範囲の外観がどのようになるか示しています。

以下のコードはこの例を実装します。

JavaScript の場合:

$(function () {
    $("#linearGauge").igLinearGauge({
        width: "300px",
        height: "70px",
        ranges: [{
             name: 'range1',
             brush:'#008000',
             startValue:"6",
             endValue:"89",
             innerStartExtent:"0.5",
             innerEndExtent:"0.5",
             outerStartExtent:"0.8",
             outerEndExtent:"0.8"
        }]    
    });
});

関連コンテンツ

トピック

このトピックの追加情報については、以下のトピックも合わせてご参照ください。

• スケールの構成 (igLinearGauge): このトピックではコード例を使用して、igLinearGauge コントロールのスケールを構成する方法を説明します。説明には、コントロール内のスケールの配置、スケールの目盛およびラベルの構成が含まれます。

• 針の構成 (igLinearGauge): このトピックではコード例を使用して、igLinearGauge コントロールの針を構成する方法を説明します。説明には、針が示す値、幅、位置、および書式設定が含まれます。

• 背景の構成 (igLinearGauge): このトピックではコード例を使用して、リニア ゲージの背景を構成する方法を説明します。説明には、背景のサイズ、位置、色、および境界線の設定が含まれます。

• ツールチップの構成 (igLinearGauge): このトピックではコード例を使用して、igLinearGauge コントロールのツールチップを有効にする方法および表示する遅延時間を設定する方法を説明します。

サンプル

このトピックについては、以下のサンプルも参照してください。

• 範囲設定: このサンプルでは、igLinearGauge コントロールで比較範囲を設定する方法を紹介します。