如何解决RGraph 饼图不刷新值
我尝试从 API 获取数据并刷新 Electron 应用程序页面上的饼图,但无法刷新图表的值。图表上的值永远不会改变。我之前用 rgraph Gauge 尝试过这种方法并且它有效,但是使用 Electron 不会刷新该值。我究竟做错了什么?谢谢您的帮助。 Screenshot of my electron application
<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',max: 100,value: 45,animationoptions: {frames: 60} // Doesn't need to be a string
}
}).draw();
iaq = new rgraph.HorseshoeMeter({
id: 'iaq',max: 3000,value: 1232,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);
解决方法
这是我发布到 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:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。