Javascript 在HTML页面中绘制心电图图

在我的项目中，我需要在网页上绘制心电图图

我的场景如下：我有一个ECG设备通过蓝牙连接到手机。 通过在Android上使用该设备和相关SDK，我可以使用设备发送的数据在手机上绘制图表

在移动设备上，可以很好地绘制心波图（使用Android设备SDK）

到目前为止还不错

一般来说，心电图图就是这样的图

在服务器端，我能够接收设备发送的数据，并使用chartjs（版本2.9.3）绘制图表

我的结果是：

正如你所看到的，这不是一个清晰的心电图图（我们不要把重点放在网格上，我需要改变它们并使用图像作为背景，因为在真实的心电图图中，网格有x轴和y轴，单位为毫米）

通过阅读这张图，医生会认为基本上这是一张不真实的颤动心脏图。我无法正确显示PQRST波形

我做了以下假设：

• 在X轴上，我将输入时间（但我不确定这是否正确..）
• 在Y轴上，我将把ECG设备测得的心脏电压放进去，这些测量值是正确的

这是我写的代码：

var chartColors = {
    red: 'rgb(255, 0, 0)',
    orange: 'rgb(255, 159, 64)',
    yellow: 'rgb(255, 205, 86)',
    green: 'rgb(75, 192, 192)',
    blue: 'rgb(54, 162, 235)',
    purple: 'rgb(153, 102, 255)',
    grey: 'rgb(201, 203, 207)',
    black:'rgb(0, 0, 0)'
};
var color = Chart.helpers.color;
var config = {
    type: 'line',
    data: {
        //labels: [],
        datasets:
            [{
                backgroundColor: color(chartColors.red).alpha(0.5).rgbString(),
                borderColor: chartColors.black,
                fill: false,
                cubicInterpolationMode: 'monotone',
                data: []
            }]
    },
    options: {
        responsive: true,
        legend: {
            display: false
        },
        title: {
            display: false,
            text: ''
        },

        elements: {
            point:{
                radius: 0
            }
        },
        scales: {
            xAxes:
            [{
                ticks: {

                    display: false, //this will remove only the label

        },
                gridLines: {
                    color: "rgb(247, 174, 210)"
                           //color: "rgba(0, 0, 0, 0)"
                },
                type: 'time',
                time:
                {
                    unit: 'seconds',
                    unitStepSize: '1'
                }
            }],
            yAxes: [{
                gridLines: {
                    color: "rgb(247, 174, 210)"
                    //color: "rgba(0, 0, 0, 0)"
                },
                 ticks: {
                    /*max: 500,
                    min: 0,*/
                    stepSize:1,
                            display: false //this will remove only the label
                 }
            }]
        },
        tooltips: false,
        hover:false
    }
};
var context = $("#"+idEcg)[0].getContext('2d');
var ecgDiagram = new Chart(context, config);

var ecgDataFromServer = ..... //recover data from ecgDataFromServer.
//Note Every point has the following properties:
//tempo: it's the time when mobile device receives the measurement
//tensione: it's the heart electric voltage measured
for( var t = 0; t < ecgDataFromServer.length; t++ ){
var ecgDataPoint = ecgDataFromServer[t];
chart.config.data.datasets[0].data.push({
  x: new Date(ecgDataPoint.tempo),
  y: ecgDataPoint.tensione
});
}
chart.update({
  preservation: true
});

var chartColors={
红色：“rgb（255,0,0）”，
橙色：“rgb（25515964）”，
黄色：“rgb（25520586）”，
绿色：“rgb（75192192）”，
蓝色：“rgb（54162235）”，
紫色：“rgb（153102255）”，
灰色：“rgb（201203207）”，
黑色：'rgb（0,0,0）'
};
var color=Chart.helpers.color；
变量配置={
键入：“行”，
数据：{
//标签：[]，
数据集：
[{
背景颜色：颜色（chartColors.red）.alpha（0.5）.rgbString（），
边框颜色：ChartColor.black，
填充：假，
CubicinInterpolationMode:“单调”，
数据：[]
}]
},
选项：{
回答：是的，
图例：{
显示：假
},
标题：{
显示：假，
文本：“”
},
要素：{
要点：{
半径：0
}
},
比例：{
xAxes：
[{
滴答声：{
display:false，//这将仅删除标签
},
网格线：{
颜色：“rgb（247174210）”
//颜色：“rgba（0,0,0,0）”
},
键入：“时间”，
时间：
{
单位：秒，
单位步长：“1”
}
}],
雅克斯：[{
网格线：{
颜色：“rgb（247174210）”
//颜色：“rgba（0,0,0,0）”
},
滴答声：{
/*最高：500，
分:0,*/
步长：1，
display:false//这将仅删除标签
}
}]
},
工具提示：false，
悬停：错误
}
};
var context=$（“#”+idEcg）[0].getContext（'2d'）；
var ecgDiagram=新图表（上下文、配置）；
var ecgDataFromServer=//从ecgDataFromServer恢复数据。
//注意：每个点都具有以下特性：
//节拍：移动设备接收测量值的时间
//张力：是测量的心脏电压
for（var t=0；t

我在这张图上呆了好几天了，我想不出我怎样才能像我所希望的那样表现出来

我找不到一些公式，最终允许我做一个好的数据插值

现在我正在评估使用d3.js作为库（但我对它非常陌生，需要学习它；这也是我放置d3.js标记的原因）

我还可以使用一些服务器端策略（在java、matalab、R或任何其他语言中）来生成图的PNG o JPG图像并表示它

有人能告诉我我需要的东西是否可行吗

我怎样才能像我展示的ecgDiagram那样绘制我的图表

多谢各位

---

Angelo

关于D3，答案（“可行吗？”）取决于数据，更具体地说取决于数据的质量和结构。无论是SVG还是canvas，D3都将创建插入数据点的路径。对于QRS波群来说，这不是一个问题（无论如何，它们几乎都是直线），但是对于P波和T波（以及P-R/s-T段），这肯定是一个问题。另外，通过快速查看您的图像，我认为您必须拉伸x轴。@GerardoFurtado感谢您的回答。我考虑d3是因为我看到了这个例子，但我需要深入研究它和框架；糟糕的是，我不能为P和T凹凸找到正确的算法。。。它们看起来像正弦曲线，但我无法正确绘制它们