2つ目のゲージの作成
次に2つ目のゲージを作成します。このゲージは、値の入力を数値入力ボックスを使用し、動作範囲を-50から50までとします。負の値を動作範囲に使用しますので、ゲージは値「0」を中心として、左右にポインタが動くことになります。
今回はアニメーションの設定も変更し、ポインタの動作が終点でバウンドするアニメーションにします。
① ツールボックスからC1LinearGaugeコントロールをドラッグ＆ドロップし、次のプロパティを設定します。
今回は動作範囲を変更しますので、Max/Minプロパティの設定値も変えます。
| プロパティ | 設定値 |
|---|---|
| Height | 100px |
| Width | 500px |
| Max | 50 |
| Min | -50 |
| プロパティ | 設定値 | ||
|---|---|---|---|
| Factor | 8 | ||
| Visible | True | ||
| Offset | -11 | ||
| Interval | 20 | ||
| Tick Style | |||
| Width | 4 | ||
| Fill | Color | #FFFF99 | |
| プロパティ | 設定値 | |
|---|---|---|
| Visible | True | |
| Offset | -8 | |
| factor | 4 | |
| TickStyle | Width | 1 |
| プロパティ | 設定値 | ||
|---|---|---|---|
| Length | 0.5 | ||
| Width | 8 | ||
| Offset | 0 | ||
| Shape | Rect | ||
| Pointer Style | |||
| Height | 30 | ||
| Fill | Color | Aqua | |
| プロパティ | 設定値 | ||
|---|---|---|---|
| Label Style | |||
| FontSize | 14 | ||
| FontWeight | 800 | ||
| Fill | Color | #0066FF | |
| プロパティ | 設定値 | ||
|---|---|---|---|
| Face Style | Fill | ||
| ColorBegin | #FF66CC" | ||
| ColorEnd | #FFCCFF" | ||
| LinearGradientAngle | 90 | ||
| Type | LinearGradient | ||
| プロパティ | 設定値 |
|---|---|
| Duration | 3000 |
| Easing | EaseOutBounce |
「Animation」プロパティの「Duration」プロパティは、アニメーションの持続時間を示す値を設定するプロパティで、ミリ秒単位で指定します。「Easing」プロパティは、アニメーションの動作の種類を設定するプロパティで、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>
以上で出来上がりです。
まとめ
ゲージといえば計測機器などに使われるイメージですが、例えば生産効率や販売医療・在庫量のリアルタイムな表示など、データや情報を視覚化するのにも十分使用できます。
C1LinearGaugeコントロールは、このように簡単に使用できますので、いろいろな用途でデータを視覚化するのに役立つコントロールです。
