chart.js사용, javascript에 json배열 넘기기

chart.js사용, javascript에 json배열 넘기기

 

[Model] : x, y 소문자로 만들어야 한다. chart.js에서 대문자는 인식을 못하더라.

public class ChartModel
{
    public decimal? x { get; set; }
    public decimal? y { get; set; }
}

 

[Controller] : Loop를 돌면서 모델 List에 담는다.

List<AnalysisBrand_RResult> result;
foreach (var item in result)
{
    charts.Add(new ChartModel { x = item.grp, y = item.searchCount });
}
ViewBag.jsonList = charts;

 

[View] : Json으로 인코딩

var myData = @Html.Raw(Json.Encode(@ViewBag.jsonList));
//console에 값 찍어보기
myData.forEach(function (item) {
    console.log('x:', item.x, ', y:', item.y);
});

var popData = {
    datasets: [{
        label: ['query', 'GRPS'],
        data: myData,
        backgroundColor: "#c8135c",
        pointRadius: 2,
        pointHoverRadius: 3
    }]
};

myData롤 그래프 작성

 

console.log('x:', item.x, ', y:', item.y);

console.log(myData);