SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

ComponentZine(ComponentOne)

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

最初のゲージの作成

 まずは、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」のままにしておきます。

変更したポインタ形状
変更したポインタ形状

次のページ
スライダの作成

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
ComponentZine(ComponentOne)連載記事一覧

もっと読む

この記事の著者

瀬戸 遥(セト ハルカ)

8ビットコンピュータの時代からBASICを使い、C言語を独習で学びWindows 3.1のフリーソフトを作成、NiftyServeのフォーラムなどで配布。Excel VBAとVisual Basic関連の解説書を中心に現在まで40冊以上の書籍を出版。近著に、「ExcelユーザーのためのAccess再...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7052 2013/03/21 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング