ASP.NET MVC でレーダーチャートを表示する方法を調べたところ、 System.Web.Helpers にある Chart クラスを使うのが手っ取り早そうだった。
System.Web.Helpers は ASP.NET MVC 5 のプロジェクトを新規作成すると、 既にアセンブリ参照に含まれているから、 すぐに使えて嬉しい。
試しにレーダーチャートを出力してみる。
まず、コントローラーでレーダーチャートの画像ファイルを作成し、パスをビューに渡す。
using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Web; using System.Web.Helpers; using System.Web.Mvc; namespace ChartSample.Controllers { public class HomeController : Controller { public ActionResult Index() { var path = "sample.jpg"; if (System.IO.File.Exists(Server.MapPath(path))) { System.IO.File.Delete(Server.MapPath(path)); } var chart = new Chart(width: 400, height: 400, theme: ChartTheme.Blue); chart.AddTitle("レーダーチャート"); chart.AddSeries( name: "サンプル1", chartType: "Radar", xValue: new[] { "ミート", "パワー", "走力", "肩力", "守備力" }, yValues: new[] { "90", "80", "80", "90", "80" } ); chart.AddSeries( name: "サンプル2", chartType: "Radar", xValue: new[] { "ミート", "パワー", "走力", "肩力", "守備力" }, yValues: new[] { "70", "100", "60", "60", "60" } ); chart.Save(path: Server.MapPath(path)); ViewBag.ChartPath = path; return View(); } } }
ビューでは img タグを使って、レーダーチャートの画像ファイルを表示。
@{ ViewBag.Title = "Home Page"; } <div class="row"> <div class="col-md-12"> <img src="@ViewBag.ChartPath"/> </div> </div>
こんな感じのレーダーチャートが表示される。
見た目は上々。 あとはどこまでカスタマイズできるかだな。