準備
* プロジェクト配下の「参照」を右クリックし、[参照の追加]-[アセンブリ]-[フレームワーク]で
「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