CodeZine(コードジン)

特集ページ一覧

入力したデータがリアルタイムに反映されるバブルチャートを実装する

「PowerTools ComponentOne Studio 2012J」のC1Chart2D/C1FlexGridコントロールを使った.NETアプリケーションの作成

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2012/10/19 10:20
目次

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」を選び、水平スクロールバーを動かして「バブルチャート」を選びます。

「Scatter」の「バブルチャート」を選ぶ
「Scatter」の「バブルチャート」を選ぶ

 (3)「次へ」ボタンをクリックし、「ステップ3」に進みます。

 (4)今回のプログラムでは1種類のデータしか使用しませんので、「データセット」の「削除」ボタンをクリックし、「series1」から「series3」を削除して、「series0」だけを残します。

「series0」だけを残す
「series0」だけを残す

 (5)「シンボル」の▼ボタンをクリックし、リストから「Dot」を選びます。

「シンボル」を「Dot」に変える
「シンボル」を「Dot」に変える

 (6)「データテーブル」タブをクリックし、列「X」「Y」の空白のセルをクリックして、あと2行分のデータを入力します。また、「Y1」セルに適当な値を入力し「完了」ボタンをクリックします。

2行分のデータを入力、「完了」ボタンをクリック
2行分のデータを入力、「完了」ボタンをクリック

 (7)このデータをもとにしたバブルチャートが作成されます。

バブルチャートが作成される
バブルチャートが作成される

C1FlexGridコントロールの配置

 続いて、C1FlexGridコントロールを配置します。

 (1)ツールボックスからC1FlexGridコントロールをフォームにドラッグアンドドロップし、C1Chartコントロールの下に配置します。

 (2)プロパティウィンドウで「Cols」プロパティを展開し、「Count」プロパティを「5」に変更します。これで、グリッドは1つの行ヘッダと4つの列になります。

 (3)同じくプロパティウィンドウの「Rows」プロパティを展開し、「Count」プロパティを「8」に変更します。これで、グリッドは1つの列ヘッダと7行のセルになります。

ヘッダを含め5列8行のグリッドにする
ヘッダを含め5列8行のグリッドにする

 (4)C1FlexGridコントロールのスマートタグから「列エディタ」をクリックします。「FlexGrid列エディタ」が表示されますので、行ヘッダの列から順番に列ヘッダをクリックし、「Caption」プロパティに以下の文字列を設定します。これで、列ヘッダが設定されます。

  • Data
  • データ名
  • X軸データ
  • Y軸データ
  • ボリューム(Y1)
「FlexGrid列エディタ」で列ヘッダを設定する
「FlexGrid列エディタ」で列ヘッダを設定する

 (5)各列の境界線をドラッグし、列幅を調整します。

その他のコントロールの配置

 C1Chartでは、グラフのXY軸の最大値・最小値を入力できるインターフェースを、C1FlexGridコントロールでは軸ラベルとなる列ヘッダを変更できるインターフェースを作成します。

 (1)GroupBox、Label、TextBox、Buttonの各コントロールを使って2つのインターフェースを作成します。レイアウトは、画面ショットを参考にしてください。

 (2)「グラフ作成」と「グラフ保存」ボタンも配置します。そして、4つのButtonコントロールは、それぞれClickイベントハンドラを作成しておきます。

 (3)グラフの画像保存のためにSaveFileDialogコントロールを配置します。FileNameプロパティには「*.bmp」を、Filterプロパティには「*.bmp | *.bmp」を設定しておきます。

完成したフォーム
完成したフォーム

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 瀬戸 遥(セト ハルカ)

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

バックナンバー

連載:ComponentZine(ComponentOne Studio)

もっと読む

All contents copyright © 2005-2020 Shoeisha Co., Ltd. All rights reserved. ver.1.5