サンプル
* Ajax通信を使う
モデル
* ChartModel.vb
Public Class ChartModel
Public Property XValues As Object()
Public Property YValues As Object()
End Class
コントローラ
* ChartController.vb
Imports System.Web.Mvc
Namespace Controllers
Public Class ChartController
Inherits Controller
' GET: Chart
Function Index() As ActionResult
Return View()
End Function
<HttpPost>
Function GetChartData() As ActionResult
Dim model As ChartModel = New ChartModel()
model.XValues = New Object() {"x", "English", "Math", "Science"}
model.YValues = New Object() {"Score", 76, 87, 45}
Return Json(model)
End Function
End Class
End Namespace
ビュー
* Index.vbhtml
@ModelType WebAppli.ChartModel
@Code
ViewData("Title") = "Index"
End Code
<h2>Index</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 type="text/javascript">
function showChart(xValues, yValues) {
var chart = c3.generate({
bindto: '#chart',
data: {
x: 'x',
columns: [
xValues,
yValues,
],
type: 'bar',
},
grid: {
y: {
lines: [{ value: 0 }]
}
},
axis: {
x: {
type: 'category',
tick: {
multiline: false,
rotate: 75,
},
height: 130
}
},
});
}
$(function () {
jqXhr = $.ajax({
type: 'POST',
url: '@Url.Content("~/Chart/GetChartData")', // アクセス先のURL
})
.done(function (returnData) {
var xValues = returnData.XValues;
var yValues = returnData.YValues;
showChart(xValues, yValues);
});
});
</script>
