サンプル
http://blogs.yahoo.co.jp/dk521123/35514061.html
の「例2 : 折れ線グラフ」を題材にする
モデル
Imports System.Web.Script.Serialization
Public Class JsonModel
Public Property ChartData As String
End Class
Public Class SampleChartModel
Inherits BaseChartModel
Public Property XValues As New List(Of String)
Public Property Y1Values As New List(Of String)
Public Property Y2Values As New List(Of String)
Public Sub New()
Me.XValues = New List(Of String)
Me.Y1Values = New List(Of String)
Me.Y2Values = New List(Of String)
End Sub
End Class
Public MustInherit Class BaseChartModel
Public Function ToJson() As String
Dim serializer = New JavaScriptSerializer()
Return serializer.Serialize(Me)
End Function
End Class
コントローラ
* ChartController.vb
Imports System.Web.Mvc
Namespace Controllers
Public Class ChartController
Inherits Controller
Function SampleChart() As ActionResult
Dim chartModel = New SampleChartModel With
{
.XValues = New List(Of String) From {"x", "2015/10/30", "2015/10/31", "2015/11/01", "2015/11/02", "2015/11/03", "2015/11/04"},
.Y1Values = New List(Of String) From {"data1", "30", "200", "100", "400", "150", "250"},
.Y2Values = New List(Of String) From {"data2", "130", "340", "200", "500", "250", "350"}
}
Dim model = New JsonModel With
{
.ChartData = chartModel.ToJson()
}
Return View(model)
End Function
End Class
End Namespace
ビュー
* ChartController.vb
@Code
ViewData("Title") = "SampleChart"
End Code
<h2>SampleChart</h2>
<div id="chart"></div>
<link href="@Url.Content("~/Content/c3.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.10.2.js")" type="text/javascript"></script>
<script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
<script src="@Url.Content("~/Scripts/c3.js")" type="text/javascript"></script>
<script>
var dataset = @Html.Raw(Model.ChartData)
c3.generate({
data: {
x: 'x',
xFormat: '%Y/%m/%d', // 'xFormat' can be used as custom format of 'x'
columns: [
dataset.XValues,
dataset.Y1Values,
dataset.Y2Values,
]
},
axis: {
x: {
type: 'timeseries',
tick: {
rotate: 45,
format: '%Y/%m/%d'
}
}
}
});
