基于含非固定阶段JSON数据的Apexcharts多折线图实现咨询

核心处理逻辑是将你当前的「单条数据对应单个日期单个阶段」的长表结构，转换为Apexcharts多系列折线图要求的「每个系列对应一组和X轴日期顺序匹配的数值」结构，具体实现步骤如下：

• 提取所有唯一的日期值，排序后作为X轴的categories数据源
• 提取所有唯一的阶段值（Start、Running、Complete）作为折线系列的名称
• 为每个阶段初始化数值数组，长度和日期数组一致，默认填充null（Apexcharts会自动跳过空值，不会在折线中产生突兀断点）
• 遍历原始JSON数据，匹配每条数据对应的日期索引、阶段索引，将Total值填入对应阶段数组的对应位置，缺失的阶段数据保持null即可
• 将处理完成的series数组和日期数组传入Apexcharts配置，图表类型设为line即可渲染多折线图

核心数据转换代码示例 #

// 原始接口返回的JSON数据
const rawData = [/* 你获取到的原始JSON数组 */]

// 提取唯一日期并排序，作为X轴
const dateList = [...new Set(rawData.map(item => item.The_Date))].sort()
// 提取所有阶段作为系列名
const stageList = [...new Set(rawData.map(item => item.Stage))]

// 初始化多系列结构
const series = stageList.map(stageName => {
  return {
    name: stageName,
    data: new Array(dateList.length).fill(null)
  }
})

// 填充数据到对应位置
rawData.forEach(item => {
  const dateIndex = dateList.indexOf(item.The_Date)
  const stageIndex = stageList.indexOf(item.Stage)
  if (dateIndex >= 0 && stageIndex >= 0) {
    series[stageIndex].data[dateIndex] = item.Total
  }
})

// 最终将dateList传入xaxis.categories，series传入Apexcharts对应配置项即可

如果业务要求无数据的位置展示为0，将初始化时的null替换为0即可

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