Visual Basic .NET 手作りグラフ
jf1vrr投稿日 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です)
写真1.データ範囲 ±5V メイン目盛 1V サブ目盛 0.2V
写真2.データ範囲 0 - 10V メイン目盛 2V サブ目盛 0.5V
写真3 10KHzの観測 1MHzを1/100分周 10V/div 20uS/div
写真3.データ範囲 0 - -5V メイン目盛 1V サブ目盛 0.1V
写真4 1MHzの観測(1) 10V/div 0.5uS/div
写真4.データ範囲 +1V - +5V メイン目盛 1V サブ目盛 0.1V
写真5.データ範囲 -1V - +5V メイン目盛 1V サブ目盛 0.1V
写真6.データ範囲 -1V - -5V メイン目盛 1V サブ目盛 0.1V
フォームにピクチャーボックスとボタンを張り付けておきます。
Form1.vbにソースをコピーして実行してください。
もっとよいコーディングがあると思いますが、ご参考まで。
予定：Y軸、X軸を2軸以上にしたり、ペンレコーダのように縦書きのグラフなども作ってみます。
このプログラムを利用して直接、間接に発生した被害等の補償はできません。参考程度としてください。
(JF1VRR)
- ソースコードのリンクに飛べないんですが、もしよろしければ飛べるようにして頂けませんか？ [ あ ] 2014/5/15(木) 午後 5:42
- ジオシティーズ退会により消えたようです。バックアップしてあるはずなので捜してみてあればアップします。(JF1VRR)2014/5/15(木) 午後 7:05
- 申し訳ありませんがソースを紛失してしまいました。機会を見て作り直したいと思います。ご期待に添えず申し訳ありません。(JF1VRR) 2014/5/26(月) 午前 11:29
