スポンサーサイト
上記の広告は１ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
新しい記事を書く事で広告が消せます。
コメント
.NET 4.0 (VS2010) Chart（グラフ）Controlの使いこなし！
VS2010（.NET 4.0）より標準化されたChart Controlを使いこなして、アプリケーション作りに活用していきましょう！
Chart Controlは、多機能、高性能なコントロールです。これを使いこなすためには、数多くあるProperty（コレクションやオブジェクト）を実際に体系的に体験しながら学習&トレーニングすることが使いこなしの近道です。
急がば回れ！
実際に一つ一つの機能を体験（トレーニング）することで（学ばなくても）体系が見えてくるようになります。
手っ取り早く、必要な機能を実現したい！ … その場合は、「Chart機能設定早見表」をご覧下さい。
VS2008では、外部からMS Chartコントロールをダウンロードする必要があります。また、VS2010版ではMS Chartのアップデート版ですので下位互換のない機能があることを考慮してください。
モヤモヤを避けるためには
MicrosoftのサンプルプログラムからChartControlを使いこなすノウハウを得るには、基本的な概念や知識がなければモヤモヤしてきます。
- どんなグラフがあるのか？
- どんな機能があるのか？
- どんな方法でできるのか？
- どんな構成になっているのか？
- 系列データとグラフ種別の関係は？
ほとんどの設定はプロパティで行うことができます。そして、メソッドやイベントを駆使することで高度な機能を実現することが可能になります。
様々なオブジェクトとプロパティ設定を順番に試していきましょう！
コントロールは、実際に操作してみないとわからないものです。基本的なプロパティ設定操作を順次演習することでグラフの体系を自然に理解することができます。
グラフ構成は、Chartオブジェクトのコレクション－オブジェクトです。これらのプロパティを設定することで、様々なグラフを描くことができます。
- 注釈コレクション
- ChartAreaコレクション
- 凡例コレクション
- 系列コレクション
- タイトルコレクション
基本的にはVisual StudioのDesigner機能（プロパティウィンドウ）の設定で対応できます。
なお、サンプルグラフデータを元に学習できる「Microsoft Chart Training Tool 」ソフトを公開しますので、こちらを使って学習する方法もあります。途中経過をエクスポート/インポートする機能、グラフのイメージファイルの作成機能があります。
解説は「Microsoft Chart Training Tool」を使って行いますので、Visual Studioによるプロパティウィンドウと異なる場合があるかもしれません。
Microsoft Chart Training Tool （チャート トレーニング ツール） β版 Version 0.3
プロパティ設定に専念して学習できるソフトです。
設定したプロパティ設定とデータを含めてエクスポート/インポートすることができます。つまり、マイクロソフトのChart Sample Projectの様々なグラフ機能のスナップショットを保存して再現することができます。
- 実行モジュールのダウンロード：MicrosoftChartTrainingTool.zip
- サンプル チャート データファイルのダウンロード：GraphSample.zip
「Microsoft Chart Training Tool 」プログラムの解説（使い方）
「リセット」ボタン
プロパティを変更すると、Chart Controlが対処できない組み合わせのProperty設定値になったとき例外が発生してしまい回復できないことが起こります。Property設定をコントロールから行っているためこの状態（例外発生）をプログラムでキャッチすることができません。そこで、このような状況になったときのエマージェンシー機能として、Chart Controlを再起動することにより初期状態に戻します。
「画像保存」ボタン
現在のChart Controlの画像を任意の形式で、指定フォルダに任意の名前で保存します。
「Import」ボタン
ChartControlでExportされたファイルを指定し、その結果をChart Controlに再現します。
その際、この時点で指定されたフォルダにある全てのファイルを取り込み、「←前」「次→」ボタン操作でグラフを切り換えることができます。Chart ControlでExportしていないファイルは無視します。
※指定フォルダにある全てのファイルをファイル名でソートして記録します。
「Export」ボタン
現在のChart ControlのProperty値とデータを任意の名前で保存します。
「←前」ボタン
定フォルダのファイル一覧より、現時点の一つ前のファイルをImportします。
現在先頭の場合、最後尾のファイルをImportします。
※「Import」していない場合の操作は無効（無反応）です。
※フォルダに有効なファイルがない場合も無効（無反応）です。
「次→」ボタン
指定フォルダのファイル一覧より、現時点の一つ次のファイルをImportします。
現在最後尾の場合、先頭のファイルをImportします。
※「Import」していない場合の操作は無効（無反応）です。
※フォルダに有効なファイルがない場合も無効（無反応）です。
キャプションバー
「Import」「←前」「次→」のボタン操作の場合、画面上部のキャプションバーに現在のファイル名を表示します。
Chart Controlのマウス操作
3Dグラフの場合、ドラッグして回転することができます。
Propertyウィンドウ…グラフ表示の設定・変更
画面に表示されるPropertyウィンドウは、Chart Controlオブジェクトです。Chart Controlの主要オブジェクトは、ChartArea、Series、Titles、Legends、Annotationsの各コレクションで提供されます。コレクション表示ボタンをクリックすると、それぞれのPropertyウィンドウがダイアログとして表示されます。
チャートクラス(Chart Control)のオブジェクト体系
概念的体系はほとんど情報がないため、実装的体系つまりチャートクラスのオブジェクト構成を調べながら同時に概念を理解するという形になります。
- サンプルコードからできることを体験する
- サンプルコードのコーディング方法
- 実際に自分で作ってみる
- わき上がってくる疑問を調べていく
このように、ピンポイントによる（つまり虫食い的な）学習だと、どこのコレクションのどのクラスのプロパティ設定だったのか思い出せない、オブジェクトどうしの関連性が見えてこない。のです。
- データはどのオブジェクトにセットすればいいの？
- DataGridViewとバインディングする方法は？
- グラフの種別は？
所詮、人が作ったものです。知らないのは当然ですから、どのような概念で、どのような機能を実装しているのかを一つ一つ見ていきましょう！
Chartクラス Property
| カテゴリ | Property名 | Propertyの内容 |
| グラフ | Annotations | 注釈コレクション |
| ChartAreas | ChartAreaコレクション | |
| Legends | 凡例コレクション | |
| Series | 系列コレクション | |
| Titles | タイトルコレクション | |
| その他 | SuppressExceptions | 致命的でない例外の抑制 |
| データ | DataBindings | コントロールのデータ連結 |
| DataSource | Chart オブジェクトのデータ ソース | |
| Tag | コントロールに関するデータを格納するオブジェクト | |
| フォーカス | CausesValidation | フォーカスを受け取ると検証の実行 |
| ユーザー補助 | AccessibleDescription | ユーザー補助クライアント アプリケーションによるコントロールの説明 |
| AccessibleName | ユーザー補助クライアント アプリケーションによるコントロールの名前 | |
| AccessibleRole | コントロールのアクセスできる役割 | |
| レイアウト | Size | コントロール サイズ |
| 画像 | AntiAliasing | テキスト、グラフィックス描画のアンチエイリアシング |
| IsSoftShadows | 影の描画時に滑らかなグラデーションの適用 | |
| TextAntiAliasingQuality | アンチエイリアシングTextAntiAliasingQuality の種類 | |
| 外観 | BackGradientStyle | 背景グラデーション有無と向き |
| BackHatchStyle | ハッチング スタイル | |
| BackImage | 背景イメージ | |
| BackImageAlignment | Unscaled 描画モードに使用される背景イメージの配置 | |
| BackImageTransparentColor | 透明色として表示される Chart コントロールの色 | |
| BackImageWrapMode | Chart コントロールの背景イメージの描画モード | |
| BackSecondaryColor Gradation / Hatching | グラフの背景の 2 番目の色 | |
| BorderlineColor | 境界線の色 | |
| BorderlineDashStyle | 境界線のスタイル | |
| BorderlineWidth | 境界線の幅 | |
| BorderSkin | Chart コントロールに境界線スキン機能 | |
| Palette | Chart コントロールのパレット | |
| PaletteCustomColors | カスタム パレット カラーの配列 | |
| 動作 | AllowDrop | ユーザーがコントロールにドラッグしたデータの受け入れ |
| ContextMenuStrip | コンロールに関連付けられている ContextMenuStrip | |
| Enabled | コントロールがユーザーとの対話に応答できるかどうかを示す値 | |
| ImeMode | コントロールの IME (Input Method Editor) モード | |
| TabIndex | コンテナー内のコントロールのタブ オーダー | |
| TabStop | Tab キーでフォーカスを移す | |
| Visible | コントロールとそのすべての子コントロールを表示 | |
| 配置 | Anchor | コントロールがバインドされるコンテナーの端 |
| Dock | コントロールの境界のうち、親コントロールにドッキングする境界 | |
| Location | コントロールの左上隅の座標 | |
| Margin | コントロール間の空白 | |
| MaximumSize | GetPreferredSize が指定できる上限のサイズ | |
| MinimumSize | GetPreferredSize が指定できる下限のサイズ | |
| Padding | コントロールの埋め込み | |
| 表示 | BackColor | Chart オブジェクトの背景色 |
| BackgroundImage | BackImage プロパティを使用 | |
| Cursor | マウス ポインターがコントロールの上にあるときに表示されるカーソル | |
| RightToLeft | 右から左へ表示されるフォントを使用するロケールをサポートする | |
| Text | テキスト | |
| UseWaitCursor | 現在のコントロールおよびすべての子コントロールに待機カーソルの使用 | |
| （非表示） | DataManipulator | データを処理するDataManipulator オブジェクト |
Chart－外観カテゴリ
Chart Controlの背景グラデーション設定
BackColorプロパティ：グラフ背景の基本色 BackSecondaryColorプロパティ：グラフ背景の2番目色 BackGradientStyleプロパティ：グラデーションスタイル GradientStyle列挙体
※グラデーションを使用しない場合 |
Chart Controlのハッチングスタイル設定
BackSecondaryColorプロパティ：ハッチング線色 BackHatchStyleプロパティ：ハッチングスタイル ChartHatchStyle列挙体
BackColorプロパティで指定された背景色の上に、 |
Chart Controlの背景用のイメージ設定
BackImageプロパティ：イメージファイルPath、URLを指定（規定値は空白） BackImageWrapModeChartプロパティ："Unscaled" BackImageAlignmentUnscaledプロパティ：画像の配置 ChartImageAlignmentStyle列挙体
BackImageTransparentColorプロパティ：既定値 Empty グラフイメージを描画するときに透明色として表示されるColor値 ※変化しないため用途不明 | ||||||||||||||||||||||
BackImageWrapModeChartプロパティ：背景イメージの描画モード変更 ChartImageWrapMode列挙体
※左図サンプルは、イメージをわかりやすくするためChartAreaのBackColorを透過（Transparent）しています。 |
Chart Controlの境界線設定
BorderlineColorプロパティ：境界線の色 BorderlineDashStyleプロパティ：境界線のスタイル
BorderlineWidthプロパティ：境界線の幅 |
Chart Controlのパレット設定（系列データの描画色）
グラフの規定色はPaletteプロパティが使用されます。
Paletteプロパティ：グラフの基本色
ChartColorPalette列挙体
| メンバー名 | 説明 |
| None | パレットを使用しない |
| Bright | 鮮やかな色調の色 |
| Grayscale | グレースケール色(濃淡の異なる黒色と白色) |
| Excel | Excelスタイルの色 |
| Light | LightStyleスタイルの色(非常に明るい色調の色) |
| Pastel | パステル色 |
| EarthTones | アーストーンの色(緑、茶) |
| SemiTransparent | 半透明の色を使用 |
| Berry | 青系と紫系の色 |
| Chocolate | 濃淡の異なる茶色 |
| Fire | 赤色、オレンジ色、および黄色 |
| SeaGreen | 緑色から青色の範囲の色 |
| BrightPastel | 鮮やかな色調のパステル色 |
Chartオブジェクト、すべてのSeriesオブジェクトの共通パレットです。
データポイントおよびそれに関連付けられた系列に色が割り当てられていない場合、既定の色がデータに割り当てられます。
パレット カスタム カラー
独自の色表現を行う際に有効な機能です。
PaletteCustomColorsプロパティ：独自のパレット（カスタムパレットカラーの配列）
PaletteCustomColorsプロパティを有効にするには、PaletteプロパティをNoneに設定します。
グラフ種別により、意味合いが異なります。
Chart Controlのボーダースキン(BorderSkin)設定…3D境界線スキン
BorderSkinプロパティは、BorderSkinオブジェクトです。
BorderSkinクラス：Chartコントロールに境界線スキン機能
BorderSkinクラスのプロパティ一覧
| 名前 | 説明 |
| BackColor | 背景色 |
| BackGradientStyle | 背景のグラデーションスタイル |
| BackHatchStyle | 背景のハッチスタイル |
| BackImage | 背景イメージ |
| BackImageAlignment | 背景イメージの配置 |
| BackImageTransparentColor | 背景イメージの透明色 |
| BackImageWrapMode | 背景イメージの描画モード |
| BackSecondaryColor | 背景色（2つ目） |
| BorderColor | 境界線色 |
| BorderDashStyle | 境界線のスタイル |
| BorderWidth | 境界線の幅 |
| PageColor | ページの色 |
| SkinStyle | スキンのスタイル |
SkinStyleプロパティ：スキンスタイル
BorderSkinStyle列挙体
| None | 境界線スキンを使用しない |
| Emboss | エンボス境界線スキン |
| Raised | 浮き出た外観の境界線スキン |
| Sunken | くぼんだ外観の境界線スキン |
| FrameThin1 | 角が丸い細い境界線スキン |
| FrameThin2 | 上部の角が丸い細い境界線スキン |
| FrameThin3 | 角が直角の細い境界線スキン |
| FrameThin4 | 外側の角が直角で内側の角が丸い、細い境界線スキン |
| FrameThin5 | ねじが示された、角が丸い細い境界線スキン |
| FrameThin6 | 内側の角が直角で外側の角が丸い、細い境界線スキン |
| FrameTitle1 | 角が丸い境界線スキン |
| FrameTitle2 | 上部の角が丸い境界線スキン |
| FrameTitle3 | 角が直角の境界線スキン |
| FrameTitle4 | 内側の角が丸く外側の角が直角の境界線スキン |
| FrameTitle5 | ねじが示された、角が丸い境界線スキン |
| FrameTitle6 | 外側の角が丸く内側の角が直角の境界線スキン |
| FrameTitle7 | 角が丸い境界線スキン（右側境界線は非表示） |
| FrameTitle8 | 上部および下部のみの角が丸い境界線スキン |
親コンテナ(Formなど)のBackColorと同じ色に設定する
BorderSkin.PageColor = Transparent;
透過することで、Formなどのコンテナの背景色と同化することができます。
2010-12-27 │ 5 動くサンプルプログラムで技術向上 │ コメント : 0 │ トラックバック : 0 │ Edit
Newer Page » PG上達しない理由：「上司は怒り、部下は怒られる」なぜ？
Older Page » もし、プログラマーが『もし、高校野球の女子マネージャーがドラッカーの「マネジメント」を読んだら』を読んだら
Older Page » もし、プログラマーが『もし、高校野球の女子マネージャーがドラッカーの「マネジメント」を読んだら』を読んだら