Javascript 使用python和flask实时更新心电图图_Javascript_Python_Html_Chart.js

Javascript 使用python和flask实时更新心电图图

javascript python html chart.js

Javascript 使用python和flask实时更新心电图图,javascript,python,html,chart.js,Javascript,Python,Html,Chart.js,我制作了一个简单的python flask应用程序，用于与用于培训应急服务的培训模拟器交互。在这个应用程序中，我想显示ECG波形和生命体征。我能够使用chartjs实现这一点，但是它非常慢，因此不适合我的需要。我创建了一个线程类，它使用flask socketio定期将波形数据点提供给我的javascript。在socketio事件中，调用一个javascript函数来更新图表。我对所有这些技术都是新手，我想知道我是否在线程方面做错了什么，或者误用了socketio，或者可能是chartjs或f

我制作了一个简单的python flask应用程序，用于与用于培训应急服务的培训模拟器交互。在这个应用程序中，我想显示ECG波形和生命体征。我能够使用chartjs实现这一点，但是它非常慢，因此不适合我的需要。我创建了一个线程类，它使用flask socketio定期将波形数据点提供给我的javascript。在socketio事件中，调用一个javascript函数来更新图表。我对所有这些技术都是新手，我想知道我是否在线程方面做错了什么，或者误用了socketio，或者可能是chartjs或flask，这些都不是我应该用来实现目标的。请告诉我如何提高图表更新的性能，以便我可以在我的浏览器应用程序上显示典型的ECG波形，就像您在医院的ECG机器上看到的那样

app9.py（主要应用）：

main9.js（用于处理ecg图表的javascript）：

index9.html（html）：


{{title}}

我无法使用chart.js获得所需的结果，但我找到了一种创建实时流式心电图图的两种方法

1.）smoothiecharts——制作实时流媒体图表非常简单，但没有达到预期效果所需的可定制性

2.）-我发现有人在博客中没有使用任何图表库就制作了实时ecg，相反，他们编写了自己的构造函数，使用requestAnimationFrame（）来制作实时图形。这是我用过的。现在我只需要学习如何改变心率，哈哈。

有惊人的api。你所需要做的就是在下一个节拍出现时运行回调

document.body.innerHTML += '<ecg-line></ecg-line>';
ecgLine((bang) => setInterval(() => bang(), 1000));

document.body.innerHTML+=''；
ecgLine（（bang）=>setInterval（（）=>bang（），1000））；

// function to add data to a chart
function addData(chart, label, data){
    chart.data.labels.push(label);
    chart.data.datasets.forEach((dataset) => {
    dataset.data.push(data);
    });
    chart.update();
}

// function to remove data to a chart
function removeData(chart){
    chart.data.labels.pop();
    chart.data.datasets.forEach((dataset) => {
        dataset.data.pop();
    });
    chart.update()
}


// ECG Chart
var ecgChart = document.getElementById("ecgChart");

    var ecgChart = new Chart(ecgChart, {
        type: 'line',
        data: {
            labels:["1","2","3","4","5","6","7","8","9","10"],
            datasets: [
            {
                label: "My First Dataset",
                fill: false,
                lineTension: 0.1,
                backgroundColor: "rgba(75,192,192,0.4)",
                borderColor: "rgba(75,192,192,1)",
                borderCapStyle: 'butt',
                borderDash: [],
                borderDashOffset: 0.0,
                borderJoinStyle: 'miter',
                pointBorderColor: "rgba(75,192,192,1)",
                pointBackgroundColor: "#fff",
                pointBorderWidth: 1,
                pointHoverRadius: 5,
                pointHoverBackgroundColor: "rgba(75,192,192,1)",
                pointHoverBorderColor: "rgba(220,220,220,1)",
                pointBorderWidth: 2,
                pointRadius: 1,
                pointHitRadius: 10,
                data: [0.18817680007769047, 0.527201188931723, 
                       0.6884590394536007, 0.2811723436605783, 
                      -0.24984642432731163, -0.19594627437737416, 
                       0.1273693403357969, 0.09305736460357118, 
                      -0.0713941471663973,-0.02945753682187802]
            }]
        }
    });

// connect to the socket server.
var socket = io.connect('http://' + document.domain + ':' + 
location.port);

// receive details from server
socket.on('ecg-update', function(msg) {
    number = msg.data
    console.log(msg.data);
    addData(ecgChart,'new data', msg.data);
    removeData(ecgChart);
});

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>{{ title }}</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-
        scale=1">
        <script src="http://code.jquery.com/jquery-2.1.1.min.js">
        </script>
        <link rel="stylesheet" href="/static/normalize.css">
        <link rel="stylesheet" href="/static/main.css">

        <script type="text/javascript" 
        src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js">
        </script>
        <script type="text/javascript" 
src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.6/socket.io.min.js">
        </script>
        <script type="text/javascript" src="{{ url_for('static', 
filename='modernizr-3.6.0.min.js') }}"></script>

    </head>
    <body>
        <canvas id="ecgChart" width="600" height="400"></canvas>
        <script type="text/javascript" src="{{ url_for('static', filename='main9.js') }}"></script>
    </body>
</html>

document.body.innerHTML += '<ecg-line></ecg-line>';
ecgLine((bang) => setInterval(() => bang(), 1000));