ApexChart RadialBar标签单位自定义及总量修改方案问询

问题 #

使用ApexChart的RadialBar组件时，默认径向条总量为100，且数值会带上%单位，但实际场景中需要将总量改为非100的数值（比如40），同时隐藏%单位。目前只能通过dataLabels:{ value:{ show: false},}隐藏数值，无法实现修改总量和调整单位的需求。现有代码示例如下：

var options = {
  chart: {
      height: 350,
      type: 'radialBar',
  },
  series: [21],
  labels: ['Amount'],
  plotOptions: {
          radialBar: {
            hollow: {
              size: "70%",
            },
            total:{
              show: true,
            },
            value:{
              show: true,
            },
            dataLabels:{
              value:{
                show: false,
              },
            }
          },
        },
}

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

chart.render();

解决方案 #

可以通过ApexChart自带的自定义配置项实现需求，具体设置如下：

1. 修改径向条总量为自定义数值 #

通过plotOptions.radialBar.total下的配置，替换默认的总量逻辑：

• 设置total.value为目标总量（比如40）
• 重写total.formula，让它直接返回我们设置的总量值，而非默认的100
• 可选：通过total.label自定义总量的显示文本

2. 隐藏/修改数值的%单位 #

通过plotOptions.radialBar.dataLabels.value.formatter自定义数值的显示格式，直接返回纯数字即可去掉百分号，需要自定义单位也可在这里调整。

修改后的完整代码示例 #

var options = {
  chart: {
    height: 350,
    type: 'radialBar',
  },
  series: [21],
  labels: ['Amount'],
  plotOptions: {
    radialBar: {
      hollow: {
        size: "70%",
      },
      total: {
        show: true,
        value: 40, // 设置自定义总量
        label: 'Total', // 自定义总量标签文本
        formula: function() {
          return this.config.total.value; // 直接返回设置的总量，替代默认的100计算逻辑
        }
      },
      value: {
        show: true,
      },
      dataLabels: {
        value: {
          show: true,
          formatter: function(val) {
            return val; // 直接返回数值，去掉默认的%单位
          }
        }
      }
    },
  },
}

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

chart.render();

关键配置说明 #

• total.formula：默认会计算系列值的总和，重写后直接返回自定义的总量值，让径向条的占比基于目标数值计算
• dataLabels.value.formatter：接收当前数值作为参数，返回内容即为最终显示文本，若需要自定义单位可写成return val + ' 个'这类形式

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