Javascript 创建心率监视器

我一直在尝试用chart.js创建一个心率监视器，但对于如何表示该图，我存在分歧

我想按照本演示的思路构建一些东西：

chart.js中的图表如下所示：

var data = {
    labels: ["Heart Rate Monitor"],
    datasets: [
        {
            label: "heart rate",
            data: [65, 59, 80, 81, 56, 55, 40]
        }
    ]
};

var myLineChart = new Chart(ctx).Line(data, {});

myLineChart.datasets[0].points[0].value = 50;

我们可以像这样更新数据：

var data = {
    labels: ["Heart Rate Monitor"],
    datasets: [
        {
            label: "heart rate",
            data: [65, 59, 80, 81, 56, 55, 40]
        }
    ]
};

var myLineChart = new Chart(ctx).Line(data, {});

myLineChart.datasets[0].points[0].value = 50;

这会将数组中的第一个值65设置为50

因此，我尝试用类似于演示的值创建一个数组，并将第一个元素移动到最后一个，将数组中的其他元素向下移动（-1），并用值填充图表。这在一定程度上是可行的，但我无法改变值的速度，这是我需要做的

---

建议？

心电图是一段时间内心脏电活动的图表。这不是你的心率（然而心电图可以显示你的心率，因为它显示随着时间的推移，在某些点上的电活动增加，从而得出平均心率）

---

因此，我认为你甚至不可能使用心率来生成类似EKG的图形。

你可以使用2个系列，只需交换点即可。您可能需要在点之间插值以平滑动画

我使用过线性插值，但对于更平滑的曲线，你可能会使用其他方法，但我相信如果你有实际数据，线性插值会很好

function getActualData() {
    var actualData = []
    for (var m = 0; m < 20; m++)
        actualData.push(45 + parseInt(Math.random() * 35))
    return actualData;
}


var ANIMATIONSTEPS = 200;

var myLineChart;
var labels;
var animationStep;
setInterval(function () {
    if (myLineChart === undefined) {
        var actualData = getActualData();

        // if we have only a few data points interpolate to fill out enough points to make the animation smooth
        var interpolationSteps = Math.ceil(ANIMATIONSTEPS / actualData.length);
        labels = []
        var data = []
        var blankData = []
        for (var i = 0; i < (actualData.length - 1); i++) {
            labels.push('')
            data.push(actualData[i])
            blankData.push(null)

            // push interpolation
            var difference = actualData[i + 1] - actualData[i];
            var interpolationStep = 1 / interpolationSteps;
            for (var j = 1; j < interpolationSteps; j++) {
                labels.push('')
                data.push(actualData[i] + difference * Chart.helpers.easingEffects["linear"](j * interpolationStep));
                blankData.push(null)
            }
        }
        labels.push('')
        data.push(actualData[i])
        blankData.push(null)

        var data = {
            labels: labels,
            datasets: [
                {
                    strokeColor: "rgba(243, 118, 27, 1)",
                    data: blankData
                },
                {
                    strokeColor: "transparent",
                    data: data
                }
            ]
        };

        var ctx = document.getElementById("myChart").getContext("2d");
        myLineChart = new Chart(ctx).Line(data, {
            animation: false,
            datasetFill: false,
            pointDot: false,
            datasetStrokeWidth: 5,
            showTooltips: false,
            scaleOverride: true,
            scaleSteps: 12,
            scaleStepWidth: 5,
            scaleStartValue: 30,
            scaleShowVerticalLines: false,
            scaleShowLabels: false,
        });

        animationStep = 0;
    }

    // the actual animation
    myLineChart.datasets[0].points[animationStep].value = myLineChart.datasets[1].points[animationStep].value
    myLineChart.update();
    animationStep++;

    // start new cycle
    if (animationStep >= labels.length) {
        myLineChart.destroy();
        myLineChart = undefined;
    }
}, 10)

函数getActualData（）{ var actualData=[] 对于（var m=0；m<20；m++） actualData.push（45+parseInt（Math.random（）*35）） 返回实际数据； } var ANIMATIONSTEPS=200； var线性图； var标签； var动画步骤； setInterval（函数（）{ 如果（myLineChart==未定义）{ var actualData=getActualData（）； //如果只有几个数据点，则进行插值以填充足够的点以使动画平滑 var interpolationSteps=Math.ceil（ANIMATIONSTEPS/actualData.length）； 标签=[] var数据=[] var blankData=[] 对于（变量i=0；i<（actualData.length-1）；i++）{ 标签。推送（“”） 数据推送（实际数据[i]） blankData.push（空） //推插值 var差异=实际数据[i+1]-实际数据[i]； var插值步长=1/插值步长； 对于（var j=1；j=labels.length）{ myLineChart.destroy（）； myLineChart=未定义； } }, 10)

---

---

Fiddle-

是的，这是为了模拟，不是为了任何实际的东西，所以我只想重新创建演示。这里没有考虑到现实生活的各个方面。啊，那么最好的方法就是使用画布（不要使用ChartJS）。您可以使用带有EKG图形的SVG，并使用TweenMax或任何其他SVG操纵库来控制路径动画。