ApexCharts数据标签配置求助：如何展示数值而非百分比

要让数据标签显示原始具体数值，只需修改dataLabels中的formatter函数，直接从系列数据中获取原始值即可——部分图表类型（如饼图）中默认的val参数会返回百分比，因此需要主动获取定义好的原始数据。

修改后的dataLabels代码块 #

dataLabels: {
  enabled: true,
  textAnchor: "start",
  style: {
    colors: ["#fff"]
  },
  formatter: function(val, opt) {
    // 获取当前系列下的原始数据值
    const originalValue = opt.series[opt.seriesIndex][opt.dataPointIndex];
    return opt.w.globals.labels[opt.dataPointIndex] + ":  " + originalValue;
  },
  offsetX: 0,
  dropShadow: {
    enabled: true
  }
},

完整配置示例 #

var options = {
  series: [{
    name: 'Marine Sprite',
    data: [44, 55, 41, 37, 22, 43, 21]
  }, {
    name: 'Striking Calf',
    data: [53, 32, 33, 52, 13, 43, 32]
  }],
  dataLabels: {
    enabled: true,
    textAnchor: "start",
    style: {
      colors: ["#fff"]
    },
    formatter: function(val, opt) {
      const originalValue = opt.series[opt.seriesIndex][opt.dataPointIndex];
      return opt.w.globals.labels[opt.dataPointIndex] + ":  " + originalValue;
    },
    offsetX: 0,
    dropShadow: {
      enabled: true
    }
  }
};

修改完成后，数据标签会直接显示你定义在series.data中的具体数值，而非百分比。

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