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

Question

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

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

1. 在我的 Web 表单中创建了一个方法来返回 objectList

[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;
}

1. Javascript 文件 - 我被困在哪里：

$(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 变量中动态使用它。我想用 ajax 请求 WebMethod 中的值替换数据 (popData) 中硬编码的值。

Answer 1

我会这样做：

$(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 专家，因此请将此视为建议而非确定答案。

希望对你有帮助