当前位置：首页 > JavaScript

js 实现心率图

2026-02-03 02:53:01JavaScript

实现心率图的方法

在JavaScript中实现心率图，可以使用Canvas或SVG进行绘制，也可以借助现成的图表库如Chart.js、D3.js等。以下是几种常见的方法：

使用Canvas绘制基础心率图

通过HTML5 Canvas API可以手动绘制心率波形。以下是一个简单的示例代码：

const canvas = document.getElementById('heartRateCanvas');
const ctx = canvas.getContext('2d');

function drawHeartRate(data) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.strokeStyle = 'red';
    ctx.lineWidth = 2;

    data.forEach((value, index) => {
        const x = index * (canvas.width / data.length);
        const y = canvas.height - (value * canvas.height / 100);
        if (index === 0) {
            ctx.moveTo(x, y);
        } else {
            ctx.lineTo(x, y);
        }
    });

    ctx.stroke();
}

// 示例数据（模拟心率值）
const heartRateData = [60, 65, 70, 75, 80, 85, 90, 85, 80, 75, 70, 65, 60];
drawHeartRate(heartRateData);

使用Chart.js绘制动态心率图

Chart.js是一个流行的图表库，适合快速实现动态心率图。以下是一个示例：

const ctx = document.getElementById('heartRateChart').getContext('2d');
const chart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: Array.from({ length: 20 }, (_, i) => i + 1),
        datasets: [{
            label: '心率 (BPM)',
            data: [],
            borderColor: 'red',
            tension: 0.1
        }]
    },
    options: {
        responsive: true,
        scales: {
            y: {
                min: 50,
                max: 120
            }
        }
    }
});

// 模拟动态更新数据
setInterval(() => {
    const newData = Math.floor(Math.random() * 30) + 70;
    chart.data.datasets[0].data.push(newData);
    if (chart.data.datasets[0].data.length > 20) {
        chart.data.datasets[0].data.shift();
    }
    chart.update();
}, 1000);

使用D3.js实现高级心率可视化

D3.js适合需要高度自定义的场景。以下是一个简单的D3示例：

js 实现心率图

const data = Array.from({ length: 50 }, () => Math.floor(Math.random() * 30) + 70);
const svg = d3.select('#heartRateSvg')
    .attr('width', 600)
    .attr('height', 300);

const xScale = d3.scaleLinear()
    .domain([0, data.length - 1])
    .range([0, 600]);

const yScale = d3.scaleLinear()
    .domain([50, 120])
    .range([250, 50]);

const line = d3.line()
    .x((d, i) => xScale(i))
    .y(d => yScale(d));

svg.append('path')
    .datum(data)
    .attr('fill', 'none')
    .attr('stroke', 'red')
    .attr('stroke-width', 2)
    .attr('d', line);