Javascript 使用AJAX请求json类型的列表数据，以便从chart.js在气泡图中动态输出

我有一个包含SQL数据库数据的数据表。我想在chart.js气泡图上绘制这些数据。到目前为止，我已经做了以下工作： 1.查询SQL数据库并将输出检索到类型为

BubbleData

的objectList中，该objectList包含两个属性：

 public string category { get; set; }
 public decimal score { get; set; }

在我的web表单中创建了一个方法以返回objectList

[System.Web.Services.WebMethod]
公共静态列表ReturnData（）
{
string connectionstring=ConfigurationManager.connectionstring[“SQLConString”]。connectionstring；
SqlConnection cn=新的SqlConnection（connectionstring）；
cn.Open（）；
SqlCommand cmd=newsqlcommand（“dbo.sp\u ui\u ExecView\u Bubble”，cn）；
cmd.Parameters.AddWithValue（“@RunID”，1）；
var da=新的SqlDataAdapter（cmd）；
cmd.CommandType=CommandType.storedProcess；
var dt=新数据表（）；
da.填充（dt）；
cn.Close（）；
List objectList=新列表（）；
foreach（数据行dr在dt.行中）
{
添加（新的BubbleData（）
{
category=dr[“category”]。ToString（），
score=Convert.ToDecimal（dr[“score”].ToString（））*100
});
}
返回对象列表；
}

Javascript文件-我被卡住的地方：

$（函数（）{
var-popData=[]；
$.ajax({
类型：“POST”，
async:false，
url:“ExecView.aspx/ReturnData”，
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
成功：功能（数据）{
var myData=data.d；
console.log（myData[0]）；
}
});
var popData={
数据集：[{
标签：[“测试”]，
数据：[{
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={
回答：是的，
图例：{
显示：假
},
};
var ctx5=document.getElementById（“气泡图”）.getContext（“2d”）；
新图表（ctx5，{type:'bubble'，data:popData，options:bubbleOptions}）；
});

---

在javascript文件中，我有一些数据，例如myData[0]，但如何在popData变量中动态使用它。我想用ajax请求WebMethod中的值替换数据中硬编码的值（popData）。

我会这样做：

$（函数（）{
泡叶变种；
$.ajax({
类型：“POST”，
async:false，
url:“ExecView.aspx/ReturnData”，
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
成功：功能（数据）{
var bubbledata=data.d；
bubbleData=新数组（bubbleData.length）；
对于（i=0；i

我没有测试这段代码，我也不是javascript专家，所以把这当作一个建议，而不是一个确定的答案

---

我希望我能有所帮助

我的编辑似乎不起作用，也许我会再试一次，但首先我会尝试找到答案。明确地说，您的请求

$.ajax（{…}）

有效，对吗？另一件我不清楚的事情是：用什么规则在气泡图上绘制气泡数据？分数可以用作一个轴，但另一个轴？是的，我的Ajax请求有效！我可以在控制台中看到所有类别和分数！所以X轴我要画类别，y轴是分数。因此，气泡应该代表分数。单个类别可以有多个

BubbleData

？一个类别一个分数。g类别“蓝色”的分数为30。所以我想在X轴上画蓝色，在y轴上画30。“黄色”类得分为20分。黄色是我X轴上的下一个点。20对我的y轴这有帮助-但我在图表上没有看到任何气泡，所以我猜它是我的轴min和maxYeah，这是我的一个错误，我更改了

popData[i]={x:i，y:bubbleDatas[i].score}

to

bubbleData[i]={x:i，y:bubbleData[i].score}是的，这是有效的！好的，现在只需要弄清楚如何将类别显示为标签。谢谢