WebSocket在医学领域实时数据获取与波形图绘制方案?

有没有前端大佬,做过医学这方面的业务,需要通过websocket获取数据,然后绘制那种实时温度的波形图,和那个心电图因该有些类似吧,网上找了很多案例但是都感觉不太行!!!

快急死了哈哈哈
类似这样的

阅读 1.6k
3 个回答
<!DOCTYPE html>
<html>
  <head>
    <script
      type="text/javascript"
      src="https://canvasjs.com/assets/script/canvasjs.min.js"
    ></script>
  </head>
  <body>
    <div id="chartContainer" style="height: 300px; width: 100%"></div>
    <script type="text/javascript">
      window.onload = function () {
        var dps = []; // dataPoints
        var chart = new CanvasJS.Chart('chartContainer', {
          title: {
            text: 'Live ECG Data',
          },
          data: [
            {
              type: 'line',
              dataPoints: dps,
            },
          ],
        });

        var xVal = 0;
        var yVal = 100;
        var updateInterval = 1000; // 更新间隔,单位毫秒
        var dataLength = 20; // 一次显示的数据点数量

        var updateChart = function (count) {
          count = count || 1;
          for (var j = 0; j < count; j++) {
            yVal = yVal + Math.round(5 + Math.random() * (-5 - 5)); // 模拟心电数据的变化
            dps.push({
              x: xVal,
              y: yVal,
            });
            xVal++;
          }
          if (dps.length > dataLength) {
            dps.shift();
          }
          chart.render();
        };

        updateChart(dataLength); // 初始化图表
        setInterval(function () {
          updateChart();
        }, updateInterval); // 定时更新图表
      };
    </script>
  </body>
</html>

image.png
image.png

新手上路,请多包涵
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题