いけてるグラフ描画ライブラリはないのかという疑問に対し、「d3.js」という声がどこからともなく聞こえてきたので、それを ASP.NET MVC で使ってみました。 d3.js はData駆動ドキュメントということで、データを与えることでグラフを含めたさまざまなタイプの視覚化を行うことができるライブラリのようです。日本語のドキュメントも充実しています。また、出力もSVGということで既存のHTML要素を活用した形になっているのが特徴とのことです。d3.js そのものは単純なグラフ化にとどまらないので、こちらをそもそも勉強する必要がありそうですが、今回は手早く折れ線グラフを作成してみました。
ひとまず ASP.NET MVC ということでコントローラーを作成します。が、今回データはWEB APIの方で渡すため、Viewのコントローラーは一番単純なパターンになります。
そして、Viewを Views/Home/Index.cshtml に作っておきますが、中身はおいておきます。 次にグラフ描画用のデータを返すAPIControlelrを作ります。今回はサンプルということで100分前から1分おきに乱数でデータを作成しました。
とりあえずC# のコードはここまでです。ここからはd3．jsのコードに入ります。d3.js はNugetから取得できるので、インストールしましょう。
それでは、作成した Index.cshtmlの編集をします。 とりあえず完成したソースを。
適宜コメントを載せているので参照してほしいのですが、
- Layout はnullを入れて無効化
- jquery と modernizr と d3.v3 をScriptタグで読みこむ。バージョンはインストールされたバージョンを指定
- グラフ中のフォントや折れ線の色などはCSSで指定
- 日時フォーマットはASP.NET のデフォルトの場合、ISO形式なのでd3で用意されているものを指定
- d3のTime Formatはこちらを参照
- 時間軸のスケールを指定する場合は、 d3.time.scale を使う
- d3.json メソッドでWEB APIで定義したURIを指定
- JSON形式を指定するため、jsonメソッドに続いてheaderメソッドを使ってContent-Typeを指定
といったあたりを注意しました。
これを実行するとこんなグラフが表示されます。
時間はちょうど日をまたいでいますが、自動でそこそこいい感じに表示されています（午前0時を12:30とか表示されているのは違和感を覚えますが）。 非常に単純なグラフですが、これだけのコードで書けました。
