ASP.NET MVC 의 CanvasJS 를 jquery 를 통해 활용하기
아래와 같이 챠트에 맞는 모델을 만듭니다. 여기서 DataMember 의 Name 에 명시된 값이 json 형태의 문자열로 전송되므로, 속성이 대문자이지만 json 파라미터의 키값은 소문자 인 x 그리고 y 형태로 발송됩니다.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.Web;
namespace ASPNET_MVC_Samples.Models
{
//DataContract for Serializing Data - required to serve in JSON format
[DataContract]
public class DataPoint
{
public DataPoint(double x, double y)
{
this.X = x;
this.Y = y;
}
//Explicitly setting the name to be used while serializing to JSON.
[DataMember(Name = "x")]
public Nullable<double> X = null;
//Explicitly setting the name to be used while serializing to JSON.
[DataMember(Name = "y")]
public Nullable<double> Y = null;
}
}
문자열 형태로 반환하는 함수는 ContentResult 이며, Newtonsoft.Json 에 있는 SerializeObject 를 통해 object 를 serialize 직렬화하여 전송합니다.
using ASPNET_MVC_Samples.Models;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace ASPNET_MVC_Samples.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
public ContentResult JSON()
{
double count = 50, y = 10;
Random random = new Random(DateTime.Now.Millisecond);
List<DataPoint> dataPoints;
dataPoints = new List<DataPoint>();
for (int i = 0; i < count; i++)
{
y = y + (random.Next(0, 20) - 10);
dataPoints.Add(new DataPoint(i, y));
}
JsonSerializerSettings _jsonSetting = new JsonSerializerSettings() {
NullValueHandling = NullValueHandling.Ignore };
return Content(JsonConvert.SerializeObject(dataPoints,
_jsonSetting), "application/json");
}
}
}
jquery 를 통해 받은 json 형태의 문자열을 dataPoints 값에 할당을 합니다.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script type="text/javascript" src="http://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
<h1>Charts using JSON & AJAX</h1>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<script type="text/javascript">
$(document).ready(function () {
$.get("/home/json/", function (data) {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
theme: "theme2",//theme1
title: {
text: "CanvasJS Charts in ASP.Net MVC using JSON & AJAX"
},
data: [
{
// Change type to "bar", "splineArea", "area", "spline", "pie",etc.
type: "line",
dataPoints: data
}
]
});
chart.render();
});
});
</script>
</body>
</html>