簡體   English   中英

從帶有日期時間列的 pandas 數據框中實時“回放”數據?

[英]“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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM