C# と VB.NET の質問掲示板

ASP.NET、C++/CLI、Java 何でもどうぞ

C# と VB.NET の入門サイト

Chartコントロールに四角形注釈を表示する方法について

[トピック内 13 記事 (1 - 13 表示)]  << 0 >>

■100154 / inTopicNo.1)  Chartコントロールに四角形注釈を表示する方法について
  
□投稿者/ さくらい (1回)-(2022/07/07(Thu) 15:06:45)

分類:[C#] 

C# .NET Frameword 4.6.2

Chart コントロールを使用し線グラフを表示しています。

グラフ表示範囲
  Y軸:0 〜 100000
  X軸:0 〜 数100億


グラフ上に RectangleAnnotation を使用し四角枠を描画したいのですが、
枠のサイズが大きいと、下記エラーになってしまいます。

System.ArgumentException: 'Width は -290000000 〜 290000000 の範囲でなければなりません。'

	ソース
	RectangleAnnotation rect	= new RectangleAnnotation();
	rect.AxisX			= chart.ChartAreas[0].AxisX;
	rect.AxisY			= chart.ChartAreas[0].AxisY;

	rect.IsSizeAlwaysRelative	= false;
	rect.X				= 100000000;
	rect.Y				= 0;
	rect.Height			= 100000;
	rect.Width			= 400000000;		★エラー



rect.IsSizeAlwaysRelative を true にすれば、出来そうなのですが、
rect.Height と rect.Width に指定する値がよく分かりません。

固定値をいれ、想定している大きさになった時の値をみても
なにを表しているかが分かりません。


https://docs.microsoft.com/ja-jp/dotnet/api/system.web.ui.datavisualization.charting.annotation.issizealwaysrelative?view=netframework-4.6.2

を見ると 「相対的なグラフの座標」と書いてありますが、
何を元に相対的といっているのでしょうか?

分かるかたいましたら、ご教授下さい。

引用返信 編集キー/
■100158 / inTopicNo.2)  Re[1]: Chartコントロールに四角形注釈を表示する方法について
□投稿者/ WebSurfer (2522回)-(2022/07/07(Thu) 16:52:47)
No100154 (さくらい さん) に返信

Chart には ASP.NET 用と WinForms 用の 2 種類ありますがどっちですか?
引用返信 編集キー/
■100159 / inTopicNo.3)  Re[2]: Chartコントロールに四角形注釈を表示する方法について
□投稿者/ さくらい (2回)-(2022/07/07(Thu) 16:54:02)
> Chart には ASP.NET 用と WinForms 用の 2 種類ありますがどっちですか?

WinForms です。

引用返信 編集キー/
■100161 / inTopicNo.4)  Re[3]: Chartコントロールに四角形注釈を表示する方法について
□投稿者/ さくらい (3回)-(2022/07/07(Thu) 17:31:30)
プログラムを単純にしようと思い
XY軸を 0〜10にし、X軸 2-3、Y軸 7-8 の場所に四角枠を表示しようとしてみました。


新規プロジェクトを作成し、
Chartコントロールを追加(コントロールのサイズ Width:600, Height:400)
フォームLoadイベントで下のプログラムを記述すると、
rect.Height = 16.7;
rect.Width = 6.8;
でX軸 2-3、Y軸 7-8部分に四角を表示出来ました。
ですが、 16.7 や 6.8 といった値がなにを示しているか分かりません。

Chartコントロールのサイズを変更するとずれます


private void Form1_Load(object sender, EventArgs e)
{
// X, Y軸を 0〜10 にする
ChartArea ca = new ChartArea();
ca.AxisX.Minimum = 0;
ca.AxisX.Maximum = 10;
ca.AxisY.Minimum = 0;
ca.AxisY.Maximum = 10;

chart1.ChartAreas.Clear();
chart1.ChartAreas.Add(ca);

// Series を追加しないとグラフが表示されないのでダミーで追加
Series ser = new Series();
ser.ChartType = SeriesChartType.Point;
for (int i = 0; i <= 10; i++)
{
ser.Points.AddXY(i, 5);
}
chart1.Series.Clear();
chart1.Series.Add(ser);

// 四角追加
// X軸 2-3、Y軸 7-8 の場所に四角枠を表示する
RectangleAnnotation rect = new RectangleAnnotation();
rect.AxisX = ca.AxisX;
rect.AxisY = ca.AxisY;
rect.BackColor = Color.FromArgb(50, Color.Red);

rect.IsSizeAlwaysRelative= true;
rect.X = 1;
rect.Y = 8;

rect.Height = 16.7;
rect.Width = 6.8;

chart1.Annotations.Clear();
chart1.Annotations.Add(rect);
}

引用返信 編集キー/
■100162 / inTopicNo.5)  Re[4]: Chartコントロールに四角形注釈を表示する方法について
□投稿者/ さくらい (4回)-(2022/07/07(Thu) 17:33:25)
図表モードにするのを忘れたので、Form1_Load部分だけ再度投稿させてもらいます。

private void Form1_Load(object sender, EventArgs e)
{
	// X, Y軸を 0〜10 にする
	ChartArea ca = new ChartArea();
	ca.AxisX.Minimum				= 0;
	ca.AxisX.Maximum				= 10;
	ca.AxisY.Minimum				= 0;
	ca.AxisY.Maximum				= 10;

	chart1.ChartAreas.Clear();
	chart1.ChartAreas.Add(ca);

	// Series を追加しないとグラフが表示されないのでダミーで追加
	Series ser		= new Series();
	ser.ChartType	= SeriesChartType.Point;
	for (int i = 0; i <= 10; i++)
	{
		ser.Points.AddXY(i, 5);
	}
	chart1.Series.Clear();
	chart1.Series.Add(ser);

	// 四角追加
	// X軸 2-3、Y軸 7-8 の場所に四角枠を表示する
	RectangleAnnotation rect	= new RectangleAnnotation();
	rect.AxisX				= ca.AxisX;
	rect.AxisY				= ca.AxisY;
	rect.BackColor			= Color.FromArgb(50, Color.Red);

	rect.IsSizeAlwaysRelative= true;
	rect.X					= 1;
	rect.Y					= 8;

	rect.Height				= 16.7;
	rect.Width				= 6.8;

	chart1.Annotations.Clear();
	chart1.Annotations.Add(rect);
}

引用返信 編集キー/
■100163 / inTopicNo.6)  Re[3]: Chartコントロールに四角形注釈を表示する方法について
□投稿者/ WebSurfer (2523回)-(2022/07/07(Thu) 18:26:33)
No100159 (さくらい さん) に返信

直接の回答ではありませんが・・・

> WinForms です。

WinForms 用であればサンプルを入手できるので、入手して動かしてみてその中に自分
が希望するものがないか探してみてはいかがですか?

入手方法等詳しくは以下の記事を見てください。

Windows Forms 用 Chart Samples
http://surferonwww.info/BlogEngine/post/2021/11/30/chart-samples-for-windows-forms-application.aspx

ダウンロードしたら、src というフォルダを見てください。それに完全な Windows
Forms アプリのソリューションとしてサンプルが含まれています。

それを適当なフォルダに解凍して Visual Studio(.NET4 なので 2010 以降のバージ
ョン)で開いて実行すれば、基本の解説、いろいろなタイプのサンプルのデモ、それ
を作るための C# および VB.NET サンプルコード等が満載のアプリが動くはずです。

引用返信 編集キー/
■100168 / inTopicNo.7)  Re[4]: Chartコントロールに四角形注釈を表示する方法について
□投稿者/ さくらい (5回)-(2022/07/08(Fri) 09:29:46)
No100163 (WebSurfer さん) に返信
> Windows Forms 用 Chart Samples
> http://surferonwww.info/BlogEngine/post/2021/11/30/chart-samples-for-windows-forms-application.aspx

Chart Samplesは見ていますが、希望する動作のものはありませんでした。


IsSizeAlwaysRelative の規定値が false なので、IsSizeAlwaysRelativeに値を代入していないサンプルなども見てみましたが
WidthやHeightに代入されている値を見ても意味が分かりませんでした。





※ 最悪、RectangleAnnotationをタイルの様に並べ、枠線をLineAnnotationで描いてやろうかと思ってます。。。
が、もう少し調べてみます。

引用返信 編集キー/
■100169 / inTopicNo.8)  Re[5]: Chartコントロールに四角形注釈を表示する方法について
□投稿者/ さくらい (6回)-(2022/07/08(Fri) 09:43:56)
> IsSizeAlwaysRelative の規定値が false なので、IsSizeAlwaysRelativeに値を代入していないサンプルなども見てみましたが
> WidthやHeightに代入されている値を見ても意味が分かりませんでした。

すみません、この文は間違えです。


>IsSizeAlwaysRelative の規定値が false
は間違ってはいませんが、
調べているうちに、自分の中で false と true の意味が逆になってしまっていたので、
上記文は無視して下さい。


引用返信 編集キー/
■100170 / inTopicNo.9)  Re[5]: Chartコントロールに四角形注釈を表示する方法について
□投稿者/ WebSurfer (2524回)-(2022/07/08(Fri) 12:19:49)
No100168 (さくらい さん) に返信

> Chart Samplesは見ていますが、希望する動作のものはありませんでした。

Chart Features > Annotations は見たんですか? その中には無いと言ってますか?
引用返信 編集キー/
■100171 / inTopicNo.10)  Re[6]: Chartコントロールに四角形注釈を表示する方法について
□投稿者/ さくらい (7回)-(2022/07/08(Fri) 13:06:55)
No100170 (WebSurfer さん) に返信

見ましたが無かったです。

IsSizeAlwaysRelative に true を指定しるサンプルは
1つもなかったです。

また、指定した範囲に四角を表示するサンプルもありませんでした。
引用返信 編集キー/
■100175 / inTopicNo.11)  Re[7]: Chartコントロールに四角形注釈を表示する方法について
□投稿者/ さくらい (8回)-(2022/07/08(Fri) 15:45:23)
色々しらべてみましたが
やはり IsSizeAlwaysRelative を true にした時の
Width、Height の値の意味が分かりませんでした。

これ以上時間もかけられないため、
タイルの様に複数の RectangleAnnotation を追加する方式でやりたいと思います。


WebSurfer さん貴重な時間をいただき、ありがとうございました。


一応、解決済みとさせて頂きます。
解決済み
引用返信 編集キー/
■100177 / inTopicNo.12)  Re[7]: Chartコントロールに四角形注釈を表示する方法について
□投稿者/ WebSurfer (2525回)-(2022/07/08(Fri) 16:15:24)
No100171 (さくらい さん) に返信
 
> また、指定した範囲に四角を表示するサンプルもありませんでした。

Chart Feature > Annotations > Annotations Types にいろいろサンプルコードがあり
ますが見ましたか?

サイズは Annotation.Width, Annotation.Height プロパティで設定しますが、それぞ
れ Chart.Width, Chart.Height のパーセントで指定しています。

位置は Annotation.X, Annotation.Y プロパティで設定しますが、これもやはり 
Chart.Width, Chart.Height のパーセントで Chart の左上端からの位置を固定できる
ようです。

以下のコードで検証してみました。

using System;
using System.Data;
using System.Windows.Forms.DataVisualization.Charting;
using System.Windows.Forms;

namespace WindowsFormsChart
{
    public partial class Form2 : Form
    {
        private Chart chart1;
        private DataTable table;

        public Form2()
        {
            InitializeComponent();

            chart1 = new Chart
            {
                Location = new System.Drawing.Point(50, 50),
                Width = 600
            };
            Controls.Add(chart1);
        }

        private void Form2_Load(object sender, EventArgs e)
        {
            // ここでは Chart は作らない。
            // 下の「コンボボックスの初期値を設定」のところで
            // ComboBox.SelectedIndexChangedイベントが発生するので
            // ここで Chart を作ると、イベントハンドラでも Chart が作られて
            // 意味不明な動きになるので。

            table = new DataTable();

            // データ名をつける
            table.Columns.Add("A", typeof(double));
            table.Columns.Add("B", typeof(double));
            table.Columns.Add("C", typeof(double));

            // 表にデータを格納
            table.Rows.Add(new Object[] { 1, 5000000, 55 });
            table.Rows.Add(new Object[] { 2, 4000000, 44 });
            table.Rows.Add(new Object[] { 3, 3000000, 33 });

            // コンボボックスに項目名を格納
            comboBox1.Items.AddRange(new string[] { "A", "B", "C" });
            comboBox2.Items.AddRange(new string[] { "A", "B", "C" });

            //コンボボックスの初期値を設定
            comboBox1.SelectedIndex = 0;
            comboBox2.SelectedIndex = 0;
        }

        private void comboBox1_SelectedIndexChanged(object sender, EventArgs e)
        {
            //コンボボックスで選び直したデータ名を読み込む
            object Select_X = comboBox1.SelectedItem;            
            object Select_Y = comboBox2.SelectedItem;

            // Form_Load の comboBox1.SelectedIndex = 0; でイベントが発生
            // した時は comboBox2.SelectedItem は null なので何もしない
            if (Select_X == null || Select_Y == null) return;

            var X_Data = Select_X.ToString();
            var Y_Data = Select_Y.ToString();

            chart1.Series.Clear();
            chart1.ChartAreas.Clear();

            // グラフを描く空間を生成
            ChartArea chartArea = new ChartArea();
            chart1.ChartAreas.Add(chartArea);

            // グラフの元となるデータの格納場所を生成
            Series series1 = new Series();

            //尋ねたデータ名を軸ラベルにする
            chart1.ChartAreas[0].AxisX.Title = X_Data;
            chart1.ChartAreas[0].AxisY.Title = Y_Data;

            //データをグラフにプロット
            for (int i = 0; i < table.Rows.Count; i++)
            {
                series1.Points.AddXY(table.Rows[i][X_Data], table.Rows[i][Y_Data]);
            }
            chart1.Series.Add(series1);


            chart1.Annotations.Clear();
            chart1.Annotations.Add(CreateRectangleAnnotation());
        }

        private void comboBox2_SelectedValueChanged(object sender, EventArgs e)
        {
            //コンボボックスで選び直したデータ名を読み込む
            object Select_X = comboBox1.SelectedItem;            
            object Select_Y = comboBox2.SelectedItem;

            // Form_Load の「コンボボックスの初期値を設定」順であれば null になる
            // ことはなさそうだが念のため
            if (Select_X == null || Select_Y == null) return;

            var X_Data = Select_X.ToString();
            var Y_Data = Select_Y.ToString();
            
            chart1.Series.Clear();
            chart1.ChartAreas.Clear();

            // グラフを描く空間を生成
            ChartArea chartArea = new ChartArea();
            chart1.ChartAreas.Add(chartArea);

            // グラフの元となるデータの格納場所を生成
            Series series1 = new Series();

            //尋ねたデータ名を軸ラベルにする
            chart1.ChartAreas[0].AxisX.Title = X_Data;
            chart1.ChartAreas[0].AxisY.Title = Y_Data;

            //データをグラフにプロット
            for (int i = 0; i < table.Rows.Count; i++)
            {
                series1.Points.AddXY(table.Rows[i][X_Data], table.Rows[i][Y_Data]);
            }
            chart1.Series.Add(series1);


            chart1.Annotations.Clear();
            chart1.Annotations.Add(CreateRectangleAnnotation());
        }

        private RectangleAnnotation CreateRectangleAnnotation()
        {
            RectangleAnnotation annotation = new RectangleAnnotation();

            // 以下があると X, Y の意味が違ってくる(X 軸、Y 軸の数字に
            // 関連してくる)のでコメントアウト
            //annotation.AnchorDataPoint = chart1.Series[0].Points[2];

            annotation.X = 20d;         // Chart の左端から 20% 右の位置
            annotation.Y = 20d;         // Chart の上端から 20% 下の位置
            annotation.Width = 50d;     // Chart.Width の 50% の幅
            annotation.Height = 50d;    // Chart.Height の 50% の高さ

            annotation.Text = "I am a\nRectangleAnnotation";
            annotation.ForeColor = System.Drawing.Color.Black;
            annotation.Font = new System.Drawing.Font("Arial", 12); ;
            annotation.LineWidth = 2;
            annotation.BackColor = System.Drawing.Color.PaleGreen;
            annotation.LineDashStyle = ChartDashStyle.Dash;

            return annotation;
        }
    }
}

結果は以下の画像のようになります。ComboBox の選択を変えるとグラフの表示が変わります
が RectangleAnnotation の位置は固定されます。試してみてください。

http://surferonwww.info/BlogEngine/image.axd?picture=2022%2f7%2f0708chart.jpg

引用返信 編集キー/
■100186 / inTopicNo.13)  Re[8]: Chartコントロールに四角形注釈を表示する方法について
□投稿者/ WebSurfer (2526回)-(2022/07/10(Sun) 15:10:49)
No100175 (さくらい さん) に返信

もう少し調べてみました。

(1) 相対 Chart 座標 (relative chart coordinates) と (2) 軸座標 (axes coordinates) とい
う 2 つの方法があるそうです。

No100177 で書いたのは (1) になります。

No100177 のコードを (2) 軸座標 (axes coordinates) の方法に変更するには以下のようにします。

private RectangleAnnotation CreateRectangleAnnotation()
{
RectangleAnnotation annotation = new RectangleAnnotation();

// 軸座標 (axes coordinates)
// AxisX, AxisY を設定。IsSizeAlwaysRelative を false に設定
annotation.AxisX = chart1.ChartAreas[0].AxisX;
annotation.AxisY = chart1.ChartAreas[0].AxisY;
annotation.IsSizeAlwaysRelative = false;
annotation.X = 1d; // X 軸目盛の 1 の位置が注釈の左端
annotation.Y = 1d; // Y 軸目盛の 1 の位置が注釈の下端
annotation.Width = 2d; // X 軸の 2 目盛分の幅
annotation.Height = 2d; // Y 軸の 2 目盛分の幅

annotation.Text = "I am a\nRectangleAnnotation";
annotation.ForeColor = System.Drawing.Color.Black;
annotation.Font = new System.Drawing.Font("Arial", 12); ;
annotation.LineWidth = 2;
annotation.BackColor = System.Drawing.Color.PaleGreen;
annotation.LineDashStyle = ChartDashStyle.Dash;

return annotation;
}

結果は以下の画像のようになります。ただし、X, Y 軸の目盛がベースになるので、ComboBox の
選択を変えて X, Y 軸を変えるとそれに応じて注釈のサイズ・位置も変わりますので注意してく
ださい。

http://surferonwww.info/BlogEngine/image.axd?picture=2022%2f7%2f0710ChartAnnotation2.jpg
引用返信 編集キー/

このトピックをツリーで一括表示


トピック内ページ移動 / << 0 >>

このトピックに書きこむ