Estoy teniendo un problema con mi carta en vivo de My Chart.js, donde el eje Y no se actualizará. Estoy usando Razorpages para llamar a una función C # que genera un número aleatorio ubicado en el lado cshtml.cs de la Razorpage. Cuando llame a esta función en mi parte CSHTML de la Razorpage, tomará el primer valor generado a partir de la función y transmitir constantemente que un valor.

Aquí hay algún código de referencia.

Código C # en cshtml.cs

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

Código de JavaScript relevante en 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
                }
            }
        }
    };

¿Cómo obtengo que la tabla actualice constantemente el eje Y con los diferentes números generados desde mi función C #?

0
Theo 27 jun. 2019 a las 17:27

1 respuesta

La mejor respuesta

No puedes hacer eso directamente. El código se ejecuta solo una vez cuando la solicitud se envía al servidor.

Para lograr sus objetivos, necesita crear un fragmento de código del lado del servidor para generar datos. Por ejemplo, si prefiere Razor Page, cree un controlador OnGetRefresh() como se muestra a continuación:

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

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

Y luego tire de los datos cuando onRefresh usando AJAX o websocket. Aquí hay una demostración que utiliza AJAX para obtener los datos del servidor:

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

Una demostración de trabajo usando su configuración:

enter image description here

0
itminus 28 jun. 2019 a las 03:32