DOBON.NETプログラミング道掲示板

[ 最新記事及び返信フォームをトピックトップへ ]

■33916 / inTopicNo.1)  折れ線グラフで基準値以内と基準値超過で色変え
  
□投稿者/ みそしる 一般人(1回)-(2018/07/13(Fri) 11:20:15)
  • アイコン環境/言語:[C# Win7-32Bit] 
    分類:[.NET] 

    こんにちは。
    折れ線グラフを描画し、縦軸基準値に対して横線を引いて、その横線より上に出たエリアを黄色(仮)、下のエリアを青(仮)く塗りたいと考えていますが、上手くいきません。
    
                chart1.Series.Clear();
                Series test = new Series();
                Series test2 = new Series();
                test.ChartType = SeriesChartType.StackedArea;
                test.Points.AddXY(1, 0);    //1,0
                test.Points.AddXY(2, 20);   //2,20
                test.Points.AddXY(3, 40);   //3,40
                test.Points.AddXY(4, 40);   //4,60
                test.Points.AddXY(5, 0);    //5,0
                test.Points.AddXY(6, 0);    //6,0
                test.Points.AddXY(7, 20);   //7,20
                test.Points.AddXY(8, 0);    //8,0
    
                test2.ChartType = SeriesChartType.StackedArea;
                test2.Points.AddXY(1, 0);   //1,0
                test2.Points.AddXY(2, 0);   //2,20
                test2.Points.AddXY(3, 0);   //3,40
                test2.Points.AddXY(4, 20);  //4,60
                test2.Points.AddXY(5, 0);   //5,0
                test2.Points.AddXY(6, 0);   //6,0
                test2.Points.AddXY(7, 0);   //7,20
                test2.Points.AddXY(8, 0);   //8,0
    
                chart1.Series.Add(test);
                chart1.Series.Add(test2);
    
    (まだ基準値の横棒が引けていませんが40を基準値としています)積み上げで試してみたのですが、
    横軸4と5の間の部分が40以下なのに黄色エリアが表示されてしまっています。
    この部分も青くしたいのですが、知恵をお貸しください。
    画像は理想図です。

418×225 => 250×134
イメージ
1531448415.jpg
/17KB
マルチポストを報告
違反を報告
引用返信 削除キー/
■33919 / inTopicNo.2)  Re[1]: 折れ線グラフで基準値以内と基準値超過で色変え
□投稿者/ 魔界の仮面弁士 大御所(1130回)-(2018/07/13(Fri) 20:56:14)
  • アイコン
    No33916に返信(みそしるさんの記事)
    > 折れ線グラフを描画し、
    目的は「折れ線グラフ」なのですね?
    
    
    > test.ChartType = SeriesChartType.StackedArea;
    > 積み上げで試してみたのですが、
    積み上げ面グラフで表現するのは無理があるかと思います。
    
    添付頂いたイメージ図で言うと、(X=5, Y=0)に向かう最初の下降線は、
    橙系統(Series2)が (X=4, Y=60) から開始されていますが
    青系統(Series1)は (X=4.36, Y=40) あたりから開始されるわけですし…。
    
    
    > 縦軸基準値に対して横線を引いて、その横線より
    > 上に出たエリアを黄色(仮)、下のエリアを青(仮)く
    > 塗りたいと考えていますが、上手くいきません。
    
    代わりに、こういう表現はどうでしょう。
    http://www.vb-user.net/junk/replySamples/2018.07.13.20.52/Graph.png
    
    using System;
    using System.Drawing;
    using System.Drawing.Drawing2D;
    using System.Windows.Forms;
    using System.Windows.Forms.DataVisualization.Charting;
    
    namespace Dobon33916
    {
        public partial class Form1 : Form
        {
            public Form1()
            {
                InitializeComponent();
    
                chart1.ChartAreas.Clear();
                chart1.Legends.Clear();
                chart1.Series.Clear();
    
                var ca = chart1.ChartAreas.Add("ChartArea1");
                var series1 = chart1.Series.Add("Series1");
                series1.ChartType = SeriesChartType.Area;
                series1.Color = Color.DarkTurquoise;
                var points = series1.Points;
    
                points.AddXY(1, 0);
                points.AddXY(2, 20);
                points.AddXY(3, 40);
                points.AddXY(4, 60);
                points.AddXY(5, 0);
                points.AddXY(6, 0);
                points.AddXY(7, 20);
                points.AddXY(8, 0);
    
                double standardValue = 40.0;
    
                chart1.PrePaint += (sender, e) =>
                {
                    var axX = ca.AxisX;
                    var axY = ca.AxisY;
    
                    var xLeft = (float)axX.ValueToPixelPosition(axX.Minimum);
                    var xRight = (float)axX.ValueToPixelPosition(axX.Maximum);
    
                    var yTop = (float)axY.ValueToPixelPosition(axY.Maximum);
                    var yMiddle = (float)axY.ValueToPixelPosition(standardValue);
                    var yBottom = (float)axY.ValueToPixelPosition(axY.Minimum);
    
                    var rect1 = RectangleF.FromLTRB(xLeft, yTop, xRight, yMiddle);
                    var rect2 = RectangleF.FromLTRB(xLeft, yMiddle, xRight, yBottom);
    
                    using (var gb1 = new LinearGradientBrush(rect1, Color.FromArgb(128, 220, 220, 128), Color.FromArgb(223, 255, 255, 0), LinearGradientMode.Vertical))
                    using (var gb2 = new LinearGradientBrush(rect2, Color.FromArgb(210, 0, 14, 209), Color.FromArgb(140, 0, 64, 255), LinearGradientMode.Vertical))
                    {
                        var g = e.ChartGraphics.Graphics;
                        g.FillRectangle(gb1, rect1);
                        g.FillRectangle(gb2, rect2);
                    }
                };
            }
        }
    }

804×510 => 250×158
イメージ
Graph.png
/19KB
違反を報告
引用返信 削除キー/
■33920 / inTopicNo.3)  Re[2]: 折れ線グラフで基準値以内と基準値超過で色変え
□投稿者/ みそしる 一般人(2回)-(2018/07/17(Tue) 11:27:55)
  • アイコンNo33919に返信(魔界の仮面弁士さんの記事)
    魔界の仮面弁士様、ありがとうございます。
    この案を持って相談したところ、目立つようにするべきターゲットはグラフデータのほうであって背景ではないと言われてしまいましたorz

    何とかいい方法はないものでしょうか・・・。
違反を報告
引用返信 削除キー/
■33921 / inTopicNo.4)  Re[3]: 折れ線グラフで基準値以内と基準値超過で色変え
□投稿者/ 魔界の仮面弁士 大御所(1131回)-(2018/07/17(Tue) 12:39:09)
  • アイコン
    No33920に返信(みそしるさんの記事)
    > 目立つようにするべきターゲットはグラフデータのほう
    
    折れ線グラフは、データポイントごとに直線で結ぶだけのものです。
    
    直線の途中で色を変える機能はありませんが、
    それぞれの直線ごとに別の色を変えることならできます。
    
    
    ということで、『途中に分岐点を設ける』しか無い気がします。
    
    
    using System;
    using System.Drawing;
    using System.Windows.Forms;
    using System.Windows.Forms.DataVisualization.Charting;
    
    namespace Dobon33916
    {
        public partial class Form1 : Form
        {
            public Form1()
            {
                InitializeComponent();
    
                chart1.ChartAreas.Clear();
                chart1.Legends.Clear();
                chart1.Series.Clear();
    
                var ca = chart1.ChartAreas.Add("ChartArea1");
                ca.AxisX.Minimum = 1.0;
                ca.AxisX.Interval = 1.0;
                var series1 = chart1.Series.Add("Series1");
                series1.ChartType = SeriesChartType.Line;
                series1.Color = Color.RoyalBlue;
                series1.BorderWidth = 3;
                var points = series1.Points;
    
                double standardValue = 40.0;
                int i;
    
                i = points.AddXY(1, 0);
                i = points.AddXY(2, 20);
                i = points.AddXY(3, 40);
                i = points.AddXY(4, 60);
    
                points[i].Color = Color.Gold;
                i = points.AddXY(5, 0);
    
                // X=4 から X=5 に向かう途中の分岐点を求める
                var a = points[i].YValues[0] - points[i - 1].YValues[0];
                var b = points[i].YValues[0] - a * points[i].XValue;
                var x = (standardValue - b) / a;
                points.InsertXY(i, x, standardValue);
                points[i].Color = Color.Gold;
    
                points.AddXY(6, 0);
                points.AddXY(7, 20);
                points.AddXY(8, 0);
            }
        }
    }

265×219 => 250×206
イメージ
201807171238.png
/15KB
違反を報告
引用返信 削除キー/
■33922 / inTopicNo.5)  Re[3]: 折れ線グラフで基準値以内と基準値超過で色変え
□投稿者/ Jitta 一般人(1回)-(2018/07/18(Wed) 10:11:55)
  • アイコンNo33920に返信(みそしるさんの記事)
    青いグラフと赤いグラフを別のImageに描いて、
    基準より上の赤いグラフを切り取り、青いグラフに貼り付ける。
違反を報告
引用返信 削除キー/
■33923 / inTopicNo.6)  Re[4]: 折れ線グラフで基準値以内と基準値超過で色変え
□投稿者/ みそしる 一般人(3回)-(2018/07/20(Fri) 15:02:22)
  • アイコンJitta様
    御返答ありがとうございます。
    グラフエリアの切り出しの案ですが、そこまでできる技量がないです。
    これは思いつきはしたのですが、それを実行する方法がわからなかったので、思いつきで終わってしまいました。
    ありがとうございました。

    魔界の仮面弁士様
    御返答ありがとうございます。
    この方法で行ってみようと思います。
    ありがとうございました。
解決み!
違反を報告
引用返信 削除キー/
■33927 / inTopicNo.7)  Re[5]: 折れ線グラフで基準値以内と基準値超過で色変え
□投稿者/ Jitta 一般人(2回)-(2018/07/22(Sun) 12:57:36)
  • アイコンNo33923に返信(みそしるさんの記事)
    > Jitta様
    > 御返答ありがとうございます。
    > グラフエリアの切り出しの案ですが、そこまでできる技量がないです。
    > これは思いつきはしたのですが、それを実行する方法がわからなかったので、思いつきで終わってしまいました。
    > ありがとうございました。

     FillPolygon で描きます。最初に (0, 0)、最後に (xの最大, 0) を追加して、y = 0 の線で閉じるようにします。
     「グラフ上の値」から 「Graphics の座標」へ変換するメソッドを用意しておきます。そうすることで、補助線を描いたり、後で切り取る時に Graphics の座標を計算しやすくします。
     一部貼り付けは、DrawImage(Image, Int32, Int32, Rectangle, GraphicsUnit) のオーバーロードで実現します。
解決み!
違反を報告
引用返信 削除キー/



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

このトピックに書きこむ

Mode/  Pass/


- Child Tree -