Web上にはMVC5で集計結果をグラフに書き出す例が少なくて難儀した。
Chartヘルパーを使えばいいのかと言う事で
しばやんさんの
http://blog.shibayan.jp/entry/20110406/1302094656
とか参考になった。
『東京電力節電効果』
https://david9142.wordpress.com/2011/05/04/asp-net-mvc%E3%81%A7chart%E3%82%B3%E3%83%B3%E3%83%88%E3%83%AD%E3%83%BC%E3%83%AB%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B/
とか同意見。Chartヘルパーは細かく書けないので『ボツ』です。
更に調べると Chartコントローラーと言うのが有るんですね。
『東京電力節電効果』
https://david9142.wordpress.com/2011/05/04/asp-net-mvc%E3%81%A7chart%E3%82%B3%E3%83%B3%E3%83%88%E3%83%AD%E3%83%BC%E3%83%AB%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B2/#comment-209
このページがとても参考になります。ヘルパーもコントローラーも書式は同じ感じですがメソッドの数は圧倒的に違いますね。また多くの紹介ページは、各軸に配列で渡している例ばかりで、Viewの結果をどう渡すか難儀しますね。
Chart コントローラーは、最後のページに詳しく書かれていますから上記をみてください。
売上とか部品在庫の集計結果をグラフにするとどう書くの？？になります。
集計は、
using System.IO;
using System.Web.UI.DataVisualization.Charting;
using System.Drawing;
                :
                :
 public ActionResult test1()
        {
                    ・・・・ LINQ 集計のLINQ
                    return View(p)
                }
みたいに p を Viewに渡しています。
このpをChartコントローラーに渡します。test2()でも同じLINQを書くのも嫌なので
結果を一時保存します。また、レコード数も保存しておきます。
                public ActionResult test1()
        {
                    ・・・・ LINQ 集計のLINQ
                    TempData["ptemp"] = p;
          TempData["RecCount"] = p.Count;
                    return View(p)
                }
以下で呼んでいるChartは、DataVisualization.ChartingのChart()です。
集計結果をそのまま、DataSourceでバインドして、軸を設定するだけで済みます。
カラム名は、各ValueMemberにLINQで使ったカラム名を渡すだけです。通常はModelで
書いたカラム名になります。
また、Y軸に部品名のようにstring渡しの場合は、歯抜けになってしまい
都合が悪くなります。そこで、AxisX.Interval = 1のように全ての部品名を表示させます。後は 在庫.ChartType = SeriesChartType.Bar でグラフの種類、AxisX.MajorGrid.LineColor = Color.LightGray マス目の色とか細かく設定します。
縦の長さは可変長になるので、900×500 の500部分をレコード数で調整します。
public ActionResult test2()
        {
            var p = TempData["ptemp"];
            string rc = TempData["RecCount"].ToString();
            int iCount = int.Parse(rc);
            int lc = (iCount / 20) * 500;
            var myChart = new Chart();
            myChart.Width = 900;
            myChart.Height = lc;
            myChart.Titles.Add("在庫");
            myChart.DataSource = p;
            myChart.ChartAreas.Add("Default");
            var AxisY = myChart.ChartAreas["Default"].AxisY;
            AxisY.Enabled = AxisEnabled.True;
            var AxisX = myChart.ChartAreas["Default"].AxisX;
            AxisX.Enabled = AxisEnabled.True;
            AxisX.Maximum = iCount + 0.5;
            AxisX.Interval = 1;
            AxisX.Minimum = 0;
            AxisX.MajorGrid.LineColor = Color.LightGray;
            AxisY.MajorGrid.LineColor = Color.LightBlue;
            myChart.Series.Add("在庫");
            var 在庫 = myChart.Series["在庫"];
            在庫.ChartArea = "Default";
            在庫.ChartType = SeriesChartType.Bar;
            在庫.XValueType = ChartValueType.Int32;
            在庫.YValueType = ChartValueType.Auto;
            在庫.IsValueShownAsLabel = true;
            在庫.LabelFormat = "#,0";
            在庫.XValueMember = "buhin_name";
            在庫.YValueMembers = "suryo";
            var imageStream = new MemoryStream();
            myChart.SaveImage(imageStream, ChartImageFormat.Png);
            return new FileContentResult(imageStream.ToArray(), "image/png");
        }
最後に test1()のView test1.cshtml の最後に
<div>     <img src="~/Test/test2" alt="" /> </div>
を追加すれば、集計結果とグラフが表示されますね。
コメント