在数据可视化开发中，动态更新柱状图数据是常见需求，ApexCharts作为轻量且功能丰富的图表库，配合JavaScript可以高效实现这一功能。本文将一步步讲解完整的实现过程。
环境准备
首先需要在项目中引入ApexCharts库，可以通过CDN的方式直接引入，也可以下载本地文件后引入。这里采用CDN引入的方式，在HTML的<head>标签中添加如下代码：
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
基础柱状图初始化
先创建一个基础的柱状图实例，定义初始的数据和配置项。首先在HTML中准备一个用于放置图表的容器：
<div id="chart"></div>
然后编写JavaScript代码初始化图表，初始数据包含3个类别和对应的数值：
// 初始数据
let chartData = {
categories: ['一月', '二月', '三月'],
values: [120, 190, 300]
};
// 图表配置项
const chartOptions = {
chart: {
type: 'bar',
height: 350
},
series: [{
name: '销量',
data: chartData.values
}],
xaxis: {
categories: chartData.categories
},
title: {
text: '月度销量统计',
align: 'center'
}
};
// 初始化图表
const chart = new ApexCharts(document.querySelector("#chart"), chartOptions);
chart.render();
实现数据动态追加
动态追加数据的核心逻辑是修改图表的<code>series</code>和<code>xaxis.categories</code>配置，然后调用图表的更新方法。我们可以添加一个按钮，点击按钮时触发数据追加逻辑：
<button id="addDataBtn">追加新月份数据</button>
接下来编写数据追加的JavaScript逻辑，每次点击按钮时生成新的月份和随机销量数据，更新图表：
// 获取按钮元素
const addDataBtn = document.getElementById('addDataBtn');
// 月份计数器，用于生成新的月份名称
let monthCount = 3;
// 按钮点击事件处理
addDataBtn.addEventListener('click', function() {
// 生成新的月份名称
monthCount++;
const newMonth = `${monthCount}月`;
// 生成100到500之间的随机销量
const newSale = Math.floor(Math.random() * 401) + 100;
// 更新数据数组
chartData.categories.push(newMonth);
chartData.values.push(newSale);
// 更新图表配置
chart.updateOptions({
series: [{
name: '销量',
data: chartData.values
}],
xaxis: {
categories: chartData.categories
}
});
});
核心逻辑说明
整个实现过程的核心点主要有三个：
- 维护独立的数据数组，避免直接操作图表内部数据导致状态混乱
- 使用ApexCharts提供的<code>updateOptions</code>方法更新图表，该方法会保留原有配置只更新传入的新配置，性能更优
- 每次追加数据时同时更新x轴类别和对应的数值数组，保证数据对应关系正确
完整运行示例
将以上代码整合后，完整的HTML文件如下，可直接复制到本地运行查看效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态追加数据的柱状图</title>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
</head>
<body>
<div id="chart"></div>
<button id="addDataBtn">追加新月份数据</button>
<script>
// 初始数据
let chartData = {
categories: ['一月', '二月', '三月'],
values: [120, 190, 300]
};
// 图表配置项
const chartOptions = {
chart: {
type: 'bar',
height: 350
},
series: [{
name: '销量',
data: chartData.values
}],
xaxis: {
categories: chartData.categories
},
title: {
text: '月度销量统计',
align: 'center'
}
};
// 初始化图表
const chart = new ApexCharts(document.querySelector("#chart"), chartOptions);
chart.render();
// 获取按钮元素
const addDataBtn = document.getElementById('addDataBtn');
// 月份计数器
let monthCount = 3;
// 按钮点击事件处理
addDataBtn.addEventListener('click', function() {
monthCount++;
const newMonth = `${monthCount}月`;
const newSale = Math.floor(Math.random() * 401) + 100;
chartData.categories.push(newMonth);
chartData.values.push(newSale);
chart.updateOptions({
series: [{
name: '销量',
data: chartData.values
}],
xaxis: {
categories: chartData.categories
}
});
});
</script>
</body>
</html>
如果需要从接口获取动态数据，只需要将生成随机数据的部分替换为接口请求逻辑即可，整体实现思路保持一致。
JavaScriptApexCharts动态追加数据柱状图修改时间：2026-07-06 17:12:27