*

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>

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

関連記事

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

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

記事を読む

中国出張でやられたら IEがリダイレクトされる

中国出張でVPNなどを使うとGFW金盾(きんじゅん)とかにやられてしまう。 帰国して社内システムに

記事を読む

FreeBSD 10.1の環境

そろそろ、FreeBSDの環境も10.1に更新しよう。今迄使ってたインストーラーは9.1ベースなので

記事を読む

no image

最近のFreeBSD

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

記事を読む

no image

WPA Enterprise ではいけないの?

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

記事を読む

Au光二重ルータとDNS

Au光を使ってポート転送した時に内部ネットワークの名前を苦労しているんですね。 Au ホームゲ

記事を読む

Au 光1Gプラン

いや〜、工事はあっさり終わりましたがその後が中々大変でした。工事の方も手際良くチャチャっと終わらして

記事を読む

Au 光ネットに決着 BL900HW

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

記事を読む

Au TV

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

記事を読む

ツールアップデート

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

記事を読む

Message

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

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

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

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

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

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

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

真空調理5 ステーキ

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

真空調理 4

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

→もっと見る

PAGE TOP ↑