在前端数据可视化场景中，实现图表数据的动态追加与实时更新是常见需求，比如实时监控系统、实时数据看板等场景都需要这类功能。ApexCharts作为一款轻量且功能全面的图表库，提供了完善的数据更新API，配合JavaScript可以高效实现上述需求。
核心实现思路
要实现数据的动态追加与实时更新，整体流程可以分为三步：首先初始化ApexCharts实例并配置基础图表参数，然后通过ApexCharts提供的更新方法追加新数据，最后结合定时器实现周期性的数据更新。
1. 基础环境准备
首先需要在项目中引入ApexCharts库，如果是原生项目可以直接通过CDN引入，在HTML中添加如下代码：
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
如果是模块化项目，可以通过npm安装后引入：
import ApexCharts from 'apexcharts'
2. 初始化图表配置
初始化图表时需要定义好图表类型、坐标轴配置、初始数据等参数，这里以折线图为例，初始数据为空或者包含少量初始值：
// 图表挂载的DOM容器ID
const chartDom = document.getElementById('chart')
// 初始数据，x轴为时间戳，y轴为随机数值
let initialData = []
// 生成初始的5条数据
for (let i = 0; i < 5; i++) {
initialData.push({
x: new Date(Date.now() - (5 - i) * 1000).getTime(),
y: Math.floor(Math.random() * 100)
})
}
// 图表配置项
const chartOptions = {
chart: {
type: 'line',
height: 350,
animations: {
enabled: true, // 开启更新动画
easing: 'linear',
dynamicAnimation: {
speed: 1000
}
}
},
series: [{
name: '实时数值',
data: initialData
}],
xaxis: {
type: 'datetime',
labels: {
datetimeUTC: false // 使用本地时间
}
},
yaxis: {
title: {
text: '数值'
}
},
title: {
text: '实时数据动态更新示例',
align: 'left'
}
}
// 创建图表实例
const chartInstance = new ApexCharts(chartDom, chartOptions)
// 渲染图表
chartInstance.render()
3. 实现数据动态追加
ApexCharts的实例提供了updateSeries方法，可以用来更新图表的数据序列，要实现动态追加，只需要在原有数据的基础上拼接新的数据项即可：
// 动态追加单条数据的方法
function appendData() {
// 获取当前序列数据
const currentSeries = chartInstance.w.config.series
// 生成新的数据点
const newDataPoint = {
x: new Date().getTime(),
y: Math.floor(Math.random() * 100)
}
// 复制原有数据并追加新数据
const updatedData = [...currentSeries[0].data, newDataPoint]
// 如果数据量超过20条，移除最早的一条数据，避免数据过多影响性能
if (updatedData.length > 20) {
updatedData.shift()
}
// 更新图表序列
chartInstance.updateSeries([{
name: '实时数值',
data: updatedData
}])
}
4. 实现定时实时更新
结合setInterval定时器，每隔固定时间调用一次追加数据的方法，就可以实现图表的实时更新效果：
// 每隔2秒追加一次新数据
const updateInterval = setInterval(() => {
appendData()
}, 2000)
// 如果需要停止更新，可以调用clearInterval(updateInterval)
完整示例代码
以下是完整的HTML示例，可以直接复制到本地文件运行查看效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ApexCharts动态更新示例</title>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
</head>
<body>
<div id="chart"></div>
<script>
const chartDom = document.getElementById('chart')
let initialData = []
for (let i = 0; i < 5; i++) {
initialData.push({
x: new Date(Date.now() - (5 - i) * 1000).getTime(),
y: Math.floor(Math.random() * 100)
})
}
const chartOptions = {
chart: {
type: 'line',
height: 350,
animations: {
enabled: true,
easing: 'linear',
dynamicAnimation: {
speed: 1000
}
}
},
series: [{
name: '实时数值',
data: initialData
}],
xaxis: {
type: 'datetime',
labels: {
datetimeUTC: false
}
},
yaxis: {
title: {
text: '数值'
}
},
title: {
text: '实时数据动态更新示例',
align: 'left'
}
}
const chartInstance = new ApexCharts(chartDom, chartOptions)
chartInstance.render()
function appendData() {
const currentSeries = chartInstance.w.config.series
const newDataPoint = {
x: new Date().getTime(),
y: Math.floor(Math.random() * 100)
}
const updatedData = [...currentSeries[0].data, newDataPoint]
if (updatedData.length > 20) {
updatedData.shift()
}
chartInstance.updateSeries([{
name: '实时数值',
data: updatedData
}])
}
const updateInterval = setInterval(() => {
appendData()
}, 2000)
</script>
</body>
</html>
注意事项
- 如果数据更新频率过高，建议关闭动画或者调整动画速度，避免页面卡顿
- 当数据量过大时，需要定期清理旧数据，避免内存占用过高
- 如果是在组件化框架中使用，需要在组件销毁时清除定时器，避免内存泄漏
JavaScriptApexCharts数据动态追加实时更新图表渲染修改时间：2026-07-18 16:06:36