ApexCharts堆叠面积图中折线显示异常问题求助

问题描述 #

创建堆叠面积图时，添加的折线图数据为[2,2]、[4,4]，本该显示为水平直线，但现在被堆叠在面积图上方，呈现曲线且数据错误。期望实现4个堆叠面积图在后方，两条直线正常显示的效果。

原代码 #

var options = {
  "chart": {
    "type": "area",
    "stacked": true,
    "stackOnlyBar": false
    //stackType:'normal'
  },
  "colors": [
    "#CECECE",
    "#E76F51",
    "#fcd757",
    "#2ec4b6",
    "#6563BB",
    "#000000"
  ],
  "dataLabels": {
    "enabled": false
  },
  "stroke": {
    "width": 2
  },
  "fill": {
    "type": "solid",
    "gradient": {
      "opacityFrom": 0.6,
      "opacityTo": 0.8
    }
  },
  "legend": {
    "position": "top",
    "horizontalAlign": "left"
  },
  "markers": {
    "size": 0.005
  },
  "tooltip": {
    "enabled": false,
    "shared": true,
    "inverseOrder": true,
    "fillSeriesColor": false,
    "y": {}
  },
  "xaxis": {
    "type": "datetime",
    "convertedCatToNumeric": false
  },
  "noData": {
    "text": "No data available",
    "style": {
      "fontSize": "18px"
    }
  },
  "yaxis": [{
    "min": 0,
    "max": 28.14,
    "labels": {}
  }],
  "series": [
    {
      "name": "Grey Zone",
      "type": "area", 
      "data": [
        [1709015776791, 8],
        [1709015673850, 0]
      ],
    },
    {
      "name": "Red Zone",
      "type": "area",
      "data": [
        [1709015776791, 4],
        [1709015673850, 4]
      ],
    },
    {
      "name": "Yellow Zone",
      "type": "area",
      "data": [
        [1709015776791, 6],
        [1709015673850, 6]
      ],
    },
    {
      "name": "Green Zone",
      "type": "area",
      "data": [
        [1709015776791, 10],
        [1709015673850, 10]
      ],
    },
    {
      "name": "Available Stock",
      "type": "line",
      "yAxisIndex": 1,
      "data": [
        [1709015776791, 2],
        [1709015673850, 2]
      ],
      "stacked":false,
      "stackSeries": false
    },
    {
      "name": "On Hand Stock",
      "type": "line",
      "yAxisIndex": 1,
      "data": [
        [1709015776791, 4],
        [1709015673850, 4]
      ],
      "stacked":false,
      "stackSeries": false
    },
  ]
};

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

chart.render();

修复方案 #

关键调整点 #

• 移除无效Y轴配置：原代码中折线图指定了yAxisIndex: 1，但全局仅定义了1个Y轴，导致折线映射异常，直接删除该属性。
• 强制折线不参与堆叠：ApexCharts中控制堆叠的核心属性是stack，而非stacked，给折线系列设置stack: null，彻底脱离堆叠逻辑。
• 修正时间点顺序：X轴为datetime类型，数据点需按时间升序排列，否则会出现异常曲线，将所有系列的data数组按时间从小到大排序。
• 调整绘制层级：给折线系列添加order属性，设置为比面积图更高的数值（如5、6），确保折线显示在面积图上方。

修正后完整代码 #

var options = {
  "chart": {
    "type": "area",
    "stacked": true,
    "stackOnlyBar": false
  },
  "colors": [
    "#CECECE",
    "#E76F51",
    "#fcd757",
    "#2ec4b6",
    "#6563BB",
    "#000000"
  ],
  "dataLabels": {
    "enabled": false
  },
  "stroke": {
    "width": 2
  },
  "fill": {
    "type": "solid",
    "gradient": {
      "opacityFrom": 0.6,
      "opacityTo": 0.8
    }
  },
  "legend": {
    "position": "top",
    "horizontalAlign": "left"
  },
  "markers": {
    "size": 0.005
  },
  "tooltip": {
    "enabled": false,
    "shared": true,
    "inverseOrder": true,
    "fillSeriesColor": false,
    "y": {}
  },
  "xaxis": {
    "type": "datetime",
    "convertedCatToNumeric": false
  },
  "noData": {
    "text": "No data available",
    "style": {
      "fontSize": "18px"
    }
  },
  "yaxis": [{
    "min": 0,
    "max": 28.14,
    "labels": {}
  }],
  "series": [
    {
      "name": "Grey Zone",
      "type": "area", 
      "data": [
        [1709015673850, 0],
        [1709015776791, 8]
      ]
    },
    {
      "name": "Red Zone",
      "type": "area",
      "data": [
        [1709015673850, 4],
        [1709015776791, 4]
      ]
    },
    {
      "name": "Yellow Zone",
      "type": "area",
      "data": [
        [1709015673850, 6],
        [1709015776791, 6]
      ]
    },
    {
      "name": "Green Zone",
      "type": "area",
      "data": [
        [1709015673850, 10],
        [1709015776791, 10]
      ]
    },
    {
      "name": "Available Stock",
      "type": "line",
      "data": [
        [1709015673850, 2],
        [1709015776791, 2]
      ],
      "stack": null,
      "order": 5
    },
    {
      "name": "On Hand Stock",
      "type": "line",
      "data": [
        [1709015673850, 4],
        [1709015776791, 4]
      ],
      "stack": null,
      "order": 6
    }
  ]
};

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

chart.render();

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