ApexCharts柱状图dataLabels显示额外数据的实现求助

方法一：将主数据与额外数据合并为对象 #

直接在series的data数组中存储包含主值和额外值的对象，这样在dataLabels的formatter函数中可以直接访问两个值，无需依赖隐藏系列。

修改后的series配置：

series: [{
  name: "data1",
  data: [
    {value: 1, extra: "额外值1"}, {value: 2, extra: "额外值2"}, {value: 3, extra: "额外值3"},
    {value:4, extra:"额外值4"}, {value:5, extra:"额外值5"}, {value:6, extra:"额外值6"}, {value:7, extra:"额外值7"}, {value:8, extra:"额外值8"}, {value:9, extra:"额外值9"}, {value:0, extra:"额外值10"},
    {value:1, extra:"额外值11"}, {value:2, extra:"额外值12"}, {value:3, extra:"额外值13"}, {value:4, extra:"额外值14"}, {value:5, extra:"额外值15"}, {value:6, extra:"额外值16"}, {value:7, extra:"额外值17"}, {value:8, extra:"额外值18"},
    {value:9, extra:"额外值19"}, {value:0, extra:"额外值20"}, {value:1, extra:"额外值21"}, {value:2, extra:"额外值22"}, {value:3, extra:"额外值23"}, {value:4, extra:"额外值24"}, {value:5, extra:"额外值25"}, {value:6, extra:"额外值26"},
    {value:7, extra:"额外值27"}, {value:8, extra:"额外值28"}, {value:9, extra:"额外值29"}, {value:0, extra:"额外值30"}, {value:1, extra:"额外值31"}, {value:2, extra:"额外值32"}, {value:3, extra:"额外值33"}, {value:4, extra:"额外值34"},
    {value:5, extra:"额外值35"}, {value:6, extra:"额外值36"}
  ]
}],

对应修改dataLabels的formatter：

dataLabels: {
  enabled: true,
  formatter: function (val, opt) {
    // val对应对象的value属性，额外值从opt.dataPoint.extra获取
    return `${val}unt\n${opt.dataPoint.extra}`; // 可自定义显示格式，比如换行或拼接
  },
  offsetY: -20,
  style: {
    fontSize: "12px",
    colors: ["#FFFFFF"]
  }
},

方法二：单独维护额外数据数组，通过索引匹配 #

如果不想修改原series的data结构，可以单独定义额外数据数组，在formatter中通过数据点的索引匹配对应值。

首先定义额外数据数组：

const extraData = [
  "额外值1", "额外值2", "额外值3", "额外值4", "额外值5", "额外值6", "额外值7", "额外值8", "额外值9", "额外值10",
  "额外值11", "额外值12", "额外值13", "额外值14", "额外值15", "额外值16", "额外值17", "额外值18", "额外值19", "额外值20",
  "额外值21", "额外值22", "额外值23", "额外值24", "额外值25", "额外值26", "额外值27", "额外值28", "额外值29", "额外值30",
  "额外值31", "额外值32", "额外值33", "额外值34", "额外值35", "额外值36"
];

然后修改dataLabels的formatter：

dataLabels: {
  enabled: true,
  formatter: function (val, opt) {
    // 通过opt.dataPointIndex获取当前数据点的索引，匹配extraData中的对应值
    const extraVal = extraData[opt.dataPointIndex];
    return `${val}unt\n${extraVal}`;
  },
  offsetY: -20,
  style: {
    fontSize: "12px",
    colors: ["#FFFFFF"]
  }
},

关于隐藏系列方法失效的原因 #

当设置系列为visible: false时，ApexCharts会跳过该系列的数据渲染和索引分配，导致在formatter中无法通过常规方式访问到隐藏系列的数据，因此不建议用这种方式承载额外值。

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