ApexCharts数据刷新实现：如何使用updateSeries更新最新数据？

问题描述 #

我有一个ApexCharts图表，需要实现用户按需刷新并切换为最新数据，但不清楚如何在ApexCharts中重新加载数据。我了解到可以使用chart.updateSeries()方法，但不知道具体用法，以下是我的代码：

var options = {
    series: [{
        name: 'Stock Value',
        type: 'column',
        data: val_data_1
    }, {
        name: 'Actual Value',
        type: 'column',
        data: val_data_2
    }, {
        name: 'difference',
        type: 'line',
        data: val_data_3
    }],
    chart: {
        height: 350,
        type: 'line',
        stacked: false
    },
    dataLabels: {
        enabled: false
    },
    stroke: {
        width: [1, 1, 4]
    },
    title: {
        text: 'XYZ - Stock Opname',
        align: 'left',
        offsetX: 110
    },
    xaxis: {
        categories: categories,
    },
    yaxis: [
        {
            axisTicks: {
                show: true,
            },
            axisBorder: {
                show: true,
                color: '#008FFB'
            },
            labels: {
                style: {
                    colors: '#008FFB',
                }
            },
            title: {
                text: "Stock Value",
                style: {
                    color: '#008FFB',
                }
            },
            tooltip: {
                enabled: true
            }
        },
        {
            seriesName: 'Income',
            opposite: true,
            axisTicks: {
                show: true,
            },
            axisBorder: {
                show: true,
                color: '#00E396'
            },
            labels: {
                style: {
                    colors: '#00E396',
                }
            },
            title: {
                text: "Actual Value",
                style: {
                    color: '#00E396',
                }
            },
        },
        {
            seriesName: 'Revenue',
            opposite: true,
            axisTicks: {
                show: true,
            },
            axisBorder: {
                show: true,
                color: '#FEB019'
            },
            labels: {
                style: {
                    colors: '#FEB019',
                },
            },
            title: {
                text: "Differences",
                style: {
                    color: '#FEB019',
                }
            }
        },
    ],
    tooltip: {
        fixed: {
            enabled: true,
            position: 'topLeft', // topRight, topLeft, bottomRight, bottomLeft
            offsetY: 30,
            offsetX: 60
        },
    },
    legend: {
        horizontalAlign: 'left',
        offsetX: 40
    }
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

解决方案 #

核心逻辑：updateSeries()方法用法 #

updateSeries()是ApexCharts官方提供的系列数据更新方法，它接受两个参数：

• 第一参数：新的系列数据数组（结构必须和初始series完全匹配，包括name、type、data字段）
• 第二参数：可选配置对象，用于控制更新时的动画效果（默认开启动画）

步骤1：定义获取最新数据的逻辑 #

先实现一个获取最新数据的函数（实际场景替换为接口请求或本地数据更新逻辑）：

// 模拟获取最新数据的函数，实际项目中替换为接口请求
function getLatestData() {
    // 生成随机新数据，替换成你的实际数据生成/获取逻辑
    const newStockData = Array(7).fill().map(() => Math.floor(Math.random() * 100));
    const newActualData = Array(7).fill().map(() => Math.floor(Math.random() * 80));
    const newDiffData = newStockData.map((val, index) => val - newActualData[index]);

    // 返回和初始series结构一致的数组
    return [
        { name: 'Stock Value', type: 'column', data: newStockData },
        { name: 'Actual Value', type: 'column', data: newActualData },
        { name: 'difference', type: 'line', data: newDiffData }
    ];
}

步骤2：添加刷新按钮并绑定事件 #

在HTML中添加一个触发刷新的按钮，然后绑定点击事件调用updateSeries()：

<!-- 添加刷新按钮 -->
<button id="refreshChartBtn">刷新最新数据</button>
<div id="chart"></div>

// 绑定按钮点击事件
document.getElementById('refreshChartBtn').addEventListener('click', () => {
    const newSeriesData = getLatestData();
    // 更新图表数据，开启过渡动画
    chart.updateSeries(newSeriesData, {
        animate: true,
        animationDuration: 500 // 动画时长，单位毫秒
    });
});

额外：更新X轴分类（如果需要） #

如果刷新时X轴的分类标签也需要同步更新，使用chart.updateOptions()方法：

// 在刷新事件中添加X轴更新逻辑
const newCategories = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
chart.updateOptions({
    xaxis: {
        categories: newCategories
    }
});

完整整合代码 #

把所有逻辑整合后的完整代码示例：

<button id="refreshChartBtn">刷新最新数据</button>
<div id="chart"></div>

<script>
// 初始数据（替换为你的实际初始数据）
const val_data_1 = [30, 40, 35, 50, 49, 60, 70];
const val_data_2 = [20, 30, 25, 40, 39, 50, 60];
const val_data_3 = val_data_1.map((val, i) => val - val_data_2[i]);
const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'];

var options = {
    series: [{
        name: 'Stock Value',
        type: 'column',
        data: val_data_1
    }, {
        name: 'Actual Value',
        type: 'column',
        data: val_data_2
    }, {
        name: 'difference',
        type: 'line',
        data: val_data_3
    }],
    chart: {
        height: 350,
        type: 'line',
        stacked: false
    },
    dataLabels: {
        enabled: false
    },
    stroke: {
        width: [1, 1, 4]
    },
    title: {
        text: 'XYZ - Stock Opname',
        align: 'left',
        offsetX: 110
    },
    xaxis: {
        categories: categories,
    },
    yaxis: [
        {
            axisTicks: {
                show: true,
            },
            axisBorder: {
                show: true,
                color: '#008FFB'
            },
            labels: {
                style: {
                    colors: '#008FFB',
                }
            },
            title: {
                text: "Stock Value",
                style: {
                    color: '#008FFB',
                }
            },
            tooltip: {
                enabled: true
            }
        },
        {
            seriesName: 'Income',
            opposite: true,
            axisTicks: {
                show: true,
            },
            axisBorder: {
                show: true,
                color: '#00E396'
            },
            labels: {
                style: {
                    colors: '#00E396',
                }
            },
            title: {
                text: "Actual Value",
                style: {
                    color: '#00E396',
                }
            },
        },
        {
            seriesName: 'Revenue',
            opposite: true,
            axisTicks: {
                show: true,
            },
            axisBorder: {
                show: true,
                color: '#FEB019'
            },
            labels: {
                style: {
                    colors: '#FEB019',
                },
            },
            title: {
                text: "Differences",
                style: {
                    color: '#FEB019',
                }
            }
        },
    ],
    tooltip: {
        fixed: {
            enabled: true,
            position: 'topLeft',
            offsetY: 30,
            offsetX: 60
        },
    },
    legend: {
        horizontalAlign: 'left',
        offsetX: 40
    }
};

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

// 模拟获取最新数据的函数
function getLatestData() {
    const newStockData = Array(7).fill().map(() => Math.floor(Math.random() * 100));
    const newActualData = Array(7).fill().map(() => Math.floor(Math.random() * 80));
    const newDiffData = newStockData.map((val, index) => val - newActualData[index]);

    return [
        { name: 'Stock Value', type: 'column', data: newStockData },
        { name: 'Actual Value', type: 'column', data: newActualData },
        { name: 'difference', type: 'line', data: newDiffData }
    ];
}

// 绑定刷新按钮事件
document.getElementById('refreshChartBtn').addEventListener('click', () => {
    const newSeriesData = getLatestData();
    chart.updateSeries(newSeriesData, {
        animate: true,
        animationDuration: 500
    });

    // 可选：更新X轴分类
    // const newCategories = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
    // chart.updateOptions({ xaxis: { categories: newCategories } });
});
</script>

内容的提问来源于stack exchange，提问作者Indra suandi