Я пытаюсь отобразить гистограмму, используя диаграмму. Код js и C# с вызовом Ajax в моем приложении, используя приведенный ниже скрипт и код. Диаграмма не отображается. Код находится в C#, и я пишу код пользовательского интерфейса в файле aspx.
$(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;
}