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>
を追加すれば、集計結果とグラフが表示されますね。
関連記事
-
-
中国出張でやられたら IEがリダイレクトされる
中国出張でVPNなどを使うとGFW金盾(きんじゅん)とかにやられてしまう。 帰国して社内システムに
-
-
Windows7 のキーボード
先日 CNC3020用に Windows7の入った中古の Dellを調達した。 古いがサクサク動い
-
-
Au 光ネットに決着 BL900HW
Home Network[/caption] なかなか解決策が見つからず時間が経っていまいま
-
-
MySQL Connector/Net
Connector/Net のバージョンとVisual Studioのバージョンの組み合わせは困るな
-
-
ToDOによる残件リスト公開
システム手帳を使い出した頃から利用しているToDO。今ではiPhoneアプリでも便利使えて便利ですよ
-
-
WPA Enterprise ではいけないの?
よく WPA の説明の中に WEPがでてきますが、WPAにもWPA2にもWEPはないよね。そもそも、
-
-
Au光は半固定IPなんですか?
コミットしてない点では半固定なんでしょうね。 例えば、電話とかAu Tvを契約されると、お客様
-
-
CNC3020による穴あけ
[/video] 卵が先か鶏が先かの状態が続いています とりあえず、基板作成準備をしています 回
- PREV
- ダウンロードできないらしい
- NEXT
- 中華製CNCを買ってみました