【发布时间】：2019-06-21 15:36:15
【问题描述】：
我正在尝试从 SQL 数据库生成交互式谷歌图表，但图表未加载
我是一种网络方法，它从数据库中提取信息，并在图表中显示。我正在尝试使用 javascript / jquery 调用此方法，但我的 AJAX 调用似乎有问题。我尝试了许多不同的方法，似乎无法解决确切的问题
MyProfile.aspx
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script type="text/javascript" src="https://www.google.com/jsapi">
</script>
<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
$.ajax({
type: "POST",
url: "MyProfile.aspx/GetChartData",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
var data = google.visualization.arrayToDataTable(r.d);
var chart = new
google.visualization.LineChart($("myChart")[0]);
chart.draw(data, options);
},
failure: function (r) {
alert(r.d);
},
error: function (r) {
alert(r.d);
}
});
window.onload = function drawChart() {
var options = {
title: '10 Most Recent Autoregulation Scores',
width: 600,
height: 400,
bar: { groupWidth: "95%" },
legend: { position: "none" },
isStacked: true
};
}
</script>
<script src="https://kit.fontawesome.com/3c3e2594b3.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/
popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js
/bootstrap.min.js"></script>
.
.
.
.
<body>
<form id="form1" runat="server">
<div>
<div id="myChart" style="width:500px; height:400px" />
</div>
MyProfile.aspx.cs
[WebMethod]
public List<object> GetChartData()
{
//Query to database
string query = "Select TOP 10 SessionID, AutoreguationScore,
UserID, ScoreID from AutoregulationScores WHERE UserID=
'" + Session["UID"] + "' ORDER BY ScoreID DESC";
string constr =
ConfigurationManager.ConnectionStrings
["TrainingLoadManagerConnectionString"].ConnectionString;
List<object> chartData = new List<object>();
chartData.Add(new object[]
{
"AutoregulationScore", "SessionID"
});
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand(query))
{
cmd.CommandType = CommandType.Text;
cmd.Connection = con;
con.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
chartData.Add(new object[]
{
sdr["AutoregulationScore"],
sdr["SessionID"]
});
}
}
con.Close();
return chartData;
}
}
我应该看到正在显示的交互式图表，但事实并非如此
【问题讨论】：
-
您能否确认您正在从 ajax 调用中获取数据？
-
相应的 div 标签内没有显示任何内容
-
您需要分解问题以确定它是在客户端还是服务器端。根据我在您的 javascript 中看到的内容，您正在调用 post 方法，而看起来您打算调用 get 方法。您的控制器操作上没有 HttpPost 装饰器。另外，您的 ajax 调用中有一个空对象。试试这个： $.ajax({ type: "Get", url: "MyProfile.aspx/GetChartData",
-
这也不影响任何事情
-
在调试中运行程序并在 GetChartData 方法中设置断点。断点是否被击中？
标签： javascript c# asp.net ajax