如何在HTML模板（ASP.NET）中显示使用JavaScript饼图中的AJAX方法从客户端检索的动态服务器端数据

Question

我已经成功地使用AJAX从客户端（C＃后端）到服务器端（aspx中的Javascript HTML）检索数据。 由于互联网给出的示例使用a内部显示数据，因此不确定如何将自己的数据动态显示到Javascript饼图中。

这通过使用POST方法从C＃方法“ calculateAverageLoginRate”中检索数据，以aspx形式显示AJAX方法。

这是c＃方法“ calculateAverageLoginRate”

这是显示在一个空的Web窗体中的结果

这是aspx中饼图的原始脚本。 请注意，该值已被硬编码。

我想用从c＃方法“ calculateAverageLoginRate”检索到的自己的动态数据替换饼图中的硬编码值。 由于我使用的是AJAX，因此不熟悉应如何编码AJAX，以便它能够获取检索到的数据并将其作为饼图值输入。 请指教，谢谢。

Answer 1

好吧，您走的路正确。 将您的成功函数更改为下面，全局声明pieData 。 在成功函数中，您将响应分配给pieData数组。 您的函数仅返回一个数字-因此您可以直接将其分配。

//declare globally
var pieData;


   // change success function to this
        success: function(response) {
            pieData = [
                {
                    value: response, //response is from ajax request
                    color: "#337AB7" //hardcoded color
                },
                { //hardcoded object
                    value: 50,
                    color: "#FC8213"
                }
            ];
            //instantiate chart
            new Chart(document.getElementById("pie").getcontext("2d").Pie(pideData));
        }

---

但是 ，如果它返回JSON格式的数组，则可以这样迭代：

杰森（示例）：

[
    {
        value: 'some random value1', 
        color: "#353AB7" 
    },
    {
        value: 'some random value2', 
        color: "#237AB7" 
    },
    {
        value: 'some random value3', 
        color: "#F37AB7" 
    },
    {
        value: 'some random value14, 
        color: "#137AB7" 
    }
]

JS：

// declare global array
var pieData = [];

// change success function to this
success: function(response) {
     response.forEach(function(el) {
         pieData.push({value: el.value, color: el.color})
     });

    new Chart(document.getElementById("pie").getcontext("2d").Pie(pideData));
}