Highcharts图表实战案例｜开发每秒更新的曲线图实战案例：创建一个实时动态刷新的平滑折线图效果：每秒自动新增

实战案例：

创建一个 实时动态刷新的平滑折线图 效果：每秒自动新增一个数据点，自动滚动、自动丢弃旧数据，永远保持最新 20 个点

核心功能

✅ 每秒自动刷新一次 ✅ 带脉冲扩散动画（新增点时扩散圆圈） ✅ 时间轴自动滚动 ✅ 本地时间显示 ✅ 鼠标悬浮可查看精确时间与数值 ✅ 平滑曲线，美观流畅

THML代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实时动态数据图表 - Highcharts</title>
    <!-- 引入 Highcharts -->
    <script src="https://cdn.jsdelivr.net/npm/highcharts@10.3.3/highcharts.js"></script>

    <style>
        #container {
            width: 100%;
            height: 80vh;
            margin: 0 auto;
        }
    </style>
</head>
<body>

<div id="container"></div>

<script>
// 图表加载完成后，启动定时器，每秒添加一个新数据点
const onChartLoad = function () {
    const chart = this,
        series = chart.series[0];

    setInterval(function () {
        const x = (new Date()).getTime(); // 当前时间
        const y = Math.random();          // 随机数值

        // 添加新点，自动更新图表
        series.addPoint([x, y], true, true);
    }, 1000);
};

// 初始化前20个历史数据
const data = (function () {
    const data = [];
    const time = new Date().getTime();

    for (let i = -19; i <= 0; i += 1) {
        data.push({
            x: time + i * 1000,
            y: Math.random()
        });
    }
    return data;
}());

// 插件：新增数据点时显示脉冲扩散动画
Highcharts.addEvent(Highcharts.Series, 'addPoint', e => {
    const point = e.point;
    const series = e.target;

    if (!series.pulse) {
        series.pulse = series.chart.renderer.circle().add(series.markerGroup);
    }

    setTimeout(() => {
        series.pulse
            .attr({
                x: series.xAxis.toPixels(point.x, true),
                y: series.yAxis.toPixels(point.y, true),
                r: series.options.marker.radius,
                opacity: 1,
                fill: series.color
            })
            .animate({
                r: 20,     // 扩散半径
                opacity: 0 // 逐渐消失
            }, {
                duration: 1000
            });
    }, 1);
});

// 渲染图表
Highcharts.chart('container', {
    chart: {
        type: 'spline', // 平滑折线图
        events: {
            load: onChartLoad // 加载后启动动态刷新
        }
    },

    time: {
        useUTC: false // 使用本地时间
    },

    // 标题
    title: {
        text: '实时动态随机数据图表'
    },

    // 无障碍新数据提示
    accessibility: {
        announceNewData: {
            enabled: true
        }
    },

    // X轴：时间轴
    xAxis: {
        type: 'datetime',
        title: {
            text: '时间'
        },
        tickPixelInterval: 150
    },

    // Y轴
    yAxis: {
        title: {
            text: '数值'
        },
        plotLines: [
            {
                value: 0,
                width: 1,
                color: '#808080'
            }
        ]
    },

    // 鼠标悬浮提示框
    tooltip: {
        headerFormat: '<b>{series.name}</b><br/>',
        pointFormat: '{point.x:%Y-%m-%d %H:%M:%S}<br/>数值：{point.y:.2f}'
    },

    // 隐藏图例、导出按钮
    legend: {
        enabled: false
    },
    exporting: {
        enabled: false
    },

    // 数据系列
    series: [
        {
            name: '随机数据',
            lineWidth: 2,
            color: Highcharts.getOptions().colors[2],
            data: data
        }
    ]
});
</script>

</body>
</html>

核心功能说明

(1) 初始化数据

生成最近 20 秒的历史随机数据，让图表打开就有内容。

(2) 定时器刷新

setInterval(..., 1000) 每 1 秒生成一个新的随机数 + 当前时间，添加到图表。

(3) 自动滚动

series.addPoint([x,y], true, true) 第 3 个参数 true = 自动移除最早的点，保持长度不变，实现滚动效果

(4) 脉冲动画插件

新增点时，自动画一个扩散并消失的圆形光圈，视觉效果极强，适合监控大屏。

4. 适用场景

实时监控大屏
传感器数据展示
服务器状态监控
随机数据模拟
物联网数据实时展示

✅ 使用方法

复制全部代码
新建文件 → 粘贴 → 保存为 chart.html
双击打开 即可看到动态图表！