Apex Charts选择Datetime类型时Area Chart不显示数据

问题核心原因 #

你遇到的问题主要来自两个关键配置错误，导致面积图无法正确渲染路径，但柱状图对这些错误的容错性更高所以正常显示：

1. X轴类型与日期格式不匹配：当xaxis.type设为datetime时，ApexCharts要求传入的日期是毫秒时间戳或能被JS的Date.parse()正确识别的完整datetime格式字符串（如YYYY-MM-DDTHH:mm:ss）。你当前使用的纯日期字符串（2024-03-01）在DATE模式下能勉强解析，但切换到DATETIME后，数据库返回的带时分秒的日期格式可能无法被正确解析，导致x轴刻度计算异常，面积图的路径绘制失败。

2. Series数据类型错误：你的系列数据是字符串格式（如"330.00"），ApexCharts绘制面积图时对数字类型的依赖远高于柱状图，虽然tooltip能解析字符串数值，但图形渲染时会因为类型识别问题无法生成正确的路径。

解决方案 #

1. 修正X轴日期格式 #

将categories中的日期转换为毫秒时间戳，或者使用标准datetime格式字符串：

// 方式1：转为时间戳
xaxis: {
  type: "datetime",
  categories: [
    new Date("2024-03-01").getTime(),
    new Date("2024-03-02").getTime(),
    new Date("2024-03-03").getTime()
  ],
  // 其他配置...
}

// 方式2：使用完整datetime字符串
xaxis: {
  type: "datetime",
  categories: [
    "2024-03-01T00:00:00",
    "2024-03-02T00:00:00",
    "2024-03-03T00:00:00"
  ],
  // 其他配置...
}

2. 将Series数据转为数字类型 #

把字符串格式的数值改为数字类型，去掉引号或通过parseFloat转换：

series: [{
    name: "Value1 Label",
    data: [330.00, 0.00, 0.00] // 直接用数字
  },
  // 其他系列同理...
]

// 如果是从后端获取的字符串数据，提前处理：
// data: rawBackendData.map(item => parseFloat(item))

3. 可选：排查堆叠配置 #

暂时关闭stacked: true测试是否能渲染，确认是否是堆叠逻辑导致的层级覆盖问题。如果关闭后能显示，再检查各系列的数值是否存在叠加后被完全覆盖的情况。

修正后的完整代码示例 #

var options = {
  series: [{
      name: "Value1 Label",
      data: [330.00, 0.00, 0.00]
    },
    {
      name: "Value2 Label",
      data: [310.00, 0.00, 0.00]
    },
    {
      name: "Value3 Label",
      data: [230.00, 0.00, 0.00]
    },
    {
      name: "Value4 Label",
      data: [320.00, 0.00, 0.00]
    },
    {
      name: "Value5 Label",
      data: [330.00, 0.00, 0.00]
    },
    {
      name: "Value6 Label",
      data: [320.00, 0.00, 0.00]
    }
  ],
  chart: {
    height: 350,
    stacked: true,
    type: 'area'
  },
  dataLabels: {
    enabled: false
  },
  colors: ['#3078AF', '#AF3080', '#3C8337', '#A25267', '#EFA1EC', 'grey'],
  stroke: {
    curve: "smooth",
    lineCap: "round",
    width: 0
  },
  fill: {
    type: "solid"
  },
  xaxis: {
    type: "datetime",
    categories: [
      new Date("2024-03-01").getTime(),
      new Date("2024-03-02").getTime(),
      new Date("2024-03-03").getTime()
    ],
    labels: {
      style: {
        cssClass: "text-muted"
      }
    },
  },
  yaxis: {
    labels: {
      style: {
        cssClass: "text-muted"
      }
    },
  },
  legend: {
    position: "bottom",
    horizontalAlign: 'center',
    fontWeight: 400
  },
  tooltip: {
    x: {
      format: 'dd/MM/yy HH:mm'
    },
  },
};

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

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<br/>
<br/>
<div id="areaChart"></div>

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