正在将数据从控制器加载到图表Jquery/MVC/C#

Loading data from controller to chart Jquery/ MVC/ C#

本文关键字：Jquery MVC 加载 数据 控制器      更新时间：2023-09-26

我有以下控制器代码将图表数据返回到jquery。更新：我已经按照建议修改了代码，但仍然出现错误。

 public JsonResult GetLeaveDataForPieChart(int user_id)
    {
        List<EmployeeLeaveHeader> elh1 = new List<EmployeeLeaveHeader>();
        List<ChartEvent> ch = new List<ChartEvent>();
        elh1 = itlbg1.EmployeeLeaveHeaders.Where(f => f.Employee_ID == user_id).ToList();
    foreach (var item in elh1)
    {
        ChartEvent ce = new ChartEvent();
        ce.value = (item.leaveAvailable * 100).ToString();
        ce.color = item.CompanyLeaves.LeaveTypes.color;
        ce.highlight = "#ffffff";
        ce.label = item.CompanyLeaves.LeaveTypes.typeDescription + " Leave Available";
        ch.Add(ce);
        ChartEvent ce1 = new ChartEvent();
        ce1.value = (item.leaveTaken * 100).ToString();
        ce1.color = item.CompanyLeaves.LeaveTypes.color_light;
        ce1.highlight = "#ffffff";
        ce1.label = item.CompanyLeaves.LeaveTypes.typeDescription + " Leave Taken";
        ch.Add(ce1);
    }

    return Json(ch, JsonRequestBehavior.AllowGet);
}

我需要在jquery中检索数据，以便它以所需的格式传递给pie数据。

(document).ready(function () {
    user_id = $("#user_id_1").text();
    $.ajax({
        url: '/Leave/GetLeaveDataForPieChart/',
        cache: false,
        data: { user_id: user_id },
        type: "GET",
        datatype: "json",
        success: function (data) {
            alert(data);
            var pieChartCanvas = $("#pieChart").get(0).getContext("2d");
            var pieChart = new Chart(pieChartCanvas);
            var PieData = $.each(data, function (idx, obj) {
                var leave = new Object();
                    leave.value = obj.value;
                    leave.color = obj.color;
                    leave.highlight = obj.highlight;
                    leave.label = obj.label;
                    alert(leave);
                    return leave;
                });
                    var pieOptions = {
    //pie options..
};
                pieChart.Doughnut(PieData, pieOptions);
            }
        });

有人能解释一下如何将json数据转换为javascript对象以传递给饼图吗？

以下是如何将JSON字符串解析为对象。

 var jsonObject = JSON.parse(jsonString);

以下是如何使用jquery获取数据并将其用于图表

 $.ajax({
        url: '/<Controller>/GetLeaveDataForPieChart/',
        cache: false,
        data: {  user_id: <UserID> },
        type: "GET",
        success: function (data, textStatus, xmlHttpRequest) {
            data = JSON.parse(data);
            //....
            //....
            //Chart
            //....
            //....
            //....
        }
    });
相关文章：