ApexCharts自定义CSV格式数据求助：分类轴导出重复X轴数据

方案1：自定义CSV导出格式化函数 #

ApexCharts允许通过customFormatter完全控制CSV的生成逻辑，直接从X轴的categories数组中匹配对应索引的分类值，从根源避免重复。

const chart = new ApexCharts(document.querySelector("#chart"), {
  xaxis: {
    type: 'category',
    categories: Array.from({length:28}, (_,i) => `Day ${i+1}`) // 生成28天分类
  },
  series: [
    { name: '系列1', data: [...28个对应数据点...] },
    { name: '系列2', data: [...28个对应数据点...] }
  ],
  toolbar: {
    export: {
      csv: {
        customFormatter: (series, options) => {
          // 构造CSV表头
          const header = ['日期'].concat(series.map(s => s.name)).join(',');
          // 构造每行数据：X轴分类 + 对应各系列数值
          const rows = series[0].data.map((_, idx) => {
            const xVal = options.xaxis.categories[idx];
            const yVals = series.map(s => s.data[idx]);
            return [xVal].concat(yVals).join(',');
          });
          return [header, ...rows].join('\n');
        }
      }
    }
  }
});

chart.render();

方案2：预处理原始数据，确保分类唯一 #

如果重复X轴数据是因为原始数据源中存在同一分类对应多个数据点的情况，先对数据做去重/聚合处理，再传入图表。

// 示例原始数据（可能含重复分类）
const rawData = [
  { day: 'Day 1', val1: 12, val2: 8 },
  { day: 'Day 1', val1: 15, val2: 10 },
  { day: 'Day 2', val1: 20, val2: 14 },
  // ... 其他28天数据
];

// 按day聚合，保留最后一条数据（或按需取平均、求和）
const groupedData = rawData.reduce((acc, item) => {
  acc[item.day] = item;
  return acc;
}, {});

// 转换为图表所需格式
const categories = Object.keys(groupedData);
const series1Data = categories.map(day => groupedData[day].val1);
const series2Data = categories.map(day => groupedData[day].val2);

// 图表配置
const chart = new ApexCharts(document.querySelector("#chart"), {
  xaxis: {
    type: 'category',
    categories: categories
  },
  series: [
    { name: '系列1', data: series1Data },
    { name: '系列2', data: series2Data }
  ]
});

chart.render();

这两个方案都能在保持X轴为category类型的前提下，解决导出CSV时X轴数据重复的问题，同时满足仅显示28天的需求。

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