RadialGauge for ASP.NET
Wijmo
2014.05.29 更新
グレープシティ株式会社
RadialGauge for ASP.NET Wijmo
目次
はじめに
コンポーネントをプロジェクトに組み込む方法
コンポーネントのランタイムファイル
2
2-3
主な特長
4
クイックスタート
5
手順 1：ページへの C1RadialGauge の追加
5-6
手順 2：コントロールの外観のカスタマイズ
6-7
手順 3：コントロールの動作のカスタマイズ
7-9
RadialGauge for ASP.NET Wijmo の使い方
10
Gauge コントロールを使用する理由
C1RadialGauge の値
C1RadialGauge の StartAngle と SweepAngle
10
10-11
11
C1RadialGauge のインジケータ
11-13
C1RadialGauge のポインタとポインタキャップ
13-14
C1RadialGauge の表面とカバー
14
サーバー側タスク別ヘルプ
14
コードによる C1RadialGauge の作成
コントロールのサイズ変更
1
2
14-16
16
開始値の設定
16-17
最小値と最大値の設定
17-18
クライアント側タスク別ヘルプ
19
クライアント側リファレンス
20
Copyright © GrapeCity inc. All rights reserved. RadialGauge for ASP.NET Wijmo
はじめに
RadialGauge for ASP.NET Wijmo では、正確でグラフィカルな表示が提供されています。円、らせん、円弧、クラム
シェル、または半円形の放射型ゲージから選択することができます。
コンポーネントをプロジェクトに組み込む方法
コンポーネントの組み込み
Visual Studio では、ツールボックスにコンポーネントを追加しただけでは、プロジェクトにコンポーネントを追加したことにはなりま
せん。プロジェクトの参照設定へ追加された時点でコンポーネントが組み込まれます。
以下のいずれかの操作を行うとプロジェクトへコンポーネントが組み込まれます。
フォームにコンポーネントを配置する
ソリューションエクスプローラ上で参照の追加を行う
プロジェクトに組み込まれているコンポーネントの一覧は、ソリューションエクスプローラで確認できます。また、各コンポーネント
が使用している DLL もソリューションエクスプローラに登録される場合があります。詳細については、Visual Studio の製品ヘル
プを参照してください。
本製品で使用しているアセンブリの一覧を以下に示します。
ファイル
内容
C1.C1Report.4.dll
本体アセンブリ
C1.Web.Wijmo.Controls.4.dll
本体アセンブリ
C1.Web.Wijmo.Controls.4.resources.dll
本体アセンブリのサテライトリソース
C1.Web.Wijmo.Controls.Design.4.dll
デザイナアセンブリ
C1.Web.Wijmo.Controls.Design.4.resources.dll
デザイナアセンブリのサテライトリソース
フォームにコンポーネントを配置する方法
以下に、C1RadialGauge コントロールをツールボックスに追加し、フォームに配置する方法を示します。これにより、コンポー
ネントがプロジェクトに組み込まれます。
配置手順
1. ［ツール
ツール］メニューから［ツールボックス
ツールボックス アイテムの選択
アイテムの選択］を選択します。
2. ［ツールボックス
ツールボックス アイテムの選択
アイテムの選択］ダイアログの「.NET Framework コンポーネント
コンポーネント」タブを選択します。
3. 使用するコンポーネントのチェックボックスを ON にして〈OK〉ボタンをクリックしてください。ツールボックスに指定したコン
トロールのアイコンが表示されます。
4. ツールボックスから指定したコントロールのアイコンを選択してフォームに配置します。ソリューションエクスプローラの参
照設定に指定したコントロールの名前空間が追加されます。
コンポーネントのランタイムファイル
2
Copyright © GrapeCity inc. All rights reserved. RadialGauge for ASP.NET Wijmo
Wizard for ASP.NET Wijmo のランタイムファイルは、C:\Program Files\ComponentOne\Studio for
ASP.NET Wijmo\bin\ フォルダにインストールされる次のファイルです。
アセンブリファイル
ファイル
内容
C1.C1Report.4.dll
本体アセンブリ
C1.Web.Wijmo.Controls.4.dll
本体アセンブリ
C1.Web.Wijmo.Controls.4.resources.dll
本体アセンブリのサテライトリソース
注意：
注意：本製品に含まれているファイルのうち、上記以外のファイルは配布できません。
C1.Web.Wijmo.Controls.Design.4.dll
C1.Web.Wijmo.Controls.Design.4.resources.dll
3
Copyright © GrapeCity inc. All rights reserved. RadialGauge for ASP.NET Wijmo
主な特長
C1RadialGauge は、以下の独特な主な特長を備えています。
スタイル設定を簡素化
すべてのゲージ要素はニーズに合わせてカスタマイズできます。ComponentOne のゲージコントロールのスタイ
ル変更は、プロパティを単に変更するだけです。ゲージの主な要素はすべて表面に実装されています。カスタム
の色、塗りつぶし、フォントなどを設定したゲージを作成できます。
範囲
色付きの範囲をゲージに追加し、特定の値範囲に注目させます。単純なプロパティを使用し、開始点と終了点
や、位置、サイズ、および外観をカスタマイズします。開始と終了の幅を指定して非線形範囲を作成し、成長を表
示したり視覚的なアピール力を任意のゲージに追加したりできます。
目盛記号とラベル
目盛記号とラベルを定義します。単純なプロパティを使用し、間隔、位置、および外観をカスタマイズします。書式
をゲージラベルに適用します。たとえば、標準 .NET書式文字列を使用し、ラベルを通貨やパーセント書式に書式
設定します。
豊富なカスタマイズ
使用可能なスタイル属性の豊富なセットを使用し、ゲージの表面とカバーの形状をカスタマイズして希望する任意
の外観を作成します。単純な形状を使用してガラス効果をシミュレートすることさえ可能です。形状が十分でない
場合、画像を追加できます。回転、反転や、色相、彩度、輝度、不透明度の変更など、さまざまな効果を画像に適
用できます。
スケールのカスタマイズ
単純なプロパティを使用し、ゲージスケールの開始と終了角度を設定します。
ポインタのカスタマイズ
多くの定義済みポインタ形状から選択したり、形状をカスタマイズしたり、独自のカスタム画像をインポートしたりし
て、ポインタとして使用します。放射型と線形ゲージのポインタの起点の正確な位置を指定します。これによって、
ポインタをゲージの左右や下部に移動できます。
アニメーション
ゲージでは簡単ににスムーズなアニメーションを使用できます。アニメーションをカスタマイズすることも可能です。
たとえば、ポインタアニメーションの場合、値が変化する際のアニメーションの時間間隔を設定できます。また、
ソース値が頻繁に変化しすぎて確認できない場合は、ゲージコントロールの再描画の頻度を減らせます。
対数マーカ
Islogarithmic と LogarithmicBase プロパティによって、対数マーカを取得できます。
ライブデータ
ゲージはライブデータのストリーミング用に最適化されています。ゲージはデータが変化するとアニメーション表示
されます。
4
Copyright © GrapeCity inc. All rights reserved. RadialGauge for ASP.NET Wijmo
クイックスタート
このクイックスタートでは、C1RadialGauge コントロールの機能について学びます。C1RadialGauge は、独自のビュー
にデータを表示する機能を提供します。
手順 1：ページへの C1RadialGauge の追加
この手順では、Web サイトを作成して設定し、空の C1RadialGauge コントロールを追加します。C1RadialGauge コント
ロールを Web サイトに追加するには、以下の手順を実行します。
1. Visual Studio の［ファイル
ファイル］メニューから、［新規作成
新規作成］→［プロジェクト
プロジェクト］を選択します。［新しいプロジェクト
新しいプロジェクト］ダイアロ
グボックスが表示されます。
2. ［新しいプロジェクト
新しいプロジェクト］ダイアログボックスの左ペインで、言語を展開して、［Web］ を選択します。右ペインで、
［ASP.NET 空の Web アプリケーション
アプリケーション］を選択し、自分のアプリケーションの［名前
名前］を入力して、〈OK〉をクリックし
ます。新しいアプリケーションが作成されます。
3. ソリューションエクスプローラで、プロジェクトを右クリックして［参照の追加
参照の追加］を選択します。
4. ［参照の追加
参照の追加］ダイアログボックスで、C1.Web.Wijmo.Controls アセンブリを探して選択し、〈OK〉をクリックします。
参照が追加されます。
5. ソリューションエクスプローラでプロジェクトを右クリックして、コンテキストメニューから［新しい項目の追加
新しい項目の追加］を選択し
ます。
6. ［新しい項目の追加
新しい項目の追加］ダイアログボックスで、テンプレートのリストから［Web フォーム
フォーム］を選択し、項目 Default.aspx
に名前を付けて、〈追加
追加〉をクリックします。新しいページが開きます。
7. ソース
ソースビューで、次のマークアップをページの上部に追加し、C1RadialGauge アセンブリを登録します。
ソースビュー
<%@ Register Assembly="C1.Web.Wijmo.Controls.4"
Namespace="C1.Web.Wijmo.Controls.C1RadialGauge" TagPrefix="wijmo" %>
追加したアセンブリに応じて、上記で C1.Web.Wijmo.Controls.4 を C1.Web.Wijmo.Controls.3 に置き換える必要
がある場合があります。
8. マウスをページの最初の <div></div>タグの間に入れて、次のマークアップを追加して、C1RadialGauge コント
ロールをページに追加します。
ソースビュー
<wijmo:C1RadialGauge ID="C1RadialGauge1" runat="server">
</wijmo:C1RadialGauge>
9. アプリケーションを実行し、ページが次のような表示になったことを確認します。
5
Copyright © GrapeCity inc. All rights reserved. RadialGauge for ASP.NET Wijmo
この手順では、C1RadialGauge コントロールをフォームに追加しました。ここでは、コントロールは書式設定されていませ
ん。クイックスタートの次の手順では、コンテンツをコントロールに追加します。
手順 2：コントロールの外観のカスタマイズ
この手順では、C1RadialGauge コントロールの外観をカスタマイズします。以下の手順では、「手順 1：ページへの
C1RadialGauge の追加」トピックが完了して、C1RadialGauge コントロールがページに追加されていると想定しています。
C1RadialGauge コントロールをカスタマイズするには、以下の手順を実行します。
1. ソース
ソースビューで、<wijmo:C1RadialGauge></wijmo:C1RadialGauge> タグを編集して、次のような表示にし
ます。
ソースビュー
<wijmo:C1RadialGauge ID="C1RadialGauge1" runat="server" Value="50"
Max="100" StartAngle="-45" SweepAngle="270">
これによって、コントロールの Value と Max 値、およびゲージの StartAngle と SweepAngle が設定されます。
2. マウスを<wijmo:C1RadialGauge></wijmo:C1RadialGauge> タグの間に入れて、次のマークアップを追加
して、C1RadialGauge コントロールの各側面をスタイル設定します。
ソースビュー
<Animation Duration="2000" Easing="EaseOutBack"></Animation>
<Labels Offset="30"></Labels>
<TickMajor Position="Inside" Factor="2" Visible="True" Offset="27"
Interval="25"></TickMajor>
<TickMinor Position="Inside" Visible="True" Offset="30" Interval="5">
</TickMinor>
<Pointer Length="0.8" Width="4" Offset="0.15"></Pointer>
<Ranges>
<Wijmo:GaugelRange EndDistance="0.58" EndValue="10" EndWidth="5"
StartDistance="0.6" StartValue="0" StartWidth="2">
<RangeStyle Stroke="#7BA0CC" StrokeWidth="0">
<Fill Color="#7BA0CC"></Fill>
</RangeStyle>
6
Copyright © GrapeCity inc. All rights reserved. RadialGauge for ASP.NET Wijmo
</Wijmo:GaugelRange>
<Wijmo:GaugelRange EndDistance="0.54" EndValue="75" EndWidth="20"
StartDistance="0.58" StartValue="10" StartWidth="5">
<RangeStyle Stroke="White" StrokeWidth="0">
<Fill ColorBegin="#B4D5F0" ColorEnd="#B4D5F0"
Type="LinearGradient"></Fill>
</RangeStyle>
</Wijmo:GaugelRange>
<Wijmo:GaugelRange EndDistance="0.5" EndValue="100" EndWidth="25"
StartDistance="0.54" StartValue="175" StartWidth="20">
<RangeStyle Stroke="#7BA0CC" StrokeWidth="0">
<Fill Color="#7BA0CC"></Fill>
</RangeStyle>
</Wijmo:GaugelRange>
</Ranges>
次の項目のスタイルを設定することに注意してください。
Animation：アニメーションのオプションを設定します。ここでは、アニメーションの Duration と
Easingを設定します。
Labels：ゲージラベルのオプションとスタイルを設定します。ここでは、ラベルの Offset を設定します。
TickMajor： 主目盛線のオプションとスタイルを設定します。ここでは、主目盛線の
Position、Offset、Interval、および Factor、さらに表示／非表示を設定します。
TickMinor：補助目盛線のオプションとスタイルを設定します。ここでは、補助目盛線の
Position、Offset、および表示／非表示を設定します。
Pointer：ゲージポインタのオプションとスタイルを設定します。ここでは、色とストロークを含むポインタ
のスタイル
スタイルを設定します。
GaugelRange：ゲージ範囲のオプションとスタイルを設定します。ここでは、範囲の位置関係とスタイル
を設定します。
3. アプリケーションを実行し、ゲージが次のような表示になったことを確認します。
加えたスタイル変更がコントロールに反映されていることに注意してください。
この手順では、C1RadialGauge コントロールの外観をカスタマイズしました。次の手順では、コントロールの動作をカスタ
マイズします。
手順 3：コントロールの動作のカスタマイズ
この手順では、スライダコントロールを追加します。実行時にスライダのつまみボタンが移動すると、ゲージコントロールの値
7
Copyright © GrapeCity inc. All rights reserved. RadialGauge for ASP.NET Wijmo
が変化します。次の手順では、「手順 2：コントロールの外観のカスタマイズ」トピックが完了していると想定しています。
以下の手順を実行します。
1. ソース
ソースビューで、次のマークアップを</wijmo:C1RadialGauge> タグのすぐ下に追加して、テキストを追加しま
す。
ソースビュー
<p>スライダのつまみボタンをドラッグ＆ドロップして、ゲージの値を変更する： </p>
2. ソース
ソースビューで、直前に追加した
タグのすぐ下に次のマークアップを追加して、スライダコントロールをページに追加します。
ソースビュー
<div id="slider" style="width: 400px"></div>
これで、ページにスライダコントロールが含まれました。
3. ソース
ソースビューで、直前に追加した </div> タグのすぐ下に次のマークアップを追加して、スライダコントロールを有効に
します。
ソースビュー
<script type="text/javascript">
$(document).ready(function () {
$("#<%= C1Slider1.ClientID %>").c1slider({
value: $("#<%= C1RadialGauge1.ClientID %>").c1radialgauge("option",
"value"),
change: function (event, ui) {
$("#<%= C1RadialGauge1.ClientID %>").c1radialgauge("option",
"value", ui.value);
}
});
});
</script>
これで、スライダの値が変化すると、ゲージの値も変化して新しい値を反映するようになりました。
4. アプリケーションを実行し、次のように、加えた変更がコントロールに表示されることを確認します。
8
Copyright © GrapeCity inc. All rights reserved. RadialGauge for ASP.NET Wijmo
5. スライダのつまみボタンをクリックして、ドラッグ＆ドロップ操作を実行します。C1RadialGauge コントロールの値が
変わって、スライダコントロールの値を反映することに注意してください。
この手順では、コントロールの動作をカスタマイズしました。おめでとうございます、これでクイックスタートは終了で
す。
9
Copyright © GrapeCity inc. All rights reserved. RadialGauge for ASP.NET Wijmo
RadialGauge for ASP.NET Wijmo の使い方
C1RadialGauge は、回転ポインタを使用して、カーブしたスケールに沿った値を表示します。値は Value プロパティに
よって表され、範囲は Min と Max プロパティで定義されます。C1RadialGauge コントロールは、標準的な速度計に類似
した表示になります。
C1RadialGauge コントロールの作成と使用には通常、以下の手順が含まれます。
1. C1RadialGauge コントロールを作成して、メインプロパティであるMin、Max、StartAngle、およ
び SweepAngle を設定します。
2. TickMajor と TickMinor 装飾子を追加してスケールを表示し、GaugeLabel を追加してラベルをカスタマイズし
ます。
3. オプションとして、GaugelRange 装飾子を追加して、スケールの部分をハイライトさせます。範囲は通常、「低すぎ
る」、「正常」、「高すぎる」の各範囲を示すために使用されます。また、範囲を動的にして、Value プロパティが変更さ
れたときに自動的に移動させることもできます。
4. オプションとして、テンプレートを用いてゲージ要素をカスタマイズします。
5. Value プロパティを設定して、表示したい値を表示させます。
Gauge コントロールを使用する理由
ゲージコントロールを使用する必要があるのか疑問に思うかもしれません。ゲージは１つの値を表示するだけであり、その値
はゲージの代わりに単純なラベルを使用しても表示できます。
ゲージがより優れているのは、範囲も表示する点です。これによって、ユーザーは現在の値が低い、高い、または適切かど
うかを瞬時に決定できます。確かに、２つの追加のラベルを使用すれば、範囲も現在の値も表示できますが、それによって
ユーザーインタフェースはさらに分かりにくいものになります。このため、多くのアプリケーションでは、進捗を単にラベルとし
て表示する代わりに、単純な線形ゲージである進捗インジケータが使用されています。
また、ゲージには、単純なラベル（あるいはスライダやスクロールバー）よりも視覚的な魅力があり、アプリケーションの付加
価値が高まります。
C1RadialGauge の値
C1RadialGauge コントロールのMin、Max、およびValue プロパティを使用して、使用可能な範囲とその範囲内で選択
された値を指定できます。
10
Copyright © GrapeCity inc. All rights reserved. RadialGauge for ASP.NET Wijmo
Min と Max プロパティは、ゲージが表示するように設計されている値の範囲を指定します。たとえば、温度計は -40～100
度のスケール範囲、速度計は 0～140 マイル/時の範囲に設定できます。範囲は、Min と Max プロパティ（double 型）か
ら指定されます。C1RadialGauge コントロールのデフォルト範囲は 0～100です。
Value プロパティは、ゲージの現在の値を示します。C1RadialGauge コントロールでは、これはPointer 要素がポイント
している値によって視覚的に示されます。C1RadialGauge コントロールのデフォルトの Value は 0 です。
C1RadialGauge の StartAngle と SweepAngle
範囲が定義されると、Min とMax 値に一致する角度を指定する必要があります。StartAngle は、Value プロパティが範
囲の Min 値に設定されたときのポインタの位置を定義します。SweepAngle は、Value プロパティが範囲の Max 値に
設定されたときに StartAngle に追加される角度を指定します。
すべての角度は、コントロールの上部から右回りに測定された度数で指定されます。負の角度は可能ですが、SweepAngle
の絶対値は 360 度を超えることはできません。デフォルト値は、StartAngle では -140、SweepAngle では 280 です。
以下の図は、StartAngle と SweepAngle プロパティの効果を表示しています。
StartAngle = 0
SweepAngle = 90
StartAngle = 0
SweepAngle = -90
StartAngle = 45
SweepAngle = 270
StartAngle = -160
SweepAngle = 180
StartAngle = -160
SweepAngle = -180
StartAngle = -140
SweepAngle = 280
C1RadialGauge のインジケータ
11
Copyright © GrapeCity inc. All rights reserved. RadialGauge for ASP.NET Wijmo
デフォルトでは、C1RadialGauge コントロールは、青灰色の背景、ポインタ、および非常に基本的なラベルと目盛記号を表
示します。また、大部分のアプリケーションでは、カスタムのラベルと目盛記号で構成されるスケールを表示して、ユーザー
が現在の値とその値のゲージ範囲内の位置を読み取れるようにしたい場合があります。これを実行するに
は、TickMajor、TickMinor、GaugelRange、および GaugeLabel 要素を追加します。
上の図では、カスタマイズされた TickMajor と TickMinor 要素が表示されます。
ソースビュー
<!— 目盛り -->
<TickMajor Position="Inside" Factor="2" Visible="True" Offset="27" Interval="25">
</TickMajor>
<TickMinor Position="Inside" Visible="True" Offset="30" Interval="5"></TickMinor>
OffSet も設定されます。
ソースビュー
<!— ラベルを追加します。-->
<Labels Offset="30"></Labels>
スケールの表示に加えて、スケール範囲の部分をハイライトしたい場合があります。たとえば、赤いマーカを追加して、その
範囲の値が低すぎる（売上）か高すぎる（費用）ことを示したい場合があります。これを実行するには、１つ以上
の GaugelRange 要素を追加します。
上の図では、色付きのGaugelRange 要素が表示されます。
ソースビュー
<!— 色付きの範囲を追加します。-->
<Ranges>
<Wijmo:GaugelRange EndDistance="0.58" EndValue="10" EndWidth="5"
StartDistance="0.6" StartValue="0" StartWidth="2">
<RangeStyle Stroke="#7BA0CC" StrokeWidth="0">
<Fill Color="#7BA0CC"></Fill>
</RangeStyle>
</Wijmo:GaugelRange>
<Wijmo:GaugelRange EndDistance="0.54" EndValue="125" EndWidth="20"
StartDistance="0.58" StartValue="10" StartWidth="5">
<RangeStyle Stroke="White" StrokeWidth="0">
<Fill ColorBegin="#B4D5F0" ColorEnd="#B4D5F0" Type="LinearGradient">
</Fill>
</RangeStyle>
</Wijmo:GaugelRange>
<Wijmo:GaugelRange EndDistance="0.5" EndValue="150" EndWidth="25"
StartDistance="0.54" StartValue="125" StartWidth="20">
<RangeStyle Stroke="#7BA0CC" StrokeWidth="0">
12
Copyright © GrapeCity inc. All rights reserved. RadialGauge for ASP.NET Wijmo
<Fill Color="#7BA0CC"></Fill>
</RangeStyle>
</Wijmo:GaugelRange>
</Ranges>
GaugelRange 要素は、３つの青色の範囲領域を表示します。各 GaugelRange 要素は、スケールに沿ってカーブした帯
域を表示します。帯域の色は RangeStyle プロパティによって決定され、位置は StartValue と EndValue プロパティに
よって決定されます。範囲の幅を制御するには、StartWidth と EndWidth プロパティを使用します。
C1RadialGauge のポインタとポインタキャップ
C1RadialGauge には、コントロールの選択された Value を示すポインタが含まれます。ポインタはPointer 要素と Cap
要素で構成されます。
デフォルトでは Pointer 要素は青いテーパ要素として表示されます。Pointer 要素の外観をカスタマイズするに
は、GaugePointer クラスのいくつかのプロパティ（Length、Offset、Shape、PointerStyle、Template、Visible、お
よび Width プロパティを含む）を設定します。
上の図では、Pointer 要素がカスタマイズされています。
ソースビュー
<!— ポインタ-->
<Pointer Length="1" Width="4" Offset="0.15">
<PointerStyle Stroke="#BF551C">
<Fill Color="#BF551C">
</Fill>
</PointerStyle>
</Pointer>
Cap 要素はデフォルトで青い丸として表示されます。Cap 要素の外観をカスタマイズするには、C1RadialGaugePointerCap
クラスのいくつかのプロパティ（BehindPointer、Radius、PointerCapStyle、Template、および Visible プロパティ
など）を設定します。
上の図では、Cap 要素がカスタマイズされています。
ソースビュー
<!— ポインタキャップ -->
<Cap>
<PointerCapStyle Stroke="#7F9CAD">
13
Copyright © GrapeCity inc. All rights reserved. RadialGauge for ASP.NET Wijmo
<Fill Color="#7F9CAD">
</Fill>
</PointerCapStyle>
</Cap>
C1RadialGauge の表面とカバー
時計と同様に、C1RadialGauge コントロールには、Face 要素が含まれます。Face は背景の上に表示されますが、ポイ
ンタやその他の要素の背後に表示されます。たとえば、下の図では、Face はゲージの要素の背後に表示される単純な灰
色の円です。
上の図では、Face 要素はカスタマイズされています。
ソースビュー
<!— 表面 -->
<Face>
<FaceStyle Stroke="#E0E8EF">
<Fill Color="#E0E8EF">
</Fill>
</FaceStyle>
</Face>
デフォルトでは、Face 要素は青灰色の円として表示されます。Face 要素の外観をカスタマイズするには、GaugeFace ク
ラスのいくつかのプロパティ（FaceStyle と Template プロパティなど）を設定します。
サーバー側タスク別ヘルプ
タスク別ヘルプは、ASP.NET のプログラミングに精通し、コントロールの一般的な使用方法を理解しているユーザーを対象
としています。ヘルプに記述された手順に従うことによって、C1RadialGauge のさまざまな機能をデモンストレーションする
プロジェクトを作成して、C1RadialGauge の機能を理解できます。
各トピックでは、C1RadialGauge コントロールを使用した特定のタスクのソリューションを示します。タスク別ヘルプの各ト
ピックでは、新しい ASP.NET プロジェクトを作成し、必要なアセンブリへの参照を追加済みであることも前提となります。
コードによる C1RadialGauge の作成
コードで C1RadialGauge コントロールを作成するのは、とても簡単です。以下の手順では、PlaceHolder コントロールを
ページに追加して、インポートステートメントを追加した後、C1RadialGauge を追加してカスタマイズし、そのコントロールを
14
Copyright © GrapeCity inc. All rights reserved. RadialGauge for ASP.NET Wijmo
PlaceHolder に追加します。
以下の手順を実行します。
1. デザインビューで、ページをダブルクリックして Page_Load イベントを作成し、コードビューに切り替えます。
2. 次のステートメントをコードエディタの上部に追加し、必要な名前空間をインポートします。
Visual Basic コードの書き方
Visual Basic
Imports C1.Web.Wijmo.Controls.C1Gauge
C# コードの書き方
C#
using C1.Web.Wijmo.Controls.C1Gauge;
3. 次のコードを Page_Load イベントに追加し、C1RadialGauge コントロールを作成してカスタマイズします。
Visual Basic コードの書き方
Visual Basic
' 新しい C1RadialGauge を作成します。
Dim C1RG As New C1RadialGauge
' コントロールのサイズと値を設定します。
C1RG.Height = 200
C1RG.Width = 200
C1RG.Min = 0
C1RG.Max = 100
C1RG.Value = 60
' C1RadialGauge を PlaceHolder コントロールに追加します。
Dim PlaceHolder1 As New PlaceHolder
PlaceHolder1.Controls.Add(C1RG)
form1.Controls.Add(PlaceHolder1)
C# コードの書き方
C#
// 新しい C1RadialGauge を作成します。
C1RadialGauge C1RG = new C1RadialGauge();
// コントロールのサイズと値を設定します。
C1RG.Height = 200;
C1RG.Width = 200;
C1RG.Min = 0;
C1RG.Max = 100;
C1RG.Value = 60;
// C1RadialGauge を PlaceHolder コントロールに追加します。
PlaceHolder PlaceHolder1 = new PlaceHolder();
PlaceHolder1.Controls.Add(C1RG);
form1.Controls.Add(PlaceHolder1);
このトピックの作業結果
アプリケーションを実行し、C1RadialGauge コントロールが作成されたことを確認します。
15
Copyright © GrapeCity inc. All rights reserved. RadialGauge for ASP.NET Wijmo
コントロールのサイズ変更
C1RadialGauge の高さと幅は、Height プロパティと Width プロパティを設定して簡単に変更できます。デフォルトで
は、コントロールの高さは 400px に設定され、幅は 600px に設定されます。コントロールの高さと幅は、ソースビュー、プ
プ
ロパティ
ロパティウィンドウ、またはコードを使用して容易に変更できます。
ソースビューの場合
ソースビューで、Height="200px" と Width="300px" を、<wijmo:C1RadialGauge> タグ内でコントロールの高さと
幅を設定したいサイズに追加します。
ソースビュー
<wijmo:C1RadialGauge ID="C1RadialGauge1" runat="server" Height="200px"
Width="300px">
上記の設定によって、コントロールは高さ 200 ピクセル、幅 300 ピクセルにサイズ変更されます。
プロパティウィンドウの場合
プロパティ
プロパティウィンドウでコントロールの高さと幅を設定するには、次のように Height プロパティと Width プロパティを変更
します。
1. C1RadialGauge をクリックして選択します。
2. プロパティウィンドウに移動し、必要な場合は Layout ノードを拡張して、Height プロパティと Width プロパティを
探します。
3. Height の横に、コントロールの高さにするサイズの値（200px など）を入力します。
4. Width の横に、コントロールの幅にするサイズの値（300px など）を入力します。
5. ［Enter］キーを押すか、プロパティ
プロパティウィンドウの外でクリックして、設定した高さと幅を C1RadialGauge コントロー
ルに適用します。
コードの場合
次のコードを Page_Load イベントに追加し、Height と Width プロパティを高さ 200 ピクセルと幅 300 ピクセルに設定
します。
Visual Basic コードの書き方
Visual Basic
Me.C1RadialGauge1.Height = 200
Me.C1RadialGauge1.Width = 300
C# コードの書き方
C#
this.C1RadialGauge1.Height = 200;
this.C1RadialGauge1.Width = 300;
16
Copyright © GrapeCity inc. All rights reserved. RadialGauge for ASP.NET Wijmo
開始値の設定
このトピックでは、C1RadialGauge コントロールのValue プロパティを変更します。Value プロパティは現在選択されてい
る数値を決定します。デフォルトでは、C1RadialGauge コントロールは 0 に設定された Value から開始しますが、デザイ
ン時、および XAML やコードでこの数値をカスタマイズできます。このトピックでは C1RadialGauge コントロールの
Value を設定していますが、同じ手順を使用して、他のコントロールの Value もカスタマイズできることに注意してください。
デザイン時の場合
C1RadialGauge コントロールのValue をデザイン時に設定するには、以下の手順を実行します。
1. C1RadialGauge を１回クリックして選択します。
2. プロパティ
プロパティウィンドウに移動して、数値（20 など）を Value プロパティの横のテキストボックスに入力します。
これによって、Value プロパティが選択した数値に設定されます。
XAML の場合
たとえば、Value プロパティを設定するには、Value="20" を<wijmo:C1RadialGauge> タグに追加して、次のような記
述にします。
ソースビュー
<wijmo:C1RadialGauge Value="20">
コードの場合
たとえば、Value プロパティを設定するには、次のコードをプロジェクトに追加します。
Visual Basic コードの書き方
Visual Basic
C1RadialGauge1.Value = 20
C# コードの書き方
C#
C1RadialGauge1.Value = 20;
このトピックの作業結果
最初にゲージのPointer は、選択したValue に設定されます。
最小値と最大値の設定
Min とMax プロパティを使用して、ゲージを制限する数値範囲を設定できます。デザイン時、および XAML やコード
で、Min と Max 値をカスタマイズできます。
注意：
注意：Min と Max プロパティを設定する場合、Min を Max より小さくする必要があります。また、Value プロパティ
は、Min と Max 範囲内に入る数値に設定してください（以下の例では、Value は以下で設定された範囲内に入る 0
に設定されています）。
デザイン時の場合
デザイン時にC1RadialGauge コントロールの Min とMax を設定するには、以下の手順を実行します。
1. C1RadialGauge を１回クリックして選択します。
2. プロパティ
プロパティウィンドウに移動して、Max プロパティの横に、数値（50 など）を入力します。
3. プロパティ
プロパティウィンドウで、Min プロパティの横に、数値（-50 など）を入力します。
これによって、Min と Max 値が設定されます。
17
Copyright © GrapeCity inc. All rights reserved. RadialGauge for ASP.NET Wijmo
XAML の場合
XAML でC1RadialGauge コントロールの Min と Max を設定するには、 Maximum="50" Minimum="-50" を
<wijmo:C1RadialGauge> タグに追加して、次のような記述にします。
ソースビュー
<wijmo:C1RadialGauge Name="C1RadialGauge1" Maximum="50" Minimum="-50">
コードの場合
C1RadialGauge コントロールの Min と Max を設定するには、次のコードをプロジェクトに追加します。
Visual Basic コードの書き方
Visual Basic
C1RadialGauge1.Minimum = -50 C1RadialGauge1.Maximum = 50
C# コードの書き方
C#
C1RadialGauge1.Minimum = -50; C1RadialGauge1.Maximum = 50;
このトピックの作業結果
実行時、ゲージは選択された範囲に制限されます。
18
Copyright © GrapeCity inc. All rights reserved. RadialGauge for ASP.NET Wijmo
クライアント側タスク別ヘルプ
クライアント側のタスク別ヘルプは、「Wijradialgauge タスク別ヘルプ」の内容を参考にしてください。
注意：
注意：上記リンク先のサンプルコードに記載されている $("#tabs").wijradialgauge の箇所を、Wijmo コントロールの
場合には $("#<%=C1RadialGauge1.ClientID%>").c1tabs のように置き換える必要があります。
19
Copyright © GrapeCity inc. All rights reserved. RadialGauge for ASP.NET Wijmo
クライアント側リファレンス
クライアント側リファレンスについては、下記のリンクの内容を参考にしてください。
jQuery と jQuery UI の概要
wijradialgauge オプション
wijradialgauge イベント
wijradialgauge メソッド
注意：
注意：上記リンク先のサンプルコードに記載されている $("#radialgauge").wijradialgauge の箇所を、
Wijmo コントロールの場合には $("#<%=C1RadialGauge1.ClientID%>").c1radialgauge のように置き
換える必要があります。
20
Copyright © GrapeCity inc. All rights reserved.
© Copyright 2024 ExpyDoc
