MVC5で集計結果をグラフにする

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 コントローラーは、最後のページに詳しく書かれていますから上記をみてください。

売上とか部品在庫の集計結果をグラフにするとどう書くの？？になります。

集計は、

[csharp title=”集計のコントローラー”]
using System.IO;
using System.Web.UI.DataVisualization.Charting;
using System.Drawing;
                :
                :
 public ActionResult test1()
        {
                    ・・・・ LINQ　集計のLINQ

                    return View(p)
                }
[/csharp]

みたいに p を Viewに渡しています。
このpをChartコントローラーに渡します。test2()でも同じLINQを書くのも嫌なので
結果を一時保存します。また、レコード数も保存しておきます。

[csharp title=”グラフ用に追加する”]
                public ActionResult test1()
        {
                    ・・・・ LINQ　集計のLINQ

                    TempData["ptemp"] = p;
          TempData["RecCount"] = p.Count;
                    return View(p)
                }

[/csharp]

以下で呼んでいるChartは、DataVisualization.ChartingのChart()です。
集計結果をそのまま、DataSourceでバインドして、軸を設定するだけで済みます。
カラム名は、各ValueMemberにLINQで使ったカラム名を渡すだけです。通常はModelで
書いたカラム名になります。

また、Y軸に部品名のようにstring渡しの場合は、歯抜けになってしまい
都合が悪くなります。そこで、AxisX.Interval = 1のように全ての部品名を表示させます。後は 在庫.ChartType = SeriesChartType.Bar でグラフの種類、AxisX.MajorGrid.LineColor = Color.LightGray マス目の色とか細かく設定します。
縦の長さは可変長になるので、900×500 の500部分をレコード数で調整します。

[csharp title=”グラフ作成部分をコントローラーに追加”]
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");
        }

[/csharp]

最後に test1()のView test1.cshtml の最後に

<div>
    <img src="~/Test/test2" alt="" />
</div>

を追加すれば、集計結果とグラフが表示されますね。