javascript - 如何在 C# 中使用 chart.js 和 Ajax 绘制条形图

Question

我正在尝试使用以下脚本和代码在我的应用程序中使用带有 Ajax 调用的 chart.js 和 C# 代码显示条形图。图表未显示。代码在 C# 中，我在 aspx 文件中编写 UI 代码。

$(document).ready(function () {

    var jsonData = JSON.stringify({
    });

    $.ajax({
        type: "POST",
        url: "Home.asmx/GetMonthtlyInspectionData",
        data: jsonData,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            var data = response.d.Datas;
            var label = response.d.Labels;
            let ctx = $("#barChart").get(0).getContext("2d");
            ctx.height = 130;
            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: label,
                    type: 'bar',
                    defaultFontFamily: 'Montserrat',
                    datasets: [{
                        data: data,
                        label: "Approved Request",
                        backgroundColor: 'rgba(54, 162, 235, 0.2)',
                        borderColor: 'transparent',
                        borderWidth: 2,
                        pointStyle: 'circle',
                        pointRadius: 5,
                        pointBorderColor: '#847DFA',
                        pointBackgroundColor: '#fff',
                    }]
                },
                options: {
                    responsive: !0,
                    maintainAspectRatio: true,
                    tooltips: {
                        mode: 'index',
                        titleFontSize: 12,
                        titleFontColor: '#fff',
                        bodyFontColor: '#fff',
                        backgroundColor: '#000',
                        titleFontFamily: 'Montserrat',
                        bodyFontFamily: 'Montserrat',
                        cornerRadius: 3,
                        intersect: false,
                    },
                    legend: {
                        display: true,
                        position: 'top',
                        labels: {
                            usePointStyle: true,
                            fontFamily: 'Montserrat',
                        },

                    },
                    scales: {
                        xAxes: [{
                            beginAtZero: true,
                            display: true,
                            gridLines: {
                                display: false,
                                drawBorder: true
                            },
                            scaleLabel: {
                                display: true,
                                labelString: 'Month'
                            }
                        }],
                        yAxes: [{
                            display: true,
                            beginAtZero: true,
                            gridLines: {
                                display: false,
                                drawBorder: true
                            },
                            scaleLabel: {
                                display: true,
                                labelString: 'Inspection Request Count'
                            }
                        }]
                    },
                    title: {
                        display: true,
                    }
                }
            });
        }
    });
});

下面是我的 aspx.cs 代码 -

public List<HomeModel> GetMonthtlyCaseData()
{
    List<HomeModel> t = new List<HomeModel>();
    string conn = ConfigurationManager.ConnectionStrings["ConnCase"].ConnectionString;

    using (OracleConnection cn = new OracleConnection(conn))
    {
        string myQuery = "Select  count(CaseNo),to_char(to_date(CaseDt, 'DD-MM-YYYY'),'Month') from t_case_detail group by CaseNo,CaseDt ";
        OracleCommand cmd = new OracleCommand();
        cmd.CommandText = myQuery;
        cmd.CommandType = CommandType.Text;
        cmd.Connection = cn;
        cn.Open();
        OracleDataReader dr = cmd.ExecuteReader();
        if (dr.HasRows)
        {
            int counter = 0;
            while (dr.Read())
            {
                HomeModel tsData = new HomeModel();
                tsData.month = dr["CaseDt"].ToString();
                tsData.requestNo = dr["CaseNo"].ToString();
                t.Add(tsData);
                counter++;
            }
        }
    }
    return t;
}

标签： javascriptc#jqueryasp.netajax