ApexCharts堆叠柱状图自定义数据标签格式化函数异常问题

看起来你遇到的问题挺典型的，我来帮你一步步排查：

首先，先搞清楚核心矛盾：明明计算出了有效的百分比，但部分柱子的标签就是不显示。咱们先从最容易验证的点入手：

第一步：加日志，确认formatter的真实执行情况 #

你可以在formatter函数里加几行console.log，把关键参数和计算结果打出来，比如：

formatter: function(value, {seriesIndex, dataPointIndex, w}){
    console.log(`处理系列${seriesIndex}，数据点${dataPointIndex}`);
    console.log(`当前系列值：${value}`);
    const visited = totalVisitedCount[dataPointIndex];
    const planned = totalPlannedCount[dataPointIndex];
    console.log(`visited: ${visited}, planned: ${planned}`);
    let percentage = null;
    if(planned != 0){
        percentage = Math.floor((visited / planned) * 100) + '%';
        console.log(`计算出的百分比：${percentage}`);
    }
    console.log(`最终返回：${percentage}`);
    if(seriesIndex == 1){
        return percentage;
    } else {
        return '';
    }
},

运行之后看浏览器控制台，那些“应该显示但没显示”的柱子，对应的日志里是不是真的有有效的percentage？如果日志里有，但页面上看不到，那大概率是标签位置出问题了；如果日志里就没输出，那可能是seriesIndex判断错了，或者该数据点的formatter根本没执行。

常见问题1：标签被偏移到可视区域外了 #

你设置了offsetY: -50，这个固定偏移量在柱子比较矮的时候，会把标签直接推到图表顶部外面，导致肉眼看不到。你可以先把offsetY改成0，看看那些消失的标签是不是出来了。如果是这个问题，咱们可以把偏移量改成动态的，根据柱子总高度调整：

offsetY: function({dataPointIndex, w}) {
    // 计算当前堆叠柱子的总高度
    const totalHeight = w.globals.series[0][dataPointIndex] + w.globals.series[1][dataPointIndex];
    // 柱子够高就用-50，不够的话就贴在柱子顶部上方一点
    return totalHeight > 50 ? -50 : -(totalHeight + 10);
},

常见问题2：对应系列的数值为0，导致ApexCharts不渲染标签 #

ApexCharts有个默认逻辑：如果某个系列的dataPoint值为0，即使你在formatter里返回了内容，它也不会渲染这个标签。要是你的seriesIndex=1对应的某些数据点值是0，那就算你算出了百分比，标签也不会显示。

这种情况下，你可以换个思路：不用单个系列的dataLabels，而是用**annotations（注释）**来在堆叠柱子的顶部添加标签，这样就和单个系列的数值无关了。比如在图表配置里加annotations：

annotations: {
    points: function(w) {
        const labels = [];
        w.globals.series[0].forEach((val, idx) => {
            const visited = totalVisitedCount[idx];
            const planned = totalPlannedCount[idx];
            if(planned === 0) return;
            const percentage = Math.floor((visited / planned) * 100) + '%';
            // 获取柱子顶部的y坐标
            const topY = val + w.globals.series[1][idx];
            labels.push({
                x: w.globals.labels[idx], // x轴对应的标签
                y: topY, // 柱子顶部的y值
                label: {
                    text: percentage,
                    offsetY: -10, // 标签在柱子顶部上方10px
                    style: {
                        fontSize: '12px',
                        fontFamily: 'Muli, Helvetica, Arial, sans-serif',
                        fontWeight: 700,
                        color: '#000000'
                    }
                }
            });
        });
        return labels;
    }
},

这种方式会直接在每个柱子的顶部绘制标签，不受单个系列数值的影响。

最后再确认一个细节：seriesIndex的判断是否正确 #

有时候堆叠系列的顺序可能和你预期的相反，比如你以为seriesIndex=1是顶部的系列，但实际上它是底部的。你可以在日志里打印w.globals.series，看看两个系列的数值分布，确认哪个是顶部的系列，再调整seriesIndex的判断条件。

先按这个思路排查一下，应该能找到问题所在~

备注：内容来源于stack exchange，提问作者Mezbaul Islam Aunik