Как отобразить динамические данные на стороне сервера, полученные со стороны клиента, с помощью метода AJAX в круговой диаграмме Javascript, в HTML-шаблоне (ASP.NET)

Question

Мне успешно удалось получить данные со стороны клиента (серверная часть C #) на сторону сервера (Javascript HTML в aspx) с помощью AJAX.Поскольку в примере, приведенном в Интернете, для отображения данных используется внутренняя переменная a, я не уверен, как мне динамически отображать свои собственные данные в круговую диаграмму Javascript.

Это показывает метод AJAX в форме aspx,с помощью метода POST для извлечения данных из метода C # «CalculateLoginRate»

Это метод C # «executeAverageLoginRate»

Это результатто есть отображается в пустой веб-форме

Это оригинальный скрипт для круговой диаграммы внутри aspx.Обратите внимание, что значение было жестко закодировано.

Я хочу заменить жестко закодированные значения в круговой диаграмме моими собственными динамическими данными, полученными из моего метода c # «вычисленияAverageLoginRate».Поскольку я использую 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, вы можете выполнить итерацию следующим образом:

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