Visual Basic .NET 手作りグラフ

投稿日 2012/02/10

Visual Basicにはチャートコントロールが用意されており、簡単にグラフが作成できますが、

 

どうも好みに合わないとか、使いずらいと感じることもあります。

 

そこで、ピクチャーボックスコントロールを使って、グラフを自作することにしました。

 

ピクチャーボックスコントロールで、Setpixel, DrawLine, DrawRectangleなどの描画メソッドを使用すれば、原理的にはどんなグラフでも描くことができそうです。

 

用途はデーターロガーなどの温度や電圧などのグラフ化です。

 

さまざまなデータ範囲に対応したY軸 0 ~ +nV、0 ~ -nV、±nV -nV ~ +nV
X軸、Y軸のメイン目盛、サブ目盛とその色
グラフタイトル、X軸、Y軸のタイトル

 

これらを自由に変更できるようにします。
ただし、今回はX,Y軸ともに1軸です。


 

グラフ描画に必要なパラメータは以下の通りです。(項目名 設定 変数名 実値例 単位)
さまざまなデータ範囲に対応できるようにするためには、ちょっとややこしいが簡単な計算が必要なので、まずエクセルで各パラメータを計算しておき、間違いがないか確認しておきます。

 

PictureBoxのX座標 固定値 graphic_x_position 0 座標
PictureBoxのY座標 固定値 graphic_y_position 0 座標
PictureBoxのX軸幅 固定値 graphic_width 820 ピクセル
PictureBoxのY軸幅 固定値 graphic_height 680 ピクセル

 

X軸左オフセット 固定値 x_axis_left_offset 60 ピクセル
X軸右オフセット 固定値 x_axis_right_offset 40 ピクセル
Y軸上オフセット 固定値 y_axis_upper_offset 50 ピクセル
Y軸下オフセット 固定値 y_axis_lower_offset 30 ピクセル

 

X軸幅 計算 x_axis_width 720 ピクセル
Y軸幅(高さ) 計算 y_axis_width 600 ピクセル

 

X軸基点座標 計算 x_origin 60 座標
Y軸基点座標 計算 y_origin 50 座標

 

X軸最大値 固定値 x_max_value 600 秒
X軸最小値 固定値 x_min_value 0 秒
Y軸最大値 固定値 y_max_value 5 V
Y軸最小値 固定値 y_min_value -5 V
Y軸基準線値 計算 y_base_value 0 V

 

Y軸+側幅 y_positive_value_span 計算 300 ピクセル
Y軸-側幅 y_negative_value_span 計算 300 ピクセル
Y軸全体幅 y_value_span_all 計算 600 ピクセル

 

X軸メイン目盛の幅値 固定値 x_main_scale_value 60 秒
X軸サブ目盛の幅値 固定値 x_sub_scale_value 10 秒
Y軸メイン目盛の幅値 固定値 y_main_scale_value 1 V
Y軸サブ目盛の幅値 固定値 y_sub_scale_value 0.5 V

 

X軸メイン目盛数 計算 x_axis_main_scale_cnt 10 本
X軸サブ目盛数 計算 x_axis_sub_scale_cnt 60 本

 

Y軸+側メイン目盛数 計算 y_axis_main_positive_sclae_cnt 5
Y軸-側メイン目盛数 計算 y_axis_main_negative_scale_cnt 5

 

Y軸+側サブ目盛数 計算 y_axis_sub_positive_sclae_cnt 10
Y軸-側サブ目盛数 計算 y_axis_sub_negative_scale_cnt 10

 

X軸メイン目盛の幅/目盛 計算 x_axis_main_scale_width 72 ピクセル
Y軸メイン目盛の幅/目盛 計算 y_axis_main_scale_width 60 ピクセル

 

X軸サブ目盛の幅/目盛 計算 x_axis_sub_scale_width 12.0 ピクセル
Y軸サブ目盛の幅/目盛 計算 y_axis_sub_scale_width 30.0 ピクセル

 

Y+側割合 計算 y_positive_width_rate 0.50 x100%
Y-側割合 計算 y_negative_width_rate 0.50 x100%

 

Y0点位置(+側で計算) 計算 y_positive_base 350.0 座標
Y0点位置(-側で計算) 計算 y_negative_base 350.0 座標

 

Y軸+側幅 計算 y_positive_width 300 ピクセル
Y軸-側幅 計算 y_negative_width 300 ピクセル

 

X軸1ピクセル当たりの値 計算 x_value_par_pixel 0.833333333 秒
Y軸+側1ピクセル当たりの値 計算 y_positive_value_par_pixel 0.016666667 V
Y軸-側1ピクセル当たりの値 計算 y_negative_value_par_pixel -0.016666667 V

 

グラフタイトル 固定値 graph_title "Visual Basicでグラフを手作り" 文字
X軸タイトル 固定値 x_axis_title "Time" 文字
Y軸タイトル 固定値 y_axis_title "(V)" 文字

 

Visual Basicでのプログラムは、だいたいこんな感じです。

 

1. フォームを用意する
2. フォーム上にピクチャーボックスを用意する。
3. フォーム上にボタンを1つ用意する。
4. フォームクラスにパラメータ用の変数を宣言する。
5. Form_Loadアクションに以下の手順でコーディングする。
 5.1 パラメータ変数を初期化する。
 5.2 ピクチャーボックスを初期化する。
 5.3 グラフ用イメージエリアを用意し、初期化する。
6. Bottun_Clickアクションに以下の手順でグラフ描画をコーディングする
 6.1 イメージエリアをクリアする。
 6.2 グラフの目盛線を描画する
 6.2 データに基づいてデータグラフを描画する。
 6.3 グラフの上下左右のラベル、タイトルエリアをクリアする。
 6.4 グラフのタイトル文字とラベル文字を描画する。

 

設定が必要なパラメータ

 

○グラフのタイトル 
○X軸のタイトル 例えば(度)
○Y軸のタイトル 例えば"(V)
○X軸の最大値 例えば2周期分のサインカーブを描くなら720(度)
○X軸の最小値 例えば0
○Y軸+側の最大値 データが収まる範囲の値 ピーク値が+3Vなら +5Vくらい
○Y軸-側の最小値 データが収まる範囲の値 ボトム値が-3Vなら -5Vくらい
○X軸メイン目盛の間隔値 例えば10度
○X軸サブ目盛の間隔値 例えば1度
○Y軸メイン目盛の間隔値 例えば1V
○Y軸サブ目盛の間隔値 例えば0.2V(細かくしすぎると重なる)


 

以下必要なら変更可能(プログラムで設定済み)
○X軸メイン目盛の線色、太さ
○X軸サブ目盛の線色、太さ
○Y軸メイン目盛の線色、太さ
○Y軸サブ目盛の線色、太さ
○0基準線の線色と太さ
○データ用ペンの色と太さ
○グラフタイトル、X軸タイトル、Y軸タイトルの文字フォントとサイズ
○タイトルエリアの幅(ピクセル) グラフの上部
○Y軸タイトルエリアの幅(ピクセル) グラフの左側
○X軸タイトルエリアの幅(ピクセル) グラフの下部
○Y軸右エリアの幅(ピクセル) グラフの右側 


 

サイン波を生成して作成したグラフのサンプル(X軸はすべて600です)

VB_Graph_1.jpg

写真1.データ範囲 ±5V メイン目盛 1V サブ目盛 0.2V

VB_Graph_2.jpg

写真2.データ範囲 0 - 10V メイン目盛 2V サブ目盛 0.5V

写真3 10KHzの観測 1MHzを1/100分周 10V/div 20uS/div

VB_Graph_3.jpg

写真3.データ範囲 0 - -5V メイン目盛 1V サブ目盛 0.1V

写真4 1MHzの観測(1)  10V/div 0.5uS/div

VB_Graph_4.jpg

写真4.データ範囲 +1V - +5V メイン目盛 1V サブ目盛 0.1V

VB_Graph_5.jpg

写真5.データ範囲 -1V - +5V メイン目盛 1V サブ目盛 0.1V

VB_Graph_6.jpg

写真6.データ範囲 -1V - -5V メイン目盛 1V サブ目盛 0.1V

 

ソースコード

 

フォームにピクチャーボックスとボタンを張り付けておきます。
Form1.vbにソースをコピーして実行してください。

 

もっとよいコーディングがあると思いますが、ご参考まで。

 

予定:Y軸、X軸を2軸以上にしたり、ペンレコーダのように縦書きのグラフなども作ってみます。




 

このプログラムを利用して直接、間接に発生した被害等の補償はできません。参考程度としてください。




 

(JF1VRR)

コメント(3)

  • ソースコードのリンクに飛べないんですが、もしよろしければ飛べるようにして頂けませんか? [ あ ] 2014/5/15(木) 午後 5:42

  • ジオシティーズ退会により消えたようです。バックアップしてあるはずなので捜してみてあればアップします。(JF1VRR)2014/5/15(木) 午後 7:05

  • 申し訳ありませんがソースを紛失してしまいました。機会を見て作り直したいと思います。ご期待に添えず申し訳ありません。(JF1VRR) 2014/5/26(月) 午前 11:29