【ASP.NET MVC】【VB】グラフ描画 ~.NET標準機能 / 基本編~ [1]

初めに

http://blogs.yahoo.co.jp/dk521123/35406503.html
でグラフ描画の検討したので、実際に使用してみる
C#のサンプルは結構あるが、あんまりVBってないので、メモ。

準備

 * プロジェクト配下の「参照」を右クリックし、[参照の追加]-[アセンブリ]-[フレームワーク]で
  「System.Web.DataVisualization」にチェックを付け、「OK」押下

サンプル1:棒グラフ

RouteConfig.vb

* 特別なことはない
Imports System.Web.Mvc
Imports System.Web.Routing

Public Module RouteConfig
    Public Sub RegisterRoutes(ByVal routes As RouteCollection)
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}")

        routes.MapRoute(
            name:="Default",
            url:="{controller}/{action}/{id}",
            defaults:=New With {.controller = "SampleChart", .action = "Index", .id = UrlParameter.Optional}
        )
    End Sub
End Module

SampleChartController.vb

* ただ Index.vbhtml を表示するだけ(特別なことはない)
Imports System.Web.Mvc

Namespace Controllers
    Public Class SampleChartController
        Inherits Controller

        Public Property DockStyle As Object

        ' GET: SampleChartController
        Function Index() As ActionResult
            Return View()
        End Function
    End Class
End Namespace

SampleChart/Index.vbhtml

* ここがキモ。とりあえず初めてなのでグラフを表示するだけ
@Imports System.Web.UI.DataVisualization.Charting
' @Imports System.Web.Helpers ' でもできた

@Code
    ViewData("Title") = "Index"
End Code

<h2>Index</h2>

@Code
    Dim path = "sampleChart.jpg"
    Dim sampleChart As Chart = New Chart(600, 400, ChartTheme.Yellow) ' グラフのテーマ(ChartTheme)★下記の「補足1」参照★
    sampleChart.AddTitle("Sample Chart")
    sampleChart.SetYAxis("身長")
    sampleChart.SetXAxis("メンバー名")
    sampleChart.AddLegend("凡例")
    sampleChart.AddSeries(
        "Height",
        "Column", ' グラフの種類(ChartType) ★下記の「補足1」参照★
        Nothing, ' ChartAreaプロパティ
        Nothing, ' AxisLabelプロパティ
        Nothing, ' Legendプロパティ
        1, ' MarkerStepプロパティ ★下記の「補足2」参照★
        {"Tom", "Kevin", "Smith"}, "X Axis Name",
        {178.2, 156.4, 168.3}, "Y Axis Name")
    sampleChart.Write()
End Code

補足1:グラフのテーマ & グラフの種類

 * 長くなったので、以下の関連記事で分割
http://blogs.yahoo.co.jp/dk521123/35416865.html

補足2:MarkerStepプロパティ

 * 2以上の値を指定することで、表示頻度を変化させる
  => ポイントの個数が多く、すべてにマーカーを付与するとかえってチャートが見にくくなるので、適宜調整する

サンプル2:複数グラフ

以下のファイルは、上記の「サンプル2」と同じのため、省略。
 * RouteConfig.vb
 * SampleChartController.vb

SampleChart/Index.vbhtml

@Imports System.Web.UI.DataVisualization.Charting

@Code
    ViewData("Title") = "Index"
End Code

<h2>Index</h2>

@Code
    Dim path = "sampleChart.jpg"
    Dim sampleChart As Chart = New Chart(600, 400, ChartTheme.Vanilla3D)
    sampleChart.AddTitle("Sample Chart")
    sampleChart.SetYAxis("値", 50, 200)
    sampleChart.SetXAxis("メンバー名")
    sampleChart.AddLegend("凡例")
    sampleChart.AddSeries(
        "Hight",
        "Column",
        Nothing,
        Nothing,
        Nothing,
        1,
        {"Tom", "Kevin", "Smith"}, "X Axis Name",
        {178.2, 156.4, 168.3}, "Y Axis Name")
    sampleChart.AddSeries(
        "Weight",
        "Column",
        Nothing,
        Nothing,
        Nothing,
        1,
        {"Tom", "Kevin", "Smith"}, "X Axis Name",
        {67.2, 52.4, 76.3}, "Y Axis Name")
    sampleChart.Write()
End Code


関連記事

ASP.NET MVC でグラフを描画することを考える

http://blogs.yahoo.co.jp/dk521123/35406503.html

グラフ描画 ~.NET標準機能 / グラフの種類 & デザイン編~ [2]

http://blogs.yahoo.co.jp/dk521123/35416865.html