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>
こんな感じのレーダーチャートが表示される。
見た目は上々。
あとはどこまでカスタマイズできるかだな。