pictureboxにbitmapを使用して折れ線グラフを表示するアプリを作成したい。

Question

visual studio 2015 C#でグラフを表示するアプリを作成したいと思って居ます。
chartと言う部品を使ってグラフを表示するのは出来ているのですが、chartを使用せずにpictureboxにbitmapを使用してグラフを表示させたいと思っています。
その為の参考に出来るサンプルか、手助けになるような情報が載っているサイトを紹介して頂ければと思っています。
よろしくお願いします。

Answer 1

PictureBoxで絵を描く場合は、ImageプロパティにBitmapオブジェクトを設定し、そこに描画するようにします。
とりあえず簡単なサンプルコードです。

private void Form1_Load(object sender, EventArgs e)
{
	// PictureBoxのクライアント領域と同じサイズのビットマップをImageプロパティに設定
	int width = pictureBox1.ClientRectangle.Width;
	int height = pictureBox1.ClientRectangle.Height;
	pictureBox1.Image = new Bitmap(width, height);
}

private void button1_Click(object sender, EventArgs e)
{
	using(var g = Graphics.FromImage(pictureBox1.Image))
	{
		// イメージをクリア
		g.Clear(Color.White);
		// 線を描画
		for(int i = 0; i < 360; i += 10)
		{
			int x1 = i;
			int x2 = i + 10;
			double r1 = x1 * Math.PI * 2 / 360.0;
			double r2 = x2 * Math.PI * 2 / 360.0;
			int y1 = (int)(150 + Math.Sin(r1) * 100);
			int y2 = (int)(150 + Math.Sin(r2) * 100);
			g.DrawLine(Pens.Red, x1, y1, x2, y2);
		}
	}
	// PictureBoxを再描画させて画面に反映 ★これ重要
	pictureBox1.Invalidate();
}

Comments

[csuser01234]

ありがとうございます！。
まずはピクチャボックスの縦と横のサイズを取得する。その後はDrawLineで線を引いていくって感じですね。イメージ湧きました。助かります。

[catsforepaw]

縦横サイズを取得するのはPictureBoxの大きさに合わせてBitmapオブジェクトを作成するためです。小さすぎては困りますし、大きすぎると無駄ですから。
GraphicsクラスにはDrawLineだけでなく様々な図形描画機能がありますので、どんなものがあるか見ておくと良いと思います。

[csuser01234]

出来ればもう一つ教えて欲しいのですが、ピクチャボックスサイズがH100*W100とするとして、そこに-100～100の範囲のデータを20個書くとするとしたらどうすればいいでしょうか。

[catsforepaw]

グラフの座標を、ビットマップの描画領域内に収まるように座標変換します。

データ数20個なら横サイズを20等分し、それぞれに1個ずつのデータを置くようにします。W=100なら、100 / 20で5ピクセル毎ということになりますね。

テータの値をビットマップのY座標にする場合は、移動と符号反転とスケーリングをします。
縦サイズをH、値をvalue、値の絶対値の最大値をAMaxとすると、
int drawH = H / 2 - 1;
int y = (int)(H / 2 - value * drawH / AMax);
こんな感じになると思います。

[csuser01234]

基準値（H / 2）から引いたら値が大きければ大きいほど０に近くなってしまうので、マイナスではなく+ですか？
int y = (int)(H / 2 + value * drawH / AMax);
もしくは式の見方が間違えていれば教えてください

[catsforepaw]

マイナスにしているのには意味があります。
一般的な数学で登場するグラフの座標系は上方向に値が大きくなりますが、ビットマップの座標系は下方向に大きくなります。よって、符号を反転する必要があり、マイナスしているのです。

[csuser01234]

私の環境だと大きい値をいれると上方向にいきマイナスの値をいれると下方向にいきます。扱っている値とbitmapの作成方法がどこかおかしいのかもしれませんね。
それともう一点質問したいのですが、
for (Int32 i = 1; i < Form1.Form1Instance.graph_kakusokudo_x.Count; i++)
{//直線を引くために2点分用意

dblTemp00[i] = SizeHeight_hurf + ((double)(-15000 * (double)(SizeHeight_hurf - 1)) / 20000);

//青の直線で折れ線グラフを引いていく
g.DrawLine(Pens.SkyBlue, i, (int)(pictureBox1.Size.Height - dblTemp00[i-1]), i + 1, (int)(pictureBox1.Size.Height - dblTemp00[i]));
}

現在上記のようにして配列の中身を全てグラフで描画させているのですが、X軸の進み方はどういうルールに基づいて進んでいるのでしょうか？

Wサイズ/配列のデータ数の変数をどこかで使用しているのかもしれませんが（サンプルを流用）見当たりません。
一応それらしいグラフは出ているのですが、教えて頂けないでしょうか。

[catsforepaw]

`i`は配列の添え字なので、それも座標に変換する必要があります。
そのfor文だと、このような感じになります。
int interval = 横サイズ / データの個数;
int x1 = (i - 1) * interval;
int x2 = x1 + interval;

ビットマップへのグラフの描き方について他にも何か判らないことがあった場合は、ここへのコメントではなく、新たに質問をされた方が良いかと思います。グラフィックスに詳しい人はたくさんいるので、そういう人の目に触れた方が適切な回答を得やすくなります。

[csuser01234]

わかりました。色々と親切にありがとうございました。新たな質問ももし良ければみて頂けたら幸いです。

Answer 2

http://blog.livedoor.jp/gab_km/archives/461350.html
「グラフ作成 picturebox」で検索して 1 ページ目にありました。

Comments

[catsforepaw]

そのページの方法は間違っていますね。`CreateGraphics`メソッドで得られるGraphicsオブジェクトに対して描画してもPictureBoxオブジェクトには保存されないので、フォームを画面の隅まで動かしたり上に別のウィンドウをかぶせたりすると消えてしまいます。それではPictureBoxを使う意味がありません（Panelでも同じことができます）。

[Zuishin]

そこだけ間違ってるならそこを PictureBox の Image の Graphics に変えればいいのでは？

[catsforepaw]

間違っているのはそこだけではなくて、ビットマップを作る部分が抜けているので、PictureBoxの使い方としては参考にならないのです。

[Zuishin]

なるほど。初心者には全く参考にならないページを紹介して申し訳ありませんでした。

[catsforepaw]

謝る必要はありません。ときには間違った方法を知ることも大事です。

[Zuishin]

「謝る必要はない」というセリフは謝られた人が言うものでは？

[catsforepaw]

間違ったことをしたわけではないのだから謝る必要はないという意味でそのような表現をしてしまったのですが誤解させてしまったようですね。
申し訳ありませんでした。