*

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

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

集計は、

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>

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

関連記事

no image

WPA Enterprise ではいけないの?

よく WPA の説明の中に WEPがでてきますが、WPAにもWPA2にもWEPはないよね。そもそも、

記事を読む

Au 光ネットに決着 BL900HW

Home Network[/caption] なかなか解決策が見つからず時間が経っていまいま

記事を読む

MySQL Connector/Net

Connector/Net のバージョンとVisual Studioのバージョンの組み合わせは困るな

記事を読む

Au光は半固定IPなんですか?

コミットしてない点では半固定なんでしょうね。 例えば、電話とかAu Tvを契約されると、お客様

記事を読む

ツールアップデート

マインドツールをアップデートしました OneNote が調子悪いので添付もできるToDOに変更

記事を読む

Au TV

フレッツを、辞めるので必然的にスカパー光も解約となる。見る間もないのもあるから良いかと思ってた。

記事を読む

MySQLとPostgreSQLにアクセス

普段からMySQLを良く使います。 そしてSQLかLINQで書きます。LINQといっても基本はSQ

記事を読む

CNC3020による穴あけ

[/video] 卵が先か鶏が先かの状態が続いています とりあえず、基板作成準備をしています 回

記事を読む

Windows7 のキーボード

先日 CNC3020用に Windows7の入った中古の Dellを調達した。 古いがサクサク動い

記事を読む

no image

最近のFreeBSD

すっかりFreeBSDから遠ざかっていて、色々すっかり忘れてます。 そろそろ更新しないといけな

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

// no image
プリンターの改造

知人のプリンターの精度が悪過ぎので改造しました。ロッドを替え、エクス

// no image
3Dプリンターまとめ

3Dプリンターを導入したので、そのときのまとめを書いてみました。 C

真空調理6 パスチャライズ

Anovaに限らず低温調理は55度~65度の間で調理することが前提にな

真空調理5 ステーキ

買い出しに寄ったらアンガスのサーロインが食べてくれと並んでいた。嫁も飲

真空調理 4

売り出ししていたオージービーフの大を加熱してみた。今回は55度8時間の

→もっと見る

PAGE TOP ↑