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

Question

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

解決済

回答 2

投稿 2016/06/10 11:00

評価
クリップ 1
VIEW 6,521

csuser01234

score 38

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

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

クリップを取り消します
良い質問の評価を上げる

以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します

評価を下げられる数の上限に達しました

評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します

この機能は開放されていません

評価を下げる条件を満たしてません

評価を下げる理由を選択してください
プログラミングに関係のない質問やってほしいことだけを記載した丸投げの質問問題・課題が含まれていない質問意図的に内容が抹消された質問過去に投稿した質問と同じ内容の質問広告と受け取られるような投稿
詳細な説明はこちら

上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。
質問の評価を下げる機能の利用条件

この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
- メールアドレスの認証
  メールアドレスの認証
- 質問評価に関するヘルプページの閲覧
  質問評価に関するヘルプページの閲覧

1 件の質問への追記・修正依頼

質問への追記・修正、ベストアンサー選択の依頼

2016/06/10 23:17

こちらの質問が他のユーザから「やってほしいことだけを記載した丸投げの質問」という指摘を受けました
「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

回答 2 件

評価が高い順
新着順
古い順

0

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

投稿 2016/06/10 11:24

編集 2016/06/10 11:25

回答の評価を上げる

以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
回答の評価を下げる

下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

2016/06/10 13:50

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

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

キャンセル
2016/06/10 13:58

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

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

キャンセル
2016/06/10 14:07

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

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

キャンセル
2016/06/10 14:11

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

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

キャンセル
2016/06/10 14:34

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

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

キャンセル
2016/06/10 14:50

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

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

キャンセル
2016/06/10 15:03

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

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

キャンセル

同じタグがついた質問を見る

score 0 · Accepted Answer · 2016-06-10T14:04

ベストアンサー

0

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();
}

投稿 2016/06/10 14:04

回答の評価を上げる

以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
回答の評価を下げる

下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

2016/06/10 14:11

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

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

キャンセル
2016/06/10 14:21

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

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

キャンセル
2016/06/10 15:20

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

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

キャンセル
2016/06/10 16:25

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

データ数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);
こんな感じになると思います。

グラフの座標を、ビットマップの描画領域内に収まるように座標変換します。データ数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); こんな感じになると思います。

キャンセル
2016/06/10 18:01

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

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

キャンセル
2016/06/10 18:11

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

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

キャンセル
2016/06/10 18:37

私の環境だと大きい値をいれると上方向にいきマイナスの値をいれると下方向にいきます。扱っている値と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サイズ/配列のデータ数の変数をどこかで使用しているのかもしれませんが（サンプルを流用）見当たりません。
一応それらしいグラフは出ているのですが、教えて頂けないでしょうか。

私の環境だと大きい値をいれると上方向にいきマイナスの値をいれると下方向にいきます。扱っている値と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サイズ/配列のデータ数の変数をどこかで使用しているのかもしれませんが（サンプルを流用）見当たりません。一応それらしいグラフは出ているのですが、教えて頂けないでしょうか。

キャンセル
2016/06/10 19:22

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

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

`i`は配列の添え字なので、それも座標に変換する必要があります。そのfor文だと、このような感じになります。 int interval = 横サイズ / データの個数; int x1 = (i - 1) * interval; int x2 = x1 + interval; ビットマップへのグラフの描き方について他にも何か判らないことがあった場合は、ここへのコメントではなく、新たに質問をされた方が良いかと思います。グラフィックスに詳しい人はたくさんいるので、そういう人の目に触れた方が適切な回答を得やすくなります。

キャンセル
2016/06/10 19:33

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

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

キャンセル

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

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

関連した質問

同じタグがついた質問を見る

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

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

15分調べてもわからないことは、teratailで質問しよう！

関連した質問

同じタグがついた質問を見る

SNSアカウントでログイン

teratailアカウントでログイン