Javascript ajaxjquery只从C#Web方法-Chart.Js返回一行数据

Javascript ajaxjquery只从C#Web方法-Chart.Js返回一行数据,javascript,c#,jquery,asp.net,ajax,Javascript,C#,Jquery,Asp.net,Ajax,我试图在一个chart.js条形图中显示多行数据,我得到的图表显示了来自SQL&C#Web方法的实时数据。但是,在图表中,它仅显示1行数据,因此显示1条。如何在条形图中显示所有行 行的数量可以改变,所以我不想限制返回的数量,我知道我需要某种循环,但不确定从哪里开始 我正在使用ASP.NETC# Ajax/jQuery代码: jQuery(document).ready(function () { console.log("Start"); var descrip

我试图在一个chart.js条形图中显示多行数据,我得到的图表显示了来自SQL&C#Web方法的实时数据。但是,在图表中,它仅显示1行数据,因此显示1条。如何在条形图中显示所有行

行的数量可以改变,所以我不想限制返回的数量,我知道我需要某种循环,但不确定从哪里开始

我正在使用ASP.NETC#

Ajax/jQuery代码:

jQuery(document).ready(function () {
        console.log("Start");

        var description = jQuery('Description').toArray();
        var applicantSourceCount = jQuery('ApplicantSourceCount').toArray();
        var url = '<%=ResolveUrl("ReportingDashboard.aspx/GetApplicantSourceData") %>';

        function chartData() {
            console.log("load Function");

            jQuery.ajax({
                type: "POST",
                url: url,
                contentType: "application/json; charset=utf-8",
                data: '{Description:"' + description + '", ApplicantSourceCount:"' + applicantSourceCount + '"}',
                dataType: "json",
                success: function (data) {
                    console.log(data);
                    //alert(data);
                    var aData = data.d;
                    var aLabels = data.d["0"].Description;
                    var aDataSet = data.d["0"].ApplicantSourceCount;

                    console.log(aLabels);
                    console.log("load chart data");
                    console.log(data.d["0"].ApplicantSourceCount);
                    var ctx = document.getElementById("myChart");
                    var myChart = new Chart(ctx, {
                        type: 'bar',
                        data: {
                            labels: aLabels.split(','),
                            datasets: [{
                                label: "Applicant Source",
                                data: aDataSet.split(','),
                                backgroundColor: [
                                    "rgba(54, 162, 235, 0.2)",
                                    "rgba(255, 99, 132, 0.2)",
                                    "rgba(255, 159, 64, 0.2)",
                                    "rgba(255, 205, 86, 0.2)",
                                    "rgba(75, 192, 192, 0.2)",
                                    "rgba(153, 102, 255, 0.2)",
                                    "rgba(201, 203, 207, 0.2)"
                                ],
                                borderColor:[
                                    "rgb(54, 162, 235)",
                                    "rgb(255, 99, 132)",
                                    "rgb(255, 159, 64)",
                                    "rgb(255, 205, 86)",
                                    "rgb(75, 192, 192)",
                                    "rgb(153, 102, 255)",
                                    "rgb(201, 203, 207)"
                                ],
                                borderWidth: 3
                            }]
                        },
                        options: {
                            scales: {
                                yAxes: [{
                                    ticks: {
                                        beginAtZero:true
                                    }
                                }]
                            }
                        }
                    });
                    console.log("chartDrawEnd");
                }
            }); 
        }
        chartData();            
    });  
jQuery(文档).ready(函数(){
控制台日志(“启动”);
var description=jQuery('description').toArray();
var applicationsourcecount=jQuery('applicationsourcecount').toArray();
var url='';
函数chartData(){
日志(“加载功能”);
jQuery.ajax({
类型:“POST”,
url:url,
contentType:“应用程序/json;字符集=utf-8”,
数据:{Description:“+Description+”,applicationSourceCount:“+applicationSourceCount+”},
数据类型:“json”,
成功:功能(数据){
控制台日志(数据);
//警报(数据);
var aData=data.d;
var aLabels=data.d[“0”]。说明;
var aDataSet=data.d[“0”].applicationSourceCount;
控制台日志(阿拉贝尔);
日志(“负载图表数据”);
console.log(data.d[“0”].applicationSourceCount);
var ctx=document.getElementById(“myChart”);
var myChart=新图表(ctx{
类型:'bar',
数据:{
标签:aLabels.split(','),
数据集:[{
标签:“申请人来源”,
数据:aDataSet.split(','),
背景颜色:[
“rgba(54162235,0.2)”,
"rgba(255,99,132,0.2),,
“rgba(255、159、64、0.2)”,
"rgba(255,205,86,0.2),,
“rgba(751921920.2)”,
“rgba(153102255,0.2)”,
rgba(2012032070.2)
],
边框颜色:[
“rgb(54162235)”,
“rgb(255、99、132)”,
“rgb(255、159、64)”,
“rgb(255、205、86)”,
“rgb(75192192)”,
“rgb(153102255)”,
rgb(201、203、207)
],
边框宽度:3
}]
},
选项:{
比例:{
雅克斯:[{
滴答声:{
贝吉纳泽罗:是的
}
}]
}
}
});
控制台日志(“图表抽屉”);
}
}); 
}
图表数据();
});  

目前尚不清楚json响应的格式,但一般来说,我认为您需要的是输入多个数据集的能力。如果您注意到,
datasets
字段是一个数组,由具有标签、数据和一些背景颜色的Javascript对象组成。一种可能的选择是创建一个for循环,该循环遍历返回的json,获取数据集所需的信息,创建相应的javascript对象,然后将该javascript对象添加到数组中。然后,只需将数组传递到
数据集
字段中

在这种情况下,我也必须对标签做同样的事情..我返回两列11行的数据;说明(源)和每个源的总行数。我试过
var aDataSet=data.d[“0”、“1”、“2”、“3”、“4”、“5”、“6”、“7”、“8”、“9”、“10”]。applicationsourcecount但它只返回最后一个值