[英]Request list data of type json using AJAX to dynamically output in a bubble chart from chart.js
我有一个包含来自 SQL 数据库的数据的数据表。 我想在 chart.js 气泡图上绘制此数据。 到目前为止,我已完成以下操作: 1. 查询 SQL 数据库并将输出检索到 BubbleData 类型的BubbleData
,该对象列表包含两个属性:
public string category { get; set; }
public decimal score { get; set; }
[System.Web.Services.WebMethod]
public static List<BubbleData> ReturnData()
{
string connectionstring = ConfigurationManager.ConnectionStrings["SQLConString"].ConnectionString;
SqlConnection cn = new SqlConnection(connectionstring);
cn.Open();
SqlCommand cmd = new SqlCommand("dbo.sp_ui_ExecView_Bubble", cn);
cmd.Parameters.AddWithValue("@RunID", 1);
var da = new SqlDataAdapter(cmd);
cmd.CommandType = CommandType.StoredProcedure;
var dt = new DataTable();
da.Fill(dt);
cn.Close();
List<BubbleData> objectList = new List<BubbleData>();
foreach (DataRow dr in dt.Rows)
{
objectList.Add(new BubbleData()
{
category = dr["Category"].ToString(),
score = Convert.ToDecimal(dr["Score"].ToString()) * 100
});
}
return objectList;
}
$(function() {
var popData = [];
$.ajax({
type: "POST",
async: false,
url: "ExecView.aspx/ReturnData",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
var myData = data.d;
console.log(myData[0]);
}
});
var popData = {
datasets: [{
label: ['Test'],
data: [{
x: 100,
y: 0
}, {
x: 60,
y: 30
}, {
x: 40,
y: 60
}, {
x: 80,
y: 80
}, {
x: 20,
y: 30
}, {
x: 0,
y: 10
}],
}]
};
var bubbleOptions = {
responsive: true,
legend: {
display: false
},
};
var ctx5 = document.getElementById("bubble_chart").getContext("2d");
new Chart(ctx5, { type: 'bubble', data: popData, options: bubbleOptions });
});
在 javascript 文件中,我有数据,例如 myData[0] 但我如何在 popData 变量中动态使用它。 在数据 (popData) 中硬编码的值我想用来自 ajax 请求 WebMethod 的值替换。
我会做这样的事情:
$(function() {
var bubbleData;
$.ajax({
type: "POST",
async: false,
url: "ExecView.aspx/ReturnData",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
var bubbleDatas = data.d;
bubbleData = new Array(bubbleDatas.length);
for (i = 0; i < bubbleDatas.length; i++) {
bubbleData[i] = {x: i, y:bubbleDatas[i].score};
}
}
});
var popData = {
datasets: [{
label: ['Test'],
data: bubbleData
}]
};
var bubbleOptions = {
responsive: true,
legend: {
display: false
},
};
var ctx5 = document.getElementById("bubble_chart").getContext("2d");
new Chart(ctx5, { type: 'bubble', data: popData, options: bubbleOptions });
});
我没有测试这段代码,我也不是 javascript 专家,所以把它作为一个建议而不是一个确定的答案。
我希望我有帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.