Как постоянно обновлять ось y с помощью функции C # для обновления живой (потоковой) диаграммы Chart.js в ядре ASP.NET основных веб-приложений Razor Pages

Question

У меня проблема с живым графиком Chart.js, где ось Y не обновляется. Я использую RazorPages для вызова функции C #, которая генерирует случайное число, расположенное на стороне cshtml.cs RazorPage. Когда я вызываю эту функцию в моей cshtml-части страницы Razorpage, она примет первое значение, сгенерированное функцией, и будет постоянно передавать это одно значение.

Вот код для справки.

C # код в cshtml.cs

 public class IndexModel:PageModel
 {
      public int RNG(){
        Random rnd = new Random();
        int num = rnd.Next(1, 10);
       return num;
     }
 }

Соответствующий код Javascript в cshtml.cs

function onRefresh(chart) {
 chart.config.data.datasets.forEach(function (dataset) {
 dataset.data.push({
    x: Date.now(),
    y: @Model.RNG() //Where I call my c# function
  });
 });
}
var config_Chart = {
        type: 'line',
        data: {
            datasets: [{
                label: 'Chart Data',
                backgroundColor: 
                color(chartColors.red).alpha(0.5).rgbString(),
                borderColor: chartColors.red,
                fill: false,
                lineTension: 0,
                borderDash: [8, 4],
                data: []
            }]
        },
        options: {
            title: {
                display: true,
                text: 'Chart (Real Time)'
            },
            scales: {
                xAxes: [{
                    type: 'realtime'
                }],
                yAxes: [{
                    scaleLabel: {
                        display: true,
                        labelString: 'value'
                    }
                }]
            },
            tooltips: {
                mode: 'nearest',
                intersect: false
            },
            hover: {
                mode: 'nearest',
                intersect: false
            },
            plugins: {
                streaming: {
                    duration: 20000,
                    refresh: 1000,
                    delay: 2000,
                    onRefresh: onRefresh
                }
            }
        }
    };

Как заставить диаграмму постоянно обновлять ось Y различными числами, сгенерированными из моей функции c #?

Answer 1

Вы не можете сделать это напрямую. Код выполняется только один раз, когда запрос отправляется на сервер.

Чтобы достичь ваших целей, вам нужно создать фрагмент кода на стороне сервера для генерации данных. Например, если вы предпочитаете Razor Page, создайте обработчик OnGetRefresh(), как показано ниже:

public IActionResult OnGetRefresh()
{
    return new JsonResult(this.RNG());
}

private int RNG(){
    Random rnd = new Random();
    int num = rnd.Next(1, 10);
    return num;
}

А затем извлекайте данные, когда onRefresh, используя Ajax или websocket. Вот демонстрация, которая использует Ajax для получения данных с сервера:

function onRefresh(chart) {
    function pushData(yData){
        chart.config.data.datasets.forEach(function(dataset) {
            dataset.data.push({ x: Date.now(), y:yData });
        });
    }
    var xhr = new XMLHttpRequest();
    // you might want to custom the url
    var handlerUrl = '/Index?handler=Refresh';
    xhr.open('GET', handlerUrl , true);  
    xhr.onreadystatechange = function(){
        if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status == 200) {
                pushData(xhr.responseText);
                return;
            } 
            console.log("error happens: receives a status code ",xhr.status)
        }
    }
    xhr.send();
}

Рабочая демонстрация Использование вашей конфигурации: