データベースのデータを直線ゲージで表示するASP.NET アプリケーションの作成

C1LinearGaugeコントロールとC1GridViewコントロールを使ったアプリケーションの作成

コントロールと参照の追加

　ComponentOne Studio for ASP.NET Wijmo 2012Jをインストールしたら、プロジェクトに2つのコントロールを追加します。

　ツールボックスに専用のタブを作成し、使用するコンポーネントを追加します。

　追加するコンポーネントは、アセンブリ名が「C1.Web.Wijmo.Controls.4」の「C1LinearGauge」「C1GridView」コントロールです。

アセンブリ名が「C1.Web.Wijmo.Controls.4」の「C1LinearGauge」「C1GridView」コントロールを選択する

　これらのコントロールを追加すると、プロジェクトに以下のランタイムライブラリへの参照が追加されます。

ファイル	内容
C1.Web.Wijmo.Controls.4	本体アセンブリ

　また、プロジェクトに以下のランタイムライブラリが追加されます。

ファイル	内容
C1.C1Report.4.dll	本体アセンブリ
C1.Web.Wijmo.Controls.4.dll	本体アセンブリ

　なお、.NET Framework 4が必要です。

C1LinearGaugeコントロールの機能の補足

　C1LinearGaugeコントロールの概要については、前回の記事を参照してください。ここでは、今回使用するGaugelRange要素について説明します。

　GaugelRange要素は、ゲージの目盛内のある範囲を強調表示したい時（ここではこの範囲を便宜上"レンジ"と呼びます）に使用する要素です。

C1LinearGaugeコントロールの各要素

　この要素は、C1LinearGaugeコントロールの「Ranges」プロパティを使用します。デフォルトでは設定されていないので、Rangesプロパティの値欄をクリックすると表示されるコレクションエディタを使用して、GaugelRangeクラスのインスタンスを追加するという形をとります。

GaugelRangeコレクションエディタ

　StartValue・EndValueプロパティは、目盛内のレンジの位置を決定します。StartDistance・EndDistanceプロパティは、レンジの開始・終了の縦方向の位置を決定します。StartWidth・EndWidthプロパティは、縦方向の長さを決定します。

　また、RangeStyleプロパティを使用して、レンジの塗りつぶしなどを設定できます。

　GaugelRange要素はコレクションなので、ゲージ内にレンジをいくつでも設定することができます。

各プロパティの役割

2つのレンジを設定したゲージ