[英]“Playing back” data from a pandas data frame with a date time column in real time?
我有一個很大的 pandas 數據框,其中包含傳感器數據何時進入的日期時間列。我想創建一個“實時”回放此數據的應用程序。 例如,用戶可以像視頻播放器一樣在時間線上滑動,它會跳到正確的行並在正確的時間間隔獲取數據,按下播放鍵,然后按 go 並實時顯示數據。
遍歷此數據幀並在實時播放中阻止該行的最有效方法是什么?
這個需求的核心是實現滾動效果。 你可以參考這段代碼。 當然JavaScript上有專門的組件可以設置時間線。 你的問題可以加JavaScript標簽,讓前端工程師幫你解決
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Javascript</title>
<style type="text/css">
*{margin:0;padding:0;}
.box{
width:500px;
height:350px;
margin:100px auto;
border:1px solid #000;
border-radius:20px;
box-shadow:5px 5px 10px #333;
overflow:hidden;
}
h3{
height:50px;
line-height:50px;
text-align:center;
font-size:28px;
color:#fff;
background:green;
}
.content{
height:300px;
overflow:hidden;
}
ul li{
list-style:none;
height:40px;
line-height:40px;
text-align:left;
padding-left:20px;
font-size:18px;
color:#333;
}
li:hover{color:#f91;}
</style>
</head>
<body>
<div class="box">
<h3>datalist</h3>
<div class="content" id="content">
<ul class="msg1" id="msg1">
<li></li>
<li>pandas data1</li>
<li>pandas data2</li>
<li>pandas data3</li>
<li>pandas data4</li>
<li>pandas data5</li>
<li>pandas data6</li>
<li>pandas data7</li>
<li>pandas data8</li>
<li>pandas data9</li>
<li>pandas data10</li>
</ul>
<ul id="msg2"></ul>
</div>
</div>
<script>
var content=document.getElementById("content");
var msg1=document.getElementById("msg1");
var msg2=document.getElementById("msg2");
msg2.innerHTML=msg1.innerHTML;
var timer=1;
content.scrollTop=0;
function myScrollTop(){
if(content.scrollTop>content.scrollHeight){
content.scrollTop=0;
}else{
content.scrollTop++
}
}
upScroll = setInterval('myScrollTop()',timer);
content.onmouseover=function(){
clearInterval(upScroll);
};
content.onmouseout=function(){
upScroll = setInterval('myScrollTop()',timer);
};
</script>
</body>
</html>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.