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

Posted 2023-03-23

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

【英文标题】：Request list data of type json using AJAX to dynamically output in a bubble chart from chart.js

【发布时间】：2020-02-20 16:57:34

【问题描述】：

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

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

在我的 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;

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) 中硬编码的值。

【问题讨论】：

我的编辑似乎没有奏效，也许我会再试一次，但首先我会尝试找到答案。需要明确的是，您的请求 $.ajax(...) 有效，对吗？我不清楚的另一件事：在气泡图上绘制 BubbleData 的规则是什么？分数可以作为一个轴，但另一个？

是的，我的 Ajax 请求有效！我可以在控制台中看到所有类别和分数！所以X轴我想绘制类别，y轴是分数。所以气泡应该代表分数。

一个类别可以有多个BubbleData？

一个类别一个分数

例如类别“蓝色”的得分为 30。所以我想在我的 X 轴上使用蓝色，并在气泡中相对于我的 y 轴绘制 30。 “黄色”类别的得分为 20。所以黄色是我 X 轴上的下一个点。和 20 对着我的 y 轴

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

希望对你有帮助

【讨论】：

这有帮助 - 但我在图表上看不到任何气泡，所以我猜测它是我的轴最小值和最大值

是的，这是我的错误，我已将popData[i] = x: i, y:bubbleDatas[i].score; 更改为bubbleData[i] = x: i, y:bubbleDatas[i].score;

是的，这行得通！好的，现在只需要弄清楚如何让类别显示为标签。谢谢