.NET 8 Blazor WASM中Apex-Chart显示百分比问题求助

问题原因 #

你当前的Formatter字符串拼接方式存在潜在的语法解析问题，虽然表面生成了合法的JS函数，但Blazor Apex-Chart组件无法正确解析这种拼接后的字符串格式，导致数据标签不生效。

解决方案 #

1. 基础百分比显示（原始值加%） #

如果仅需要给原始数据值追加百分号，直接使用逐字字符串定义JS函数，避免手动拼接引号带来的解析问题：

DataLabels = new DataLabels
{
    Enabled = true,
    // 用@字符串直接定义JS函数，语法更清晰可靠
    Formatter = @"function(val) { return val + '%'; }"
}

2. 占比百分比显示（基于数据总和计算） #

如果需要显示数据在整体中的占比（比如饼图/环形图的百分比），利用ApexCharts提供的opts.whole参数计算占比：

DataLabels = new DataLabels
{
    Enabled = true,
    Formatter = @"function(val, opts) {
        // 计算占比并保留1位小数
        return ((val / opts.whole) * 100).toFixed(1) + '%';
    }"
}

3. 额外检查项 #

• 确保图表类型（如ChartType.Pie/ChartType.Donut）支持数据标签显示，部分线性图表需额外配置才能启用数据标签。
• 确认Blazor Apex-Chart脚本已正确引入到WASM项目的index.html中：

  <script src="_content/Blazor-ApexCharts/js/apex-charts.min.js"></script>
  <script src="_content/Blazor-ApexCharts/js/blazor-apex-charts.js"></script>
  

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