はじめに
データを視覚化する方法にグラフがあります。といっても、グラフには多種多様なものがあり、データの表現にあったグラフを探すのには苦労します。
このグラフの種類の一つに「バブルチャート」があります。例えば、自動車の売り上げが一番の車種と価格、売上数を輸出国別に比較したい、という場合は棒グラフや折れ線グラフのようなXYチャートでは表現できません。
このような場合に、バブルチャートを使うとデータの比較が容易に行えます。
「PowerTools ComponentOne Studio 2012J」の「C1Chart（2D）」コントロールは、このバブルチャートを作成することができるコントロールです。プログラム実行中でもチャートの元データを入れ替えグラフを更新する機能を備えています。
また、「C1FlexGrid」コントロールはデータを行列で扱うグリッドコントロールで、行列の設定やヘッダの設定、セルのデータの入出力が容易に行える多機能グリッドコントロールです。
そこで、これら2つのコントロールを使ってリアルタイムにデータを入力し、そのデータをバブルチャートで表示するアプリケーションを作成してみました。
対象読者
Visual Basic 2005/2008/2010、またはVisual C# 2005/2008/2010を使ってプログラムを作ったことがある人。
必要な環境
Visual Basic 2005/2008/2010、Visual C# 2005/2008/2010、Visual Studio 2005/2008/2010のいずれかでプログラムが作れる環境。
なお、本プログラムはWindows 7上で動作するVisual Studio 2010を使用して作成し、動作確認を行っています。
プログラム実行時の注意事項
「PowerTools ComponentOne Studio 2012J」を使って作成したアプリケーションを配布する場合、「PowerTools ComponentOne Studio 2012J」のアセンブリファイルを添付する必要があります。これは、CLRのDLLをアプリケーションと一緒に配布するのと同じです。
本記事のサンプルアプリケーションを正常に動作させるためには、次のファイルをインストールする必要があります。
| ファイル名 | 説明 |
| C1.C1FlexGrid.2.dll | 本体アセンブリ |
| C1.C1FlexGrid.4.dll | 本体アセンブリ（※） |
| C1.Win.C1Chart.2.dll | C1Chart 本体アセンブリ |
| C1.Win.C1Chart.4.dll | C1Chart 本体アセンブリ（※） |
このファイルを、プログラムを実行するフォルダに格納します。
.NET Framework 2.0から追加されたクラスやメンバを使用しているので、.NET Framework 2.0以上のバージョンの.NET Frameworkがインストールされていることが必須条件です。
コンポーネントのインストール
「PowerTools ComponentOne Studio 2012J」を使用するには、開発環境（Visual Studio/Visual Basic/Visual C#）に、「PowerTools ComponentOne Studio 2012J」をインストールする必要があります。
インストーラは、グレープシティのWebページからダウンロードできます。
ダウンロードしたい製品にチェックを付け［申込フォーム］ボタンを押すと、「トライアル版申込フォーム」ページに移動しますので、「個人情報の収集および使用に同意する」にチェックを入れ「同意する」ボタンをクリックします。
トライアル申込フォームが表示されますので、必要情報を登録すると添付トライアルライセンスキーファイルとダウンロードサイトを記載したE-Mailが送られてきます。ここからダウンロードします。ダウンロードファイルは圧縮ファイルになっていますので、解凍してインストーラを起動します。
制限事項などの詳細については、インストーラに同梱されているリリースノートを参照ください。
コントロールの追加
「PowerTools ComponentOne Studio 2012J」をインストールしたら、プロジェクトにコントロールを追加します。
ツールボックスに専用のタブを作成し、使用するコンポーネントを追加します。追加するコンポーネントはアセンブリ名が「C1.Win.C1FlexGrid.4」の「C1FlexGrid」コントロールと、アセンブリ名が「C1.Win.C1Chart.4」の「C1Chart」コントロールです。
| コントロール | アセンブリ |
| C1FlexGrid | C1.Win.C1FlexGrid.4 |
| C1Chart | C1.Win.C1Chart.4 |
今回使用するコンポーネントの特徴
今回作成するアプリケーションは、C1FlexGridコントロールに入力したデータをC1Chart2Dコントロールで表示する、という機能を持たせます。 この2つのコントロールの概要・特徴を紹介します。
C1Chart2Dコントロール
C1Chart2Dコントロールは、Windowsアプリケーションで使用可能なグラフコントロールです。 多種多様なグラフを作成することができ、それらの外観や動作を細かく制御できます。
- 1つのプロパティでグラフ種別が変更可能
- スマートデザイナによるインタラクティブなグラフ作成機能
- グラフウィザードにより3つの手順でグラフを作成可能
- ［グラフのプロパティ］ダイアログボックスによる素早い設定が可能
- 視覚エフェクトデザイナによる外観の強化
- 20種類以上のテーマ別色を設定可能
- 積層型グラフの作成
- データ分析に視覚効果を追加
- 1つのプロパティで軸を反転可能
- 実行時のインタラクティブ操作が可能
- グラフを画像として保存可能
- 2種類のグラフの組み合わせが可能
- 軸ラベルの回転表示が可能
- ダイヤ型／クロス型などのシンボルによるデータセットの識別が可能
- 高度な関数のプロットに役立つ組み込みエンジン
- データセットの隠し表示や消去表示が可能
- データラベルの自動作成
- グラフ内の任意の場所に作成できる柔軟性に優れたグラフラベル
- ツールチップの表示
- ハッチ、グラデーション、テクスチャなどカスタムブラシの使用が可能
- マウスカーソル下にあるグラフの座標やデータのインデックス追跡など高度なマウス追跡機能
詳しい内容は、以前C1Chart（2D）コントロールを紹介した記事「Accessのデータをステップチャートで表示する.NETアプリケーションの作成」を参照してください。
C1FlexGridコントロール
C1FlexGridコントロールは、多彩な表現力と柔軟性を兼ね備えた.NETネイティブのグリッドコンポーネントです。 マージ・ソートなどのグリッドに求められる基本仕様に加えて、マルチカラムコンボボックスや Excel、XML の各ファイルの入出力、セルボタン、アウトラインツリー表示、データベースとの連結、コンボボックスとイメージリストの変換、自動データ集計など、グリッドのデータ編集からプレビュー・印刷までをコントロール1つで実現します。
行と列
C1FlexGridコントロールは行と列で構成され、それぞれ専用のコレクションオブジェクトで構成されています。 グリッドをデータソースに連結する場合、行および列の数はデータソースで使用できるデータ量によって自動的に設定されます。非連結モードでは、コレクションCountプロパティを使用し任意の値に設定できます。
列幅は自由に設定でき、プロパティウィンドウでの操作に加え、デザイナ上で列の境界線をドラッグして変更することができます。また、特定の列のサイズ変更を禁止することもできます。
行列ともにヘッダセルを持ち、任意の文字列を設定することができます。
データの取得と設定
C1FlexGridコントロールのデータ操作は、連結モードと非連結モードのどちらの方法も使用できます。
連結モードでは、グリッドはデータソースに接続され、グリッドに表示されるすべてのデータはデータソースから取得します。このモードでは、グリッド上のデータを変更すると元のデータソースのデータも変更されます。
非連結モードでは、グリッドはグリッド独自のデータソースを扱うことができます。
連結モードと非連結モードのどちらの場合も、C1FlexGrid内のデータに最も簡単にアクセスする方法が用意されています。グリッド内のデータにアクセスするには、行列番号を指定してアクセスします。インデクサは、それぞれ先頭の行列が「0」から始まる数字を使用します。 例えば、次のサンプルコードは、グリッドの最初の列に行番号を格納します。
For r As Integer = C1FlexGrid1.Rows.Fixed To C1FlexGrid1.Rows.Count - 1
C1FlexGrid1(r, 0) = r
Next
for (int r = c1FlexGrid1.Rows.Fixed; r < c1FlexGrid1.Rows.Count; r++)
{
c1FlexGrid1[r, 0] = r;
}
セルとセル範囲
グリッドのセルは、キーボードやマウスでカーソルを移動し、グリッドが編集可能であればセルの内容を編集できます。また、グリッドがアクティブの間、カレントセルの周囲にはフォーカス長方形が表示されます。なお、VisualStyleプロパティを設定すると、カレントセルの位置の行および列ヘッダーがハイライト表示になり、カーソルの位置が分かりやすくなります。さらに、拡張セル選択もサポートしており、2つの対角（カレントセルと、セル選択セル）によってセルを範囲で操作できます。
セルのイメージ表示
セルは、数値や文字列を格納することができることに加え、画像も表示することができます。
セルのフォーマット
C1FlexGridコントロールのセルは、表計算ソフトのようにセルの内容に書式を設定することができます。あらかじめプリセットされている書式が使用でき、さらに独自の書式を設定することができます。書式の設定には、セルのFormat プロパティを使用します。プロパティには、書式内容を記号で設定します。さらに、条件付き書式設定も可能です。
| 記号 | 内容 |
| Cまたはc | Currency（通貨）。数値を地域ごとの通貨額を表す文字列に変換。 |
| Eまたはe | Exponential（指数）。数値を"-d.ddd E+ddd"または"-d.ddd e+ddd"という形式の文字列に変換。'd'はそれぞれ1桁の数（0～9）を表します。 |
| Fまたはf | Fixed-point（固定小数点）。数値を、固定の小数位を付けた浮動小数を表す文字列に変換。 |
| Nまたはn | Number（数値）。数値を、小数点の区切り記号と固定の小数位を付けた文字列に変換。 |
| Pまたはp | Percentage（百分率）。数値を百分率で表す文字列に変換。 |
| d | Short Date（短い日付）。 |
| D | Long Date（長い日付）。 |
| t | Short Time（短い時刻）。 |
| T | Long Time（長い時刻）。 |
| d | 現在の日付を1～31までの値で表示。1桁の日付（1～9）の場合は1桁で表示します。 |
| dd | 現在の日付を1～31までの値で表示。1桁の日付（1～9）の場合は前に0を付けて表示します（01～09）。 |
| ddd | 日付の略名を表示。 |
| dddd | 日付の名前を完全に表示。 |
| M | 現在の月を1～12までの値で表示。1桁の月（1～9）の場合は1桁で表示します。 |
| MM | 現在の月を1～12までの値で表示。1桁の月（1～9）の場合は前に0を付けて表示します。 |
| MMM | 月の略名を表示。 |
| MMMMM | 月の名前を完全に表示。 |
| y | 年を最大2桁の数値で表示。年の上2桁は省略されます。1桁の年（1～9）の場合は1桁で表示します。 |
| yy | 年を2桁の数値で表示。年の上2桁は省略されます。1桁の年（1～9）の場合は前に0を付けて表示します。 |
| yyyy | 年を完全な4桁の数値で表示。 |
| / | 日付の区切り記号。 |
| 0 | 0プレースホルダ。書式設定文字列に'0'を指定した位置に数字がある場合、その数字が出力文字列にコピーされます。小数点より前で一番左にある'0'の位置と、小数点より後で一番右にある'0'の位置が、出力文字列に常に表示される数字の桁数を決定します。 |
| # | 桁プレースホルダ。書式設定文字列に'#'を指定した位置に数字がある場合、その数字が出力文字列にコピーされます。数字がない場合は、出力文字列のこの位置には何も表示されません。 |
| . | 小数点。書式設定文字列内の最初の'.'文字が、書式設定する値における小数点の区切り記号の位置を決定します。最初の'.'以外の'.'文字は無視されます。 |
| , | 桁区切り記号。小数点の区切り記号より、左の数値から3桁ごとに桁区切り記号が挿入されます。書式設定文字列の小数点のすぐ左に1つ以上の','文字がある場合、数値は','文字の数だけ1000を乗じた値で除算されて表示されます。 |
| % | 百分率プレースホルダ。'%'文字が書式設定文字列にあると、数値が100倍されてから書式設定されます。 |
| ; | セクション区切り記号。';'文字は、書式設定文字内で正数、負数、および0のセクションを区切るのに使用します。 |
セルの外観
セルの外観（配置、フォント、色、ボーダーなど）を自由に編集できます。 グリッドにはStylesプロパティがあり、このプロパティにグリッドの書式設定に使用するスタイルのコレクションが格納されています。このコレクションは、グリッド要素（固定セル、スクロール可能セル、セル範囲、フォーカスセルなど）の外観を定義する組み込みメンバを持っています。これらのスタイルを変更し、グリッドの外観を変更できます。また、独自のカスタムスタイルを作成し、セル、行、または列に設定することができます。
セルの編集
デフォルトでは、固定行と固定列を除くすべてのセルが編集可能状態になっており、次の操作が行えます。
- セルに直接入力。入力すると、セルの内容は入れ替わります。
- ［F2］キーまたは［Enter］キーを押す。すると、グリッドは編集モードになり、カレントセルの内容が編集できます。
- セルをダブルクリック。これは［F2］キーを押した場合と同じことになりますが、クリックした場所の近くから編集が行えます。
また、特定のセルの編集に制限をかけ、編集できないようにすることもできます。 さらに、セルの入力に値をドロップダウンリストから選択させることや、チェックボックス、ボタン、マスク文字列などを使うことができます。ボタンでは、イベントを利用してダイアログからデータをインプットさせるようなこともできます。 入力データの検証機能も備えており、入力値の正当性をチェックする機能を持たせることができます。
その他、セルのマージやカスタムツリーの作成、小計行の作成機能などを持っています。
保存とロード、および印刷
グリッドに入力された内容は、テキスト形式、Excel形式、XML形式で保存と読み込みを行うことができます。 印刷機能では、グリッドの内容をそのまま印刷したり、拡大縮小モード、印刷／印刷プレビューダイアログの表示、ヘッダやフッタの設定などを指定して印刷したりすることができます。
データのフィルタリング機能
列にフィルタを設定することができ、フィルタ条件をユーザーが自由に選ぶことができます。列のAllowFilteringプロパティの値を変更することで、特定の列に対してフィルタリングの動作を無効にしたり、カスタマイズしたりできます。列のAllowFilteringプロパティに設定可能な値は以下のとおりです。
| プロパティ | 設定値 |
| Default | グリッドはColumnFilter型のフィルタを自動的に作成します。このフィルタは後述するValueFilterとConditionFilterを合わせたものです。 |
| ByValue | グリッドはValueFilter型のフィルタを自動的に作成します。このフィルタは、表示すべき値のリストを保持します。リスト上にない値は、エンドユーザーには表示されません。 |
| ByCondition | グリッドはConditionFilter型のフィルタを自動的に作成します。このフィルタでは、”指定の値より大きい”、”指定の値を含む”などといった条件を1つまたは2つ指定します。2つの条件を、AND、ORオペレータで結合することも可能です。 |
| Custom | グリッドはフィルタを自動的に作成しません。開発者が、フィルタのインスタンスを作成し、列のFilterプロパティに明示的に割り当てる必要があります。 |
| None | 列はフィルタリングされません。 |
GUIのデザイン
このプログラムは、C1FlexGridコントロールを非連結モードで設定し、入力されたデータをもとにC1Chart2Dコントロールでバブルチャートを作成します。
C1FlexGridコントロールでは、軸ラベルと各セルへの入力を行います。バブルチャートを作成するには、XY軸データに加えバブルのサイズとなるデータ（Y1軸）とデータ名が必要となるため、行ラベルと合わせて5つの列を作成します。また行数は、とりあえずサンプルプログラムなので7件のデータが格納できるようにします。
C1Chart2Dコントロールは、見やすいグラフにするために、X軸とY軸の最大・最小値を入力できるようにします。 そして、作成したグラフはビットマップ形式の画像として保存できるようにします。
フォームのデザイン
C1Chart、C1FlexGridコントロールを中心に、これらを制御するコントロールを、標準コントロールのTextBox、Buttonコントロールで組み立てていきます。 コードの処理は、4つのButtonコントロールのClickイベントハンドラと、フォームのLoadイベントハンドラを使用します。
フォームの作成
では、フォームのレイアウトを行っていきます。
C1Chartコントロールの配置
最初に、C1Chartコントロールを配置します。
（1）ツールボックスから、C1Chartコントロールをフォームにドラッグアンドドロップします。
（2）スマートタグから「ウィザード」をクリックします。「グラフウィザード」が表示されるので、グラフの種類から「Scatter」を選び、水平スクロールバーを動かして「バブルチャート」を選びます。
（3）「次へ」ボタンをクリックし、「ステップ3」に進みます。
（4）今回のプログラムでは1種類のデータしか使用しませんので、「データセット」の「削除」ボタンをクリックし、「series1」から「series3」を削除して、「series0」だけを残します。
（5）「シンボル」の▼ボタンをクリックし、リストから「Dot」を選びます。
（6）「データテーブル」タブをクリックし、列「X」「Y」の空白のセルをクリックして、あと2行分のデータを入力します。また、「Y1」セルに適当な値を入力し「完了」ボタンをクリックします。
（7）このデータをもとにしたバブルチャートが作成されます。
C1FlexGridコントロールの配置
続いて、C1FlexGridコントロールを配置します。
（1）ツールボックスからC1FlexGridコントロールをフォームにドラッグアンドドロップし、C1Chartコントロールの下に配置します。
（2）プロパティウィンドウで「Cols」プロパティを展開し、「Count」プロパティを「5」に変更します。これで、グリッドは1つの行ヘッダと4つの列になります。
（3）同じくプロパティウィンドウの「Rows」プロパティを展開し、「Count」プロパティを「8」に変更します。これで、グリッドは1つの列ヘッダと7行のセルになります。
（4）C1FlexGridコントロールのスマートタグから「列エディタ」をクリックします。「FlexGrid列エディタ」が表示されますので、行ヘッダの列から順番に列ヘッダをクリックし、「Caption」プロパティに以下の文字列を設定します。これで、列ヘッダが設定されます。
- Data
- データ名
- X軸データ
- Y軸データ
- ボリューム（Y1）
（5）各列の境界線をドラッグし、列幅を調整します。
その他のコントロールの配置
C1Chartでは、グラフのXY軸の最大値・最小値を入力できるインターフェースを、C1FlexGridコントロールでは軸ラベルとなる列ヘッダを変更できるインターフェースを作成します。
（1）GroupBox、Label、TextBox、Buttonの各コントロールを使って2つのインターフェースを作成します。レイアウトは、画面ショットを参考にしてください。
（2）「グラフ作成」と「グラフ保存」ボタンも配置します。そして、4つのButtonコントロールは、それぞれClickイベントハンドラを作成しておきます。
（3）グラフの画像保存のためにSaveFileDialogコントロールを配置します。FileNameプロパティには「*.bmp」を、Filterプロパティには「*.bmp | *.bmp」を設定しておきます。
処理コードの作成
グリッドデータを元にバブルチャートを作成する処理を組み立てていきます。処理の大まかな流れは以下のようになります。
- グリッドの行ラベルの作成（Form1_Load）
- グリッドの列ラベルの設定（Button4_Click）
- グリッドからデータを取得（Button2_Click）
-
グラフの設定（Button2_Click）
- 軸ラベルの作成
- グラフデータのセット
- シンボルの描画設定
- ラベルの作成
- グラフ表示の範囲設定（Button1_Click）
- グラフの保存（Button3_Click）
グリッドの行ラベルの作成
最初に、グリッドの行番号を設定する処理を、フォームのLoadイベントハンドラに作成します。 これは行ヘッダに1から7までの数字を入れる処理で、C1FlexGridコントロール名に（）で行列番号のインデックスを指定し、そのまま値を代入します。
Imports C1.Win.C1Chart
Public Class Form1
'----------------------- グリッドの行ラベルの作成 ----------------------------------------------------
Private Sub Form1_Load(sender As System.Object, e As System.EventArgs) Handles MyBase.Load
Dim i As Integer
For i = 1 To 7
C1FlexGrid1(i, 0) = i
Next
End Sub
using C1.Win.C1Chart;
namespace Bubble_cs
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
//----------------------- グリッドの行ラベルの作成 ----------------------------------------------------
private void Form1_Load(object sender, EventArgs e)
{
int i;
for (i = 1; i <= 7; i++)
{
c1FlexGrid1[i, 0] = i;
}
}
C1FlexGridコントロールへの列ラベルの設定処理
続いて、グリッドの列ラベルを設定する処理を、「Button4」のClickイベントハンドラに作成します。
グリッドの列ラベルは、フォームデザイン時に一度設定していますが、データの内容によって入れ換えられるようにしておきます。この処理は、4つのTextBoxコントロールの入力データを、グリッドの列ヘッダに設定します。列ヘッダのテキストの入れ替えは、C1FlexGrid1コントロールのColsプロパティの引数に列番号を指定し、Captionプロパティに値を設定します。
'----------------------- グリッドの列ラベルの設定 ----------------------------------------------------
Private Sub Button4_Click(sender As System.Object, e As System.EventArgs) Handles Button4.Click
If TextBox5.Text <> "" Then
C1FlexGrid1.Cols(1).Caption = TextBox5.Text
End If
If TextBox6.Text <> "" Then
C1FlexGrid1.Cols(2).Caption = TextBox6.Text
End If
If TextBox7.Text <> "" Then
C1FlexGrid1.Cols(3).Caption = TextBox7.Text
End If
If TextBox8.Text <> "" Then
C1FlexGrid1.Cols(4).Caption = TextBox8.Text
End If
End Sub
//----------------------- グリッドの列ラベルの設定 ----------------------------------------------------
private void button4_Click(object sender, EventArgs e)
{
if( textBox5.Text != "")
{
c1FlexGrid1.Cols[1].Caption = textBox5.Text;
}
if( textBox6.Text != "")
{
c1FlexGrid1.Cols[2].Caption = textBox6.Text;
}
if( textBox7.Text != "")
{
c1FlexGrid1.Cols[3].Caption = textBox7.Text;
}
if( textBox8.Text != "")
{
c1FlexGrid1.Cols[4].Caption = textBox8.Text;
}
}
グリッドからデータを取得
グリッドの準備ができたら、グリッドからデータを取得します。
グラフの作成には、グリッドの「X軸」「Y軸」「Y1」という3列分のデータが必要なので、これをC1FlexGridコントロールのGetDataDisplayメソッドを使って取得し、配列に格納しておきます。
GetDataDisplayメソッドは、セルの値を文字列として取得して返してくるメソッドで、引数にセルの位置を行列番号で指定します。メソッドの戻り値が文字列なので、ConvertクラスのToInt16メソッドで整数に変換してから、配列に格納します。
'----------------------- グラフ作成 ----------------------------------------------------
Private Sub Button2_Click(sender As System.Object, e As System.EventArgs) Handles Button2.Click
Dim xp(6) As Integer
Dim yp(6) As Integer
Dim vol(6) As Integer
Dim i As Integer
'グリッドからデータを取得
For i = 0 To 6
xp(i) = Convert.ToInt16(C1FlexGrid1.GetDataDisplay(i + 1, 2))
yp(i) = Convert.ToInt16(C1FlexGrid1.GetDataDisplay(i + 1, 3))
vol(i) = Convert.ToInt16(C1FlexGrid1.GetDataDisplay(i + 1, 4))
Next i
//----------------------- グラフ作成 ----------------------------------------------------
private void button2_Click(object sender, EventArgs e)
{
int[] xp = new int[7];
int[] yp = new int[7];
int[] vol = new int[7];
int i;
//グリッドからデータを取得
for(i=0; i<=6; i++)
{
xp[i] = Convert.ToInt16(c1FlexGrid1.GetDataDisplay(i + 1, 2));
yp[i] = Convert.ToInt16(c1FlexGrid1.GetDataDisplay(i + 1, 3));
vol[i] = Convert.ToInt16(c1FlexGrid1.GetDataDisplay(i + 1, 4));
}
グラフの設定処理
グリッドのデータを取得したら、バブルチャートを更新します。
（1）まず、グリッドの列ラベルを取得し、これをチャートのXY軸ラベルに設定します。列ラベルは、C1FlexGridコントロールのColオブジェクトにあるCaptionプロパティに設定されていますので、これを取得してC1Chartコントロールの「AxisX」「AxisY」クラスのTextプロパティに設定します。
（2）チャートのデータをグリッドのデータに入れ替えます。チャートのデータはチャート作成時にダミーのデータを入れてありますので、これを配列のデータに置き換えます。
チャートのデータは、「C1Chart－ChartGroups－ChartGroupsCollection－ChartData－SeriesList－X」というクラス階層の最後のクラス「X」「Y」「Y1」クラスにあります。このクラスはデータ配列オブジェクト（ChartDataArrayオブジェクト）になっており、この配列にデータが格納されています。データを入れ替えるには、このクラスのCopyDataInメソッドを使用します。このメソッドは、引数に指定した配列データを、各クラスのデータ配列に読み込みます。
（3）チャートデータを設定したら、シンボルのバブルを見やすいように変更します。これらは、ChartSymbolStyleクラスのメンバプロパティを使用し、枠線の色とサイズ、塗りつぶしの色を変更します。
（4）バブルチャートはXY軸にデータのラベルを使用しますので、単純なXYチャートに比べてバブル一つ一つがどのデータを指しているのかが分かりません。そこで、データ名をラベルにしてチャート内に表示します。表示場所は各データ点の横にします。
ただし、グラフ作成を繰り返すと、それまでのラベルが残ったまま次のラベルを作成することになりますので、一度コレクションからラベルを削除します。
これは、LabelsCollectionコレクションオブジェクトのRemoveAllメソッドを使用します。
まず、LabelsCollectionコレクションオブジェクトのCountプロパティですでにラベルががるかどうかを調べ、ラベルがあればRemoveAllメソッドですべてのラベルを削除します。そして、新しいラベルを作成します。
チャートにラベルを組み込むにはLabelオブジェクトを作成し、各プロパティを操作してラベルに仕上げます。ラベルの作成は、LabelsCollectionコレクションにAddNewLabelメソッドを使ってLabelオブジェクトを追加する方法をとります。 そして、次のプロパティを操作しラベルに仕上げます。
Text
ラベルに表示する文字列です。ここでは、グリッドの「データ名」列のデータを取出しラベルで表示します。
Compass
ラベルを表示する位置を指定します。設定値はLabelCompassEnum列挙体のメンバで、以下の値が使用できます。ここでは、「East」を指定し、データ点の右横に表示するようにします。
| メンバ名 | 値 | 説明 |
| North | 0 | ラベルを北（上側）に配置します。 |
| NorthEast | 1 | ラベルを北東（右上側）に配置します。 |
| East | 2 | ラベルを東（右側）に配置します。 |
| SouthEast | 3 | ラベルを南東（右下側）に配置します。 |
| South | 4 | ラベルを南（下側）に配置します。 |
| SouthWest | 5 | ラベルを南西（左下側）に配置します。 |
| West | 6 | ラベルを西（左側）に配置します。 |
| NorthWest | 7 | ラベルを北西（左上側）に配置します。 |
| Radial | 8 | 円グラフで、ラベルをグラフの中心から外側に放射状に配置します。 |
| Orthogonal | 9 | ラベルをグラフの図形線から垂直方向に配置します。 |
| Auto | 10 | ラベルを自動配置します。自動配置の引数は、ChartLabelsクラスのAutoArrangmentプロパティで指定します。 |
AttachMethod
ラベルを配置する位置をどのように指定するのかを、AttachMethodEnum列挙体のメンバで指定します。以下の値が使用できます。ここでは、データ点をラベルの表示位置としますので、「DataIndex」を指定します。
| メンバ名 | 値 | 説明 |
| Coordinate | 0 | 指定したピクセル座標にラベルを添付します。 |
| DataCoordinate | 1 | 指定したデータ座標にラベルを添付します。 |
| DataIndex | 2 | 指定したデータインデックスにラベルを添付します。 |
AttachMethodData、SeriesIndex、PointIndex
グラフグループ、データセット、データポイントインデックスを指定します。ここでは、グラフグループ、データセットは1つしかありませんので、インデックスは「0」を指定し、データポイントは7つのデータそれぞれを指定できるようにForループの変数「i」を設定しておきます。
Style.BackColor
ラベルの背景色を設定します。ここでは、透明にしておきます。
Visible
ラベルを表示するかどうかを設定します。このプロパティを「True」に設定しておかないとラベルは表示されません。
'----------------------- グラフの設定 ----------------------------------------------------
' （1）軸ラベルの作成
C1Chart1.ChartArea.AxisX.Text = C1FlexGrid1.Cols(2).Caption
C1Chart1.ChartArea.AxisY.Text = C1FlexGrid1.Cols(3).Caption
' （2）グラフデータのセット
C1Chart1.ChartGroups.ChartGroupsCollection(0).ChartData.SeriesList(0).X.CopyDataIn(xp)
C1Chart1.ChartGroups.ChartGroupsCollection(0).ChartData.SeriesList(0).Y.CopyDataIn(yp)
C1Chart1.ChartGroups.ChartGroupsCollection(0).ChartData.SeriesList(0).Y1.CopyDataIn(vol)
' （3）シンボルの描画設定
C1Chart1.ChartGroups.ChartGroupsCollection(0).ChartData.SeriesList(0).SymbolStyle.Color = Color.AliceBlue
C1Chart1.ChartGroups.ChartGroupsCollection(0).ChartData.SeriesList(0).SymbolStyle.OutlineColor = Color.LightGreen
C1Chart1.ChartGroups.ChartGroupsCollection(0).ChartData.SeriesList(0).SymbolStyle.OutlineWidth = 3
' （4）ラベルの作成
' 一度ラベルを削除
If C1Chart1.ChartLabels.LabelsCollection.Count > 0 Then
C1Chart1.ChartLabels.LabelsCollection.RemoveAll()
End If
Dim lab As C1.Win.C1Chart.Label
For i = 0 To 6
lab = C1Chart1.ChartLabels.LabelsCollection.AddNewLabel()
lab.Text = C1FlexGrid1.GetDataDisplay(i + 1, 1)
lab.Compass = LabelCompassEnum.East
lab.AttachMethod = AttachMethodEnum.DataIndex
lab.AttachMethodData.GroupIndex = 0
lab.AttachMethodData.SeriesIndex = 0
lab.AttachMethodData.PointIndex = i
lab.Style.BackColor = Color.Transparent
lab.Visible = True
Next
End Sub
//----------------------- グラフの設定 ----------------------------------------------------
// （1）軸ラベルの作成
c1Chart1.ChartArea.AxisX.Text = c1FlexGrid1.Cols[2].Caption;
c1Chart1.ChartArea.AxisY.Text = c1FlexGrid1.Cols[3].Caption;
// （2）グラフデータのセット
c1Chart1.ChartGroups.ChartGroupsCollection[0].ChartData.SeriesList[0].X.CopyDataIn(xp);
c1Chart1.ChartGroups.ChartGroupsCollection[0].ChartData.SeriesList[0].Y.CopyDataIn(yp);
c1Chart1.ChartGroups.ChartGroupsCollection[0].ChartData.SeriesList[0].Y1.CopyDataIn(vol);
// （3）シンボルの描画設定
c1Chart1.ChartGroups.ChartGroupsCollection[0].ChartData.SeriesList[0].SymbolStyle.Color = Color.AliceBlue;
c1Chart1.ChartGroups.ChartGroupsCollection[0].ChartData.SeriesList[0].SymbolStyle.OutlineColor = Color.LightGreen;
c1Chart1.ChartGroups.ChartGroupsCollection[0].ChartData.SeriesList[0].SymbolStyle.OutlineWidth = 3;
// （4）ラベルの作成
// 一度ラベルを削除
if (c1Chart1.ChartLabels.LabelsCollection.Count > 0)
{
c1Chart1.ChartLabels.LabelsCollection.RemoveAll();
}
C1.Win.C1Chart.Label lab ;
for (i = 0; i <= 6; i++)
{
lab = c1Chart1.ChartLabels.LabelsCollection.AddNewLabel();
lab.Text = c1FlexGrid1.GetDataDisplay(i + 1, 1);
lab.Compass = LabelCompassEnum.East;
lab.AttachMethod = AttachMethodEnum.DataIndex;
lab.AttachMethodData.GroupIndex = 0;
lab.AttachMethodData.SeriesIndex = 0;
lab.AttachMethodData.PointIndex = i;
lab.Style.BackColor = Color.Transparent;
lab.Visible = true;
}
}
グラフ表示の範囲設定
チャートにデータを設定すると、デフォルトではチャートで表示する範囲の最大値・最小値を自動的に作成します。
通常のXYチャートであればそれで構わないのですが、バブルチャートではバブルの大きさも表示されますので、データの最大値・最小値がチャート表示の最大値・最小値になってしまうと、バブルが半分かけてしまうなどの不具合が出てしまいます。そこで、バブルがちゃんと全部表示できるように、チャート表示の最大値・最小値を設定できるようにします。
チャート表示の最大値・最小値は、それぞれのデータ軸の「Max」「Min」プロパティで設定します。その際、「AutoMax」「AutoMin」プロパティをFalseに設定し、自動設定を解除しておきます。そして、TextBoxコントロールに入力されている値を、それぞれのデータ軸の「Max」「Min」プロパティに代入します。
'----------------------- グラフ表示の範囲設定 ----------------------------------------------------
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
If TextBox1.Text <> "" Then
C1Chart1.ChartArea.AxisX.AutoMax = False
C1Chart1.ChartArea.AxisX.Max = TextBox1.Text
End If
If TextBox2.Text <> "" Then
C1Chart1.ChartArea.AxisX.AutoMin = False
C1Chart1.ChartArea.AxisX.Min = TextBox2.Text
End If
If TextBox3.Text <> "" Then
C1Chart1.ChartArea.AxisY.AutoMax = False
C1Chart1.ChartArea.AxisY.Max = TextBox3.Text
End If
If TextBox4.Text <> "" Then
C1Chart1.ChartArea.AxisY.AutoMin = False
C1Chart1.ChartArea.AxisY.Min = TextBox4.Text
End If
End Sub
//----------------------- グラフ表示の範囲設定 ----------------------------------------------------
private void button1_Click(object sender, EventArgs e)
{
if(textBox1.Text != "")
{
c1Chart1.ChartArea.AxisX.AutoMax = false;
c1Chart1.ChartArea.AxisX.Max = Convert.ToDouble(textBox1.Text);
}
if(textBox2.Text !="")
{
c1Chart1.ChartArea.AxisX.AutoMin = false;
c1Chart1.ChartArea.AxisX.Min = Convert.ToDouble(textBox2.Text);
}
if(textBox3.Text !="")
{
c1Chart1.ChartArea.AxisY.AutoMax = false;
c1Chart1.ChartArea.AxisY.Max = Convert.ToDouble(textBox3.Text);
}
if(textBox4.Text !="")
{
c1Chart1.ChartArea.AxisY.AutoMin = false;
c1Chart1.ChartArea.AxisY.Min = Convert.ToDouble(textBox4.Text);
}
}
グラフの保存
最後に、作成したグラフを保存する処理を作成します。
C1Chartコントロールは、グラフをビットマップ形式の画像に保存できますので、作成したバブルチャートを他のアプリケーションで使用できるように画像に保存します。この処理は、SaveImageメソッドを使用します。引数に、保存するファイル名と画像フォーマットを指定しメソッドを実行します。
ファイル名の取得には、SaveFileDialogコントロールを使用します。
'----------------------- グラフの保存 ----------------------------------------------------
Private Sub Button3_Click(sender As System.Object, e As System.EventArgs) Handles Button3.Click
Dim fname As String
If SaveFileDialog1.ShowDialog() = Windows.Forms.DialogResult.OK Then
fname = SaveFileDialog1.FileName
C1Chart1.SaveImage(fname, System.Drawing.Imaging.ImageFormat.Bmp)
End If
End Sub
//----------------------- グラフの保存 ----------------------------------------------------
private void button3_Click(object sender, EventArgs e)
{
string fname;
if(saveFileDialog1.ShowDialog() == System.Windows.Forms.DialogResult.OK)
{
fname = saveFileDialog1.FileName;
c1Chart1.SaveImage(fname, System.Drawing.Imaging.ImageFormat.Bmp);
}
}
これで出来上がりです。
まとめ
C1Chartコントロールは、多彩な表現力を持ったグラフコントロールで、データを視覚化するには大いに威力を発揮するコントロールです。C1FlexGridコントロールは、行列形式の入力インターフェースを作るのにもってこいのコントロールで、グリッドのデータにアクセスする方法もとても簡単です。
記事のボリュームの関係で、C1Chart、C1FlexGridコントロールの一部の機能しか紹介できませんでしたが、それぞれのコントロールがどのような機能を持っているのかはお分かりいただけたと思います。
C1Chart、C1FlexGridコントロールともに、多彩な機能と大変細かい操作ができるコントロールなので、もっといろいろな操作機能を組み込んだアプリケーションに仕上げることができます。
