ComponentZine（ComponentOne）

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

「LinearGauge for ASP.NET Wijmo」のC1LinearGaugeコントロールを使ったアプリケーションの作成

瀬戸遥[著]

2013/03/21 14:00

ポスト

ダウンロードサンプルコード（C#） (157.5 KB)
ダウンロードサンプルコード（VB） (164.8 KB)

　「LinearGauge for ASP.NET Wijmo」のC1LinearGaugeコントロールを使って、スライダコントロールまたは数値入力コントロールで入力したデータを直線ゲージで表示するWebページを作成してみます。

ポスト

はじめに

　データをどうやって視覚化するのか、Webページをデザインする際はいつも悩んでしまいます。例えばデータによっては、ある範囲の中でどの位置にデータがあるのか、という形で表示したい場合があるかもしれません。

　「LinearGauge for ASP.NET Wijmo」（ComponentOne Studio for ASP.NET Wijmo 2012J）のC1LinearGaugeコントロールは、データの範囲と現在の値を直線ゲージで表示する機能を提供するコントロールです。

　値の変化に合わせてポインタと呼ばれる"針"が動き、範囲の中で現在の値がどこにあるのかが一目で分かるようになっています。

　今回は、スライダコントロールおよび数値入力コントロールと組み合わせ、データを直線ゲージで表示するWebページを作成してみました。

スライダを動かすと、ゲージの針がゆっくりと動作するアニメーションで移動する。

数値入力ボックスに数値を入力すると、ゲージの針が終点でバウンドするアニメーションで移動する。

対象読者

　Visual Basic 2010、またはVisual C# 2010を使ってプログラムを作ったことがある人。

必要な環境

　Visual Basic 2010、Visual C# 2010、Visual Studio 2010でプログラムが作れる環境。

　対応ブラウザについては、グレープシティ社Webサイトの「クロスブラウザ対応」ページでご確認ください。

　なお、本プログラムは次の環境で開発・動作確認を行っています。

OS: Windows 7
開発Tool： Visual Studio 2010、.NET Framework 4
ブラウザ： Microsoft Internet Explorer 9

サンプルプログラム実行時の注意事項

[1] Visual StudioでサンプルWebサイトを開く

　Visual Studioをお持ちであれば、「ComponentOne Studio for ASP.NET Wijmo 2012J」トライアル版をインストールし、ソースコード圧縮ファイル「LinearGauge_ASP_vb_src.zip」または「LinearGauge_ASP_cs_src.zip」を解凍すると作成されるプロジェクトファイルを、Visual Studioで開き実行してください。

[2] Visual Studioを使わずにサンプルWebサイトを開く

　Visual Studioを使わずに、サンプルWebサイトを直接IISなどのWebサーバで開く場合は、ソースコード圧縮ファイル「LinearGauge_ASP_vb_src.zip」または「LinearGauge_ASP_cs_src.zip」を解凍すると作成されるプロジェクトファイルを、フォルダ構成を変えずにWebサーバにインストール・登録してください。

　以下は、Microsoft IISサーバにインストールする場合の手順です。

プロジェクトファイルのフォルダを、そのままWebサーバーへ配置します（例：「\Inetpub\wwwroot」直下へ配置）。
サーバーに配置したアプリケーションフォルダに対して、「アプリケーションへの変換」を実行します。
「アプリケーションの追加」ダイアログで、「アプリケーションプール」を「Classic .NET AppPool」に設定します。
クライアントのWebブラウザで、Default.aspxファイルを開きます（例：「http://localhost/mysplit_vb/Default.aspx」）。

注意事項

　Windows Vistaで製品のサンプルをコンパイルしようとするとエラーが発生する場合があります。これは、Windows VistaのUAC（ユーザーアカウント制御）により、製品サンプルがインストールされているフォルダに書き込みができないため、コンパイル時にエラーが発生するという現象です。Visual Studioを管理者権限で実行するか、サンプルプロジェクト一式をアクセス権のあるフォルダに移動してからコンパイルを行うようにしてください。また、Webブラウザでaspxファイルを実行する際にIISサーバでエラーになる場合は、Web.configファイルに以下の1行を追加してください。

 <identity impersonate="false" />

コンポーネントのインストール

　本サンプルアプリケーションでは、「LinearGauge for ASP.NET Wijmo」「Input for ASP.NET Wijmo」「Slider for ASP.NET Wijmo」の3つのコントロールを使用します。

　これらのコントロールを使用するには、Visual Studio、Visual Basic、Visual C#の開発環境に「ComponentOne Studio for ASP.NET Wijmo 2012J」をインストールする必要があります。

　トライアル版は、グレープシティのWebページからダウンロードできます。

　ダウンロードしたい製品にチェックを付け［申込フォーム］ボタンを押すと、「トライアル版申込フォーム」ページに移動しますので、「個人情報の収集および使用に同意する」にチェックを入れ「同意する」ボタンをクリックします。

　トライアル申込フォームが表示されますので、必要情報を登録すると添付トライアルライセンスキーファイルとダウンロードサイトを記載したE-Mailが送られてきます。ここからダウンロードを行ってください。また、ダウンロードファイルは圧縮ファイルになっていますので、解凍してインストーラを起動します。

　制限事項などの詳細については、インストーラに同梱されているリリースノートを参照ください。

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

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

　ツールボックスに専用のタブを作成し、使用するコンポーネントを追加します。追加するコンポーネントは、アセンブリ名が「C1.Web.Wijmo.Controls.4」の「C1LinearGauge」「C1Slider」「C1InputNumeric」コントロールです。

アセンブリ名が「C1.Web.Wijmo.Controls.4」の
「C1LinearGauge」「C1Slider」「C1InputNumeric」を選択する

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

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

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

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

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

C1LinearGaugeコントロールの概要

　「LinearGauge for ASP.NET Wijmo」のC1LinearGaugeコントロールは、データを直線ゲージで表示するコントロールです。

　データの最大値・最小値を使って範囲を作成し、その範囲の中で現在値がどの位置にあるのかが一目で分かるように表示します。

　C1LinearGaugeコントロールは、目盛り・ラベルと針で構成され、針はアニメーション効果を使用して移動します。これらの要素は、色や形状、動作などをカスタマイズすることができます。

C1LinearGaugeコントロール

C1LinearGaugeコントロールの主要機能

　C1LinearGaugeは、以下の独特な主要機能を備えています。

スタイル設定を簡素化

　すべてのゲージ要素は、ニーズに合わせてカスタマイズできます。スタイル変更は、プロパティを単に変更するだけです。ゲージの主な要素はすべて表面に表示されています。カスタムの色、塗りつぶし、フォントなどを持つゲージを作成できます。

範囲

　色付きの範囲をゲージに追加し、特定の値範囲に注目させることができます。プロパティを使用し、開始点と終了点、位置、サイズ、および外観をカスタマイズします。

目盛記号とラベル

　プロパティを使用し、目盛記号とラベルの間隔、位置、および外観をカスタマイズします。書式をゲージラベルに適用することができますので、例えば標準 .NET書式文字列を使用し、ラベルを通貨やパーセント書式に書式設定して表示できます。

向き

　Orientationプロパティを使用することで、線形ゲージをページ上の水平または垂直方向に配置できます。

豊富なカスタマイズ

　使用可能なスタイル属性の豊富なセットを使用し、ゲージの表面とカバーの形状をカスタマイズして任意の外観を作成します。単純な形状を使用してガラス効果をシミュレートすることも可能です。

　ゲージに画像を追加することができ、回転、反転や、色相、彩度、輝度、不透明度の変更など、さまざまな効果を画像に適用できます。

スケールのカスタマイズ

　プロパティを使用し、ゲージスケールの開始と終了角度を設定します。

ポインタのカスタマイズ

　多くの定義済みポインタ形状から選択したり、形状をカスタマイズしたり、独自のカスタム画像をインポートしてポインタとして使用することができます。

　放射型と線形ゲージのポインタ起点の正確な位置を指定することで、ポインタをゲージの左右や下部に移動できます。

アニメーション

　ゲージでは簡単にスムーズなアニメーションを使用できます。アニメーションをカスタマイズすることも可能で、ポインタアニメーションの場合、値が変化する際のアニメーションの時間間隔を設定できます。また、ソース値が頻繁に変化しすぎて確認できない場合は、ゲージコントロールの再描画の頻度を減らせます。

ライブデータ

　ゲージはデータが変化すると、アニメーション表示されます。

対数マーカ

　Islogarithmic/LogarithmicBaseプロパティによって、対数マーカを取得できます。

C1LinearGaugeコントロールの構成要素

　C1LinearGaugeコントロールは、デフォルトでは単純な水平線形ゲージのみを表示します。各部位は次のような要素で構成されています。

TickMajor

　大きな値の目盛を設定します。Min/Maxプロパティを使用して使用可能な範囲を設定します。

TickMinor

　大きな値よりも小さな値の目盛を設定します。

GaugeLabel

　目盛の数値を表示します。

GaugelRange

　スケールに沿った色付きの帯域を表示します。帯域の色はRangeStyleプロパティによって決定され、位置はStartValueとEndValueプロパティによって決定されます。範囲の幅を制御するには、StartWidthとEndWidthプロパティを使用します。

Pointer

　C1LinearGaugeには、範囲内で選択された値を示すポインタが含まれます。ポインタはPointer要素で構成されます。

　デフォルトでは、Pointer要素は青いテーパ要素として表示されます。Pointer要素の外観をカスタマイズするには、GaugePointerクラスのプロパティ（Length、Offset、Shape、PointerStyle、Template、Visible、およびWidthプロパティを含む）を設定します。

　ポインタの位置（範囲内で選択された値）は、Valueプロパティで設定します。

Face

　Face要素はゲージの背景色にあたる部分で、ポインタや目盛・ラベルなどの要素の背後に表示されます。

　デフォルトでは、Face要素は青灰色の円として表示されます。Face要素の外観をカスタマイズするには、GaugeFaceクラスのいくつかのプロパティ（FaceStyleプロパティを含む）を設定します。

C1LinearGaugeコントロールの構成要素（ヘルプより抜粋）

C1LinearGaugeコントロールのサイズと向き

　C1LinearGaugeコントロールの高さと幅は、HeightプロパティとWidthプロパティを設定して簡単に変更できます。

　デフォルトでは、コントロールの高さは80pxに設定され、コントロールの幅は600pxに設定されます。コントロールの高さと幅は、ソースビュー、プロパティウィンドウ、またはコードを使用して容易に変更できます。

　また、C1LinearGaugeコントロールはOrientationプロパティを持っており、それを使用して垂直または水平ゲージを作成できます。

　デフォルトでは、OrientationプロパティはHorizontalに設定され、ゲージはアプリケーション内で水平方向に表示されます。

　垂直ゲージを作成するには、OrientationプロパティをVerticalに設定します。

C1Sliderコントロールの概要

　「Slider for ASP.NET Wijmo」のC1Sliderコントロールは、定義済みの範囲内で値を選択するためのシンプルでなじみのある操作性を提供する入力コントロールです。

　C1Sliderコントロールには、キーボードやマウスホイールのサポートなど、充実した組み込みのアクセス機能が含まれています。

　C1Sliderコントロールは、以下のような機能を備えています。

垂直および水平方向の向き

　スライダは、ページ上で水平または垂直方向に表示できます。デフォルトでは水平方向で配置されます。

インクリメント・デクリメントボタンと範囲スライダ

　1ステップごとの操作には、インクリメント・デクリメントを、値よりも範囲が必要な場面で、範囲スライダを使用して数値を入力できます。ハンドルごとに初期値を設定できます。

　スライダの動作範囲はMax/Minプロパティで設定し、つまみボタンの位置はValueプロパティい格納されます。

　また、インクリメント・デクリメントボタンによる値の変化量は、Stepプロパティで設定します。

堅牢なクライアント側オブジェクトモデル

　スライダには、堅牢なクライアント側オブジェクトモデルが含まれています。この環境では、サーバー側プロパティの大部分がクライアント側で設定でき、クライアント側イベントはプロパティウィンドウで記述されます。この機能により、サーバーにポストバックしなくても、C1Sliderのプロパティやメソッドにアクセスできます。

アニメーション

　組み込みのアニメーション遷移オプションにより、スライダコントロールでアニメーション効果の遷移方法をカスタマイズできます。スライダトラックがクリックされたときのつまみの動き方を変更できます。デフォルトでは、スライダはスムーズで直線的な遷移効果を伴って移動します。

テーマ

　スマートタグをクリックして、6種類のプレミアムテーマ（Arctic、Midnight、Aristo、Rocket、Cobalt、およびSterling）のいずれかを選択して外観を変更します。オプションとして、jQuery UIからThemeRollerを使用してカスタマイズしたテーマを作成します。

CSSのサポート

　CSS（Cascading Style Sheet）のスタイルを使用して、カスタムスキンを定義します。

C1Sliderコントロールの構成要素

　C1Sliderコントロールは、いくつかの異なる要素で構成されています。C1Sliderコントロールには、選択領域を表示するトラック、トラック上で移動可能なつまみボタン、およびトラック上のつまみを動かせる〈インクリメント〉ボタンと〈デクリメント〉ボタンが含まれます。

選択範囲

　選択領域は、1番目のつまみボタンから2番目のつまみボタンまでの選択された範囲を目立つ色で視覚化したものです。

つまみボタン

　C1Sliderコントロールには、2つのつまみボタンが含まれています。1番目の主つまみボタンと2番目のつまみボタンは値範囲の選択に使用されます。デフォルトでは、1番目のつまみボタンが表示され、2番目のつまみボタンは表示されません。つまみボタンの値はValueプロパティによって設定・取得されます。つまみボタンが2つある場合、両方の値がValuesプロパティによって設定・取得されます。

トラック

　C1Sliderコントロールのトラック領域は、スライダの基礎部分です。スライダトラックは、つまみボタンが動いてValueプロパティが設定される領域です。

　トラック部分がクリックされるとValueプロパティとValuesプロパティが変化します。

デクリメントボタン

　スライダのValueプロパティを、Stepプロパティの値だけ減少させます。

　デクリメントボタンとインクリメントボタンは、スライダトラックの両端に表示されます。

インクリメントボタン

　スライダのValueプロパティをStepプロパティの値だけ増加させます。

C1Sliderコントロールの構成要素（ヘルプより抜粋）

C1InputNumericコントロールの概要

　C1InputNumericコントロールは、数値の編集専用コントロールです。この数値エディタを使用すると、アプリケーションでカスタム検証論理を記述せずに入力を指定できます。

　WindowsフォームのUpDownコントロールとよく似ています。

C1InputNumericコントロールの主な特徴

　C1InputNumericコントロールの主な特徴は次のとおりです。

　デフォルトのイベントは「ValueChanged」イベントです。

C1InputNumericコントロールは、直接キーボードから数値を入力することができる数値エディタを持っています。
C1InputNumericコントロールには、英語、スペイン語、ドイツ語、ロシア語など特定のカルチャを選択できます。また、選択されたカルチャに基づいて数値グループ区切り文字（桁区切り文字）、小数点文字、および符号を表示します。
MinValue/MaxValueプロパティを使用して、数値範囲を設定します。
クライアント側イベントが使用可能なため、ポストバックが不要となりWebフォームのパフォーマンスが向上します。

C1InputNumericコントロール

C1InputNumericコントロールの設定

　C1InputNumericコントロールでは、以下のプロパティを設定することで、動作範囲や表示をカスタマイズできます。

プロパティ	説明
Value	Double型。C1InputNumericコントロールの数値。
Text	String型。カルチャ情報（グループ区切り文字など）に準じて表示可能なテキスト。
MinValue	入力可能な最小値。
MaxValue	入力可能な最大値。
DecimalPlaces	表示する小数点以下の桁数（デフォルト：2）を示します。
ThousandsSeparator	桁グループ区切り文字を3桁ごとに挿入するかどうかを示します（桁グループの桁数は選択されたカルチャによって異なります）。
NullText	Null値に表示するテキスト。
ShowNullText	数値が空で、コントロールがフォーカスを失くした際に、Nullテキストを表示します。

　ShowNullText数値が空で、コントロールがフォーカスを失くした際に、Nullテキストを表示します。

　C1InputNumericコントロールでは、スマートタグから最も一般的なC1InputNumericのプロパティにすばやく簡単にアクセスできます。

［C1InputNumericタスク］メニュー（ヘルプより抜粋）

　また、C1InputNumericコントロールは、デフォルトでは数値エディタしか表示されていません。入力用スピンボタンを使用したい場合は、ShowSpinnerプロパティをTrueにします。

　スピンボタンによる入力の増減値は、Incrementプロパティで設定します（デフォルトは1です）。

Webページのデザイン

　では、さっそくアプリケーションを作成していきましょう。作成するアプリケーションは、2つの直線ゲージを持ったWebページです。

　1つ目の直線ゲージは、スライダを使って入力した値をゲージで表示します。値の範囲は0から100までで、20ずつの大きな目盛を表示させ、小さな目盛は5ずつ表示します。

　ポインタのアニメーションはデフォルトのままで、ゆっくり動くアニメーションにします。

　もう一つのゲージは数値入力コントロールでデータを入力し、負の整数を扱い-50から50までの範囲で動作するようにします。ポインタのアニメーションは動作の終点でバウンドするアニメーションにします。

　それぞれ、背景やラベル、目盛、ポインタの色やサイズをカスタマイズし、違うゲージに仕上げます。

ページのレイアウト

　使用するコントロールは、C1LinearGauge、C1InputNumeric、C1Sliderの各コントロールです。

ページレイアウト

最初のゲージの作成

　まずは、ASP.NETアプリケーション用プロジェクトを用意します。マスターページを使う場合は、適宜不要な部分を削除するなど編集しておきます。

　① ツールボックスからC1LinearGaugeコントロールをドラッグ＆ドロップします。デフォルトで、0から100までの目盛を持ったゲージが作成されます。

　今回は、とりあえず動作範囲はこのままでゲージのデザインを変更していきます。

デフォルトのゲージ

　② プロパティウィンドウを使用して、「Height」プロパティを"100px"に、「Width」プロパティを"500px"に変更します。ゲージのサイズはこの2つのプロパティで行います。

目盛のデザイン

　デザインの手始めは目盛のカスタマイズです。これは、TickMajor/TickMinorプロパティを使用します。

　① 最初に大きな値の目盛表示をカスタマイズします。プロパティウィンドウで「TickMajor」プロパティを展開すると、GaugeTickクラスのメンバプロパティが表示されるので、これらを操作して目盛のデザインを設定します。

　また、この中のTickStyleプロパティを展開することで、さらに細かな設定を行うことができます。

　ここでは、次のプロパティの値を変更します。

プロパティ		設定値
Factor		8
Visible		True
Offset		-11
Interval		20
TickStyle	Width	2

　「Factor」プロパティは、目盛の棒線の長さを決定するプロパティです。「Visible」プロパティは、目盛の表示・非表示を決定します。「Offset」は縦方向の目盛の位置を決定します。「Interval」は目盛の間隔を設定します。「20」と設定すると、値が20の間隔で目盛が設定されます。

　「TickStyle－Width」は目盛の線の太さを決定します。

設定した目盛のデザイン

　② 次に、大きな目盛の間隔を埋める小さな目盛を設定します。これは、TickMinorプロパティを使用します。TickMinorプロパティはChartStyleクラスを継承しており、このクラスのメンバプロパティを使用します。

　ここでは、次のプロパティの値を変更します。

プロパティ		設定値
Visible		True
Offset		-11
Interval		5
factor		7
TickStyle	Width	1

　各プロパティの役割はTickMajorプロパティと同じで、それぞれ棒線の長さや位置、太さなどを設定します。

　ここでは、大きな目盛よりも少し短く細い線で、4等分になる間隔で線を設定します。

設定した目盛

ポインタ（針）の設定

　目盛が出来上がったら、今度はポインタを設定します。これは、GaugePointerクラスのメンバプロパティを使用します。

　プロパティウィンドウのPointerプロパティをクリックして展開し、次のプロパティを設定します。

プロパティ		設定値
Length		0.5
Width		8
Offset		0
PointerStyle	Fill Color	Yellow

　「Length」プロパティはポインタの長さを設定します。「Width」はポインタの幅、「Offset」は縦方向の位置、「PointerStyle－Fill Color」はポインタの塗りつぶし色を設定します。

　また、「Shape」プロパティを使用するとポインタの形状を変えることができます。今回は、デフォルトの三角形のままを使用しますので、プロパティ値は「tri」のままにしておきます。

変更したポインタ形状

目盛の数値ラベルの変更

　せっかくなので、目盛の数字も変更してみましょう。これは、GaugeLabelクラスのメンバプロパティを使用します。ラベルの変更といえば、フォントや文字色の変更が主な操作になります。

　プロパティウィンドウでLabelsプロパティをクリックして展開し、次のプロパティを設定します。

プロパティ		設定値
Label Style
	Font Size	12
	Font Weight	800
	Fill Color	#FF6699

　「FontWeight」プロパティは、フォントの太さを決定します。

背景色のデザイン

　最後に、ゲージの背景色を変更します。ここでは、グリーン系のグラデーションで塗りつぶします。

　プロパティウィンドウの「Face－FaceStyle－Fill」プロパティを順番に展開し、「Fill」にある次のプロパティを設定します。

プロパティ	設定値
ColorBegin	#009933
ColorEnd	#99FF99
LinearGradientAngle	90
Type	LinearGradient

　これらのプロパティは、塗りつぶし色のグラデーションを設定します。「ColorBegin」「ColorEnd」プロパティはグラデーションの開始・終了色を設定します。「Type」プロパティはグラデーションの塗りつぶし方法を設定するプロパティで、「LinearGradient」は線形グラデーションを指定しています。「LinearGradientAngle」プロパティは、線形グラデーションの塗りつぶし方向を設定します。

　これで、ゲージのカスタマイズは終了です。

出来上がったゲージ

スライダの作成

　次に、ゲージを操作するスライダを作成します。

　これで、スライダを動かすと連動してゲージのポインタが動作します。

ツールボックスからC1Sliderコントロールをゲージの下側にドラッグ＆ドロップします。
Widthプロパティを「500」に設定し、ゲージと同じ幅にします。
スライダの動作範囲は、Max/Minプロパティで設定します。デフォルトではMaxプロパティが「100」に、Minプロパティが「0」に設定されていますので、今回はこのままデフォルト値を使用します。
Visual Studioのデザイナを「ソース」に切り替え、C1Sliderタグの下に次のJavaScriptを入力します。このコードは、スライダの動作によって変化したValueプロパティの値を、ゲージのValueプロパティに代入します。

<script type="text/javascript">
    $(document).ready(function () {
        $("#<%= C1Slider1.ClientID %>").c1slider({
            value: $("#<%= C1LinearGauge1.ClientID %>").c1lineargauge("option", "value"),
            change: function (event, ui) {
                $("#<%= C1LinearGauge1.ClientID %>").c1lineargauge("option", "value", ui.value);
            }
        });
    });
</script>

スライダと連動するゲージが出来上がる

2つ目のゲージの作成

　次に2つ目のゲージを作成します。このゲージは、値の入力を数値入力ボックスを使用し、動作範囲を-50から50までとします。負の値を動作範囲に使用しますので、ゲージは値「0」を中心として、左右にポインタが動くことになります。

　今回はアニメーションの設定も変更し、ポインタの動作が終点でバウンドするアニメーションにします。

　① ツールボックスからC1LinearGaugeコントロールをドラッグ＆ドロップし、次のプロパティを設定します。

　今回は動作範囲を変更しますので、Max/Minプロパティの設定値も変えます。

C1LinearGauge
プロパティ	設定値
Height	100px
Width	500px
Max	50
Min	-50

TickMajor
プロパティ			設定値
Factor			8
Visible			True
Offset			-11
Interval			20
Tick Style
	Width		4
	Fill	Color	#FFFF99

TickMinor
プロパティ		設定値
Visible		True
Offset		-8
factor		4
TickStyle	Width	1

Pointer
プロパティ			設定値
Length			0.5
Width			8
Offset			0
Shape			Rect
Pointer Style
	Height		30
	Fill	Color	Aqua

Labels
プロパティ			設定値
Label Style
	FontSize		14
	FontWeight		800
	Fill	Color	#0066FF

Face
プロパティ			設定値
Face Style	Fill
		ColorBegin	#FF66CC"
		ColorEnd	#FFCCFF"
		LinearGradientAngle	90
		Type	LinearGradient

Animation
プロパティ	設定値
Duration	3000
Easing	EaseOutBounce

　「Animation」プロパティの「Duration」プロパティは、アニメーションの持続時間を示す値を設定するプロパティで、ミリ秒単位で指定します。「Easing」プロパティは、アニメーションの動作の種類を設定するプロパティで、ChartEasing列挙体のメンバを設定します。

ChartEasing列挙体メンバ
メンバ名	説明
EaseInCubic	3型のイージングイン。開始は速度ゼロで、それから加速します。
EaseOutCubic	3次型のイージングインとイージングアウト。開始は全速で、それからゼロまで減速します。
EaseInOutCubic	3次型のイージングインとイージングアウト。開始は速度ゼロで、途中まで加速し、それから再び速度ゼロまで減速します。
EaseInBack	バックのイージングイン。開始は遅く、それから加速します。
EaseOutElastic	5次型のイージングアウト。開始は全速で、それからゼロまで減速します。
EaseOutBounce	バウンドしながらのイージングアウト。開始は速く、それから減速します。バウンドの回数は持続時間に関係します。持続時間が延びれば、バウンドの回数は多くなります。

　② ゲージの下にC1InputNumericコントロールを配置します。

そして、「MaxValue」プロパティを"50"に、「MinValue」プロパティを"-50"に設定します。「ShowSpinner」プロパティを"True"にし、インクリメント/デクリメントボタンを表示します。

　③　Visual Studioのデザイナを「ソース」に切り替え、C1InputNumericタグの下に次のJavaScriptを入力します。このコードは、スライダのときと同様に、数値入力ボックスの動作によって変化したValueプロパティの値を、ゲージのValueプロパティに代入します。

<script type="text/javascript">
$(document).ready(function () {
    $("#<%= C1InputNumeric1.ClientID %>").c1inputnumeri({
        value: $("#<%= C1LinearGauge2.ClientID %>").c1lineargauge("option","value"),
        valueChanged: function (event, ui) {
            $("#<%= C1LinearGauge2.ClientID %>").c1lineargauge("option","value", ui.value);
        }
    });
});
</script>

以上で出来上がりです。

完成した2番目のゲージ