Apex Charts如何动态迭代后端代币数据并过滤空数据？

核心解决方案 #

通过遍历后端返回的代币对象，配合过滤逻辑自动生成符合Apex Charts要求的series数组，同时剔除无有效数据的代币，彻底解决硬编码维护困难和空系列显示的问题。

实现代码 #

// 从props中提取后端返回的代币数据集
const tokenData = props.portfolioGrowthData.data.chart_tokens_data;

// 动态生成series并过滤无效数据
const series = Object.values(tokenData)
  // 过滤掉数据全为0的代币（可根据需求调整规则）
  .filter(token => {
    return token.data.some(item => Number(item) !== 0);
  })
  // 转换为Apex Charts需要的格式，同时统一数据类型
  .map(token => ({
    name: token.name,
    data: token.data.map(item => Number(item))
  }));

代码细节说明 #

1. 遍历对象：使用Object.values()将后端返回的键值对对象转为数组，无需硬编码代币名称（如ADA/MATIC），新增代币时自动适配
2. 过滤空代币：filter方法保留数据中至少存在一个非0值的代币，避免全0系列占用图表空间
3. 数据类型统一：Number(item)将混合字符串/数字格式的数值转为纯数字，确保Apex Charts渲染正常
4. 低维护成本：后续新增或删除代币时，无需修改series配置代码

自定义过滤规则示例 #

如果需要更严格的过滤（比如剔除数据全为空字符串或长度为0的代币），可以修改filter条件：

.filter(token => {
  // 保留存在有效非空、非0数据的代币
  const validItems = token.data.filter(item => item !== "" && Number(item) !== 0);
  return validItems.length > 0;
})

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