ASP.NET MVC でチャートを表示

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>

こんな感じのレーダーチャートが表示される。

見た目は上々。 あとはどこまでカスタマイズできるかだな。