Круговая диаграмма RGraph не обновляет значение

Я пытаюсь получить данные из API и обновить круговую диаграмму на странице приложения Electron, но не могу обновить значение диаграммы. Значения на графике никогда не меняются. Я пробовал этот метод с RGraph Gauge раньше, и он работал, но с Electron не обновляет значение. Что я делаю не так? Спасибо за помощь. Скриншот моего электронного приложения

<script>
    const ipcRenderer = require("electron").ipcRenderer;
    const  {session}  = require('electron').remote;
    document.getElementById("backBtn").addEventListener("click",()=>{
        ipcRenderer.send("btnBack","101");
    });

    temp = new RGraph.HorseshoeMeter({
        id: 'temp',
        min: 0,
        max: 50,
        value: 15,
        options: {
            colors: ["#3678c1", '#BED1E3'],
            textColor: "#3678c1",
            animationOptions: {frames: 60}                    // Doesn't need to be a string
        }
    }).draw();

    hum = new RGraph.HorseshoeMeter({
        id: 'hum',
        min: 0,
        max: 100,
        value: 45,
        options: {
            colors: ["#3678c1", '#BED1E3'],
            textColor: "#3678c1",
            animationOptions: {frames: 60}                    // Doesn't need to be a string
        }
    }).draw();

    iaq = new RGraph.HorseshoeMeter({
        id: 'iaq',
        min: 0,
        max: 3000,
        value: 1232,
        options: {
            colors: ["#3678c1", '#BED1E3'],
            textColor: "#3678c1",
            animationOptions: {frames: 60}                    // Doesn't need to be a string
         }
    }).draw();

async function getSessionInfo(){
    let myPromise = new Promise(function(myResolve, myReject) {
        session.defaultSession.cookies.get({name: "human_presence"},   (error,cookies)=>{
            if(error){ myReject(error)}
            if(cookies.length>0){
                let arr = cookies[0];
                if(arr.name === "human_presence" && ( (Date.now()-arr.expirationDate) < 600000)){
                    let obj = JSON.parse(arr.value);
                    myResolve(obj.accessToken);
                }
                else{ myResolve("Token bulunamadı")}
            }
        });
    });
    return await myPromise;
}

function httpCall(){
    getSessionInfo().then(function (val){
        let method = "GET";
        let url = "http://localhost:4000/classroom/101";
        let xmlHttpRequest = new XMLHttpRequest();
        xmlHttpRequest.addEventListener("readystatechange", function() {
            if(this.readyState === 4) {
                console.log(this.responseText);
                let obj = JSON.parse(this.responseText);
                console.log(obj);
                document.getElementById("dateTime-101").innerHTML = "Son Kayıt Zamanı : "+obj.created;
                document.getElementById("NoS-101").innerHTML = "Öğrenci Sayısı : "+obj.NoS;
                temp.value = parseInt(obj.Temp);
                hum.value = parseInt(obj.Hum);
                iaq.value = parseInt(obj.IAQ);

                RGraph.redrawCanvas(temp.canvas);
                RGraph.redrawCanvas(hum.canvas);
                RGraph.redrawCanvas(iaq.canvas);
            }
        });
        xmlHttpRequest.open(method, url);
        xmlHttpRequest.setRequestHeader('Authorization', 'Bearer ' + val);
        xmlHttpRequest.send();
    })
}

window.onload = httpCall();
window.setInterval(function(){
    httpCall();
}, 20000);

javascript html electron rgraph
person kemalserkan    schedule 27.01.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вот мой ответ, опубликованный на форуме RGraph:

Это связано с тем, что счетчик HorseShoe на самом деле не является «настоящим» объектом диаграммы RGraph, а является адаптацией круговой диаграммы. В результате я думаю, что проще просто перерисовать всю диаграмму при ее обновлении.

Вот код:

<canvas id="cvs" width="400" height="400">[No canvas support]</canvas>

<script>
    function draw (value)
    {
        RGraph.reset(document.getElementById('cvs'));

        new RGraph.HorseshoeMeter({
            id: 'cvs',
            min: 0,
            max: 10000,
            value: value,
            options: {
            }
        }).roundRobin();
    }
    
    delay = 2000;
    
    function update ()
    {
        var value = Math.random(0, 1000);

        draw(value * 10000);
        
        // Call ourselves again
        setTimeout(update, delay);
    }
    
    setTimeout(update, delay);
</script>

А вот CodePen кода:

https://codepen.io/rgraph/pen/gOLYOej

person Richard    schedule 27.01.2021
comment
Спасибо, Ричард. Теперь это работает. - person kemalserkan; 28.01.2021
comment
В следующей версии, я думаю, я собираюсь продвигать измерители на основе круговой диаграммы (измеритель в форме подковы, сегментированный измеритель, измеритель активности, измеритель радиального прогресса) до реальных объектов диаграммы вместо того, чтобы основываться на круговой диаграмме. Это позволит улучшить анимацию - в вашем случае это будет означать, что диаграмма не всегда будет анимироваться с нуля при изменении значения. Когда это сделано, выглядит намного красивее. - person Richard; 28.01.2021