ASP.Netでいってみる RazorとWeb ページに チャレンジ 6 MVC Chart
ｍｓｄｎの 開発者向け技術情報からこんなページを発見しました。
『Razor 構文と Web ページ』
『Razor構文』の勉強に行ってきます。
その6です。
第７章 データをグラフで表示する Ｐ103
この章では、グラフを表示する方法について記述されています。でグラフ扱う場合に置き換えていってみたいと思います。
でグラフを扱うサンプルはこちらのページを参考にさせてもらいました。
■Chart Web Helper in ASP.NET MVC 3 Beta
これを読むと、思ってたより簡単にグラフの表示ができそうですね。
では教科書の内容に基づきいってみます。
配列を使う
配列中のデータからグラフを作成する方法
このパターンビューにサンプルのコードを張り付けるだけでグラフ表示可能ですが、上記のMVC３の事例にあるように、コントロールとビューを使用する方法でいってみます。教科書では少し後の「Webページ中にグラフを表示する」に記載されている方法に似ていますね。
事前に「System.Web.Helpers」が参照設定できていることを確認しておきます。
１．コントローラの追加
コントローラ名：Chart1 (お好きな名前で)
テンプレート：空のMVCコントローラ
２．コントローラの編集
１．参照の追記
using System.Web.Helpers;
２．メソッドの追記（中身は教科書よりコピペです）
public ActionResult GetlChart1()
{
var myChart = new Chart(width: 600, height: 400)
.AddTitle("Chart Title")
.AddSeries(
name: "Employee",
xValue: new { "Peter", "Andrew", "Julie", "Mary", "Dave" },
yValues: new { "2", "6", "4", "5", "3" })
.Write();
}
３．ビューの追加
１. [Views]フォルダに[Chart1]フォルダを追加
２. [Chart1]フォルダにビューを追加
ビュー名：[Index]
３. ビューを編集 （赤字部分を追加）
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Index</h2>
<div>
<img src="~/Chart1/GetlChart1" />
</div>
４．実行 （実行方法の１サンプルとして見てくださいね）
[Views][Shared][_Layout.cshtml]を編集 赤字行を追加して メニュー追加
<ul id="menu">
<li>@Html.ActionLink("ホーム", "Index", "Home")</li>
<li>@Html.ActionLink("バージョン情報", "About", "Home")</li>
<li>@Html.ActionLink("連絡先", "Contact", "Home")</li>
<li>@Html.ActionLink("グラフ①", "Index", "Chart1")</li>
</ul>
グラフはこんな感じ。
グラフのデータとしてデータベースの問い合わせを使う
原因不明の事故でビューがスカ消えした
本ブログ作成中に何故かVWDのビュー内スクリプトがすっきり全部消えてしまった。ソリューションエクスプローラでは名前は残ってるんですが、物理ファイルがなくなってる。フォルダは残ってるんですけど。。どんなオペレーションしたらこんなことになるんだろう。
バックアップ取ってなかったぜ。。。唖然。
でグラフの続きを行うために、プロジェクトを新規につくりました。
データベース関連情報も全部作り直しました。まあ、そんな愚痴はさておき
データベースからデータを持ってきてグラフ化する方法ですが、基本的に
「配列中のデータからグラフを作成する方法」と同じで、Valueをセットする部分を変更してあげればOKですね。
WebMatrixの教科書では、
var db = Database.Open("SmallBakery");
var data = db.Query("SELECT Name, Price FROM Product");
・・・省略・・・
とWebMatrixのアクセス方法で記載されていますが、今回のはすでにEntitiy Frameworkつかってきてますんでその流れでいきます。
でコントローラーはこんな感じで、赤字の部分が教科書と異なる部分です。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Data;
using System.Data.Entity;
using System.Web.Helpers;
using Mvc4Application3.Models;
namespace Mvc4Application3.Controllers
{
public class Chart2Controller : Controller
{
// GET: /Chart/
public ActionResult Index()
{
return View();
}
public ActionResult GetChart2()
{
SmallBakeryEntities db = new SmallBakeryEntities();
var data = db.Product.ToList();
var myChart = new Chart(width: 600, height: 400)
.AddTitle("Product Sales")
.AddSeries("Default",
xValue: data, xField: "Name",
yValues: data, yFields: "Price")
.Write();
return null;
}
}
}
ビューは
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Index</h2>
<div>
<img src="~/Chart2/GetChart2" alt="" />
</div>
はいこんなスクリプトでデバッグ実行すると。
表示できました。
また、テーマを設定すると
var myChart = new Chart(width: 600, height: 400,theme: ChartTheme.Green)
こんな風に。。
このあたりは、
しばやん雑記
System.Web.Helpers を活用する
にまとまった情報が丁寧に記述されてます。参考にどうぞ。
また、このSystem.Web.HelperのChartでは機能機能不足だなっと感じられる場合は、こちらが参考になります。すごいっす。Azure上の本物が現在はみられないかもしれませんがとにかくすごいです。
テスターですが何か？
東京電力節電効果計測サービス(LightElectricity on Azure)
ASP.NET MVCでChartコントロールを使用する
すごく参考になりました。
