Javascript ajaxjquery只从C#Web方法-Chart.Js返回一行数据
我试图在一个chart.js条形图中显示多行数据,我得到的图表显示了来自SQL&C#Web方法的实时数据。但是,在图表中,它仅显示1行数据,因此显示1条。如何在条形图中显示所有行 行的数量可以改变,所以我不想限制返回的数量,我知道我需要某种循环,但不确定从哪里开始 我正在使用ASP.NETC# Ajax/jQuery代码: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
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代码>但它只返回最后一个值