如何在 ApexCharts 条形图中为每个数据点显示额外信息（如双值标签）-js教程-PHP中文网

如何在 ApexCharts 条形图中为每个数据点显示额外信息（如双值标签）

本文详解如何通过 dataLabels.formatter 结合 opt.dataPointIndex 在 ApexCharts 条形图中为每个柱子同时显示主数值与外部数据源提供的附加信息，支持动态映射、格式自定义与多字段组合。

本文详解如何通过 datalabels.formatter 结合 opt.datapointindex 在 apexcharts 条形图中为每个柱子同时显示主数值与外部数据源提供的附加信息，支持动态映射、格式自定义与多字段组合。

在 ApexCharts 中，默认的 dataLabels 仅能访问当前系列（series[0].data）的原始值（即 val），但实际业务中常需叠加展示关联维度数据——例如：柱高表示“完成量”，而标签还需显示“目标值”“达成率”或“负责人”等元信息。这类需求无法通过添加隐藏系列实现（ApexCharts 会跳过未渲染系列的数据索引），正确解法是利用 formatter 回调函数中的 opt 参数获取上下文，并结合外部数据源完成映射。

✅ 核心方案：使用 `opt.dataPointIndex` 进行安全索引匹配

formatter 函数的第二个参数 opt 是一个包含丰富上下文的对象，其中 opt.dataPointIndex 表示当前标签对应的数据点在 series[0].data 中的索引（从 0 开始）。只要你的额外数据源（如 extraInfo 数组）与主数据长度一致且顺序对齐，即可直接索引：

dataLabels: {
  enabled: true,
  formatter: function (val, opt) {
    // 假设 extraInfo = [12.5, 89.3, 45.1, ...] 与 series.data 长度相同
    const extra = extraInfo[opt.dataPointIndex] ?? 'N/A';
    return `${val}<br><small>${extra}%</small>`;
  },
  offsetY: -20,
  style: {
    fontSize: '12px',
    colors: ['#FFFFFF']
  }
}

⚠️ 注意：<br> 在标签中有效，但需确保 dataLabels.style.fontSize 足够支撑多行；若需更复杂布局，建议改用 annotations（见后文）。

✅ 进阶方案：基于 ID 或复合键进行非顺序映射

当额外数据与主数据不严格按索引对齐（如后端返回无序 ID 列表），应通过唯一标识符（如 id 字段）查找：

// 主数据（series.data 支持对象格式）
const seriesData = [
  { x: '301', y: 1, id: 'task-001' },
  { x: '300', y: 2, id: 'task-002' },
  // ...
];

// 额外信息源（含目标值、状态等）
const extraInfo = [
  { taskId: 'task-001', target: 5, status: 'on-track' },
  { taskId: 'task-002', target: 10, status: 'delayed' },
  // ...
];

// formatter 中精准匹配
formatter: function (val, opt) {
  const point = seriesData[opt.dataPointIndex];
  const meta = extraInfo.find(item => item.taskId === point.id);
  if (!meta) return `${val}`;
  return `${val}<br><small>Target: ${meta.target} | ${meta.status}</small>`;
}

✅ 替代方案：使用 Annotations 实现完全自定义标签

当需要脱离柱体位置、添加图标/颜色块/多行富文本，或需避免标签重叠时，推荐使用 annotations：

annotations: {
  points: seriesData.map((point, i) => ({
    x: point.x || `x${i}`, // 匹配 xaxis.categories 索引或字符串
    y: point.y,
    label: {
      text: `✅ ${point.y}<br>? ${extraInfo[i]?.target}<br>? ${extraInfo[i]?.rate}%`,
      position: 'top',
      style: {
        background: '#26D200',
        color: '#fff',
        fontSize: '11px',
        padding: '4px 8px',
        borderRadius: '4px'
      }
    }
  }))
}