Oracle Apex中JavaScript径向条形图无法显示问题排查

已知信息：

• 页面项：P8_TOTAL 值为7405401，P8_TARGET 值为7564125，已设置为数字字段且确认有值
• 页面已引入ApexCharts的CDN
• 图表容器为静态内容：<div id="chart" style="height: 350px; width: 100%;"></div>
• 页面加载时执行的动态Action包含以下JavaScript代码：

document.addEventListener("DOMContentLoaded", function() {
    try {
        var totalOrderValue = parseFloat($v('P8_TOTAL').replace(/,/g, '')) || 0;
        var targetValue = parseFloat($v('P8_TARGET').replace(/,/g, '')) || 0;

        if (isNaN(totalOrderValue) || isNaN(targetValue)) {
            throw new Error("Invalid values for P8_TOTAL or P8_TARGET.");
        }

        var options = {
            chart: {
                type: 'radialBar',
                height: 350
            },
            series: [totalOrderValue, targetValue],
            labels: ['Total Order Value', 'Target'],
            plotOptions: {
                radialBar: {
                    dataLabels: {
                        name: {
                            fontSize: '16px',
                            offsetY: 20
                        },
                        value: {
                            fontSize: '24px',
                            offsetY: 10,
                            formatter: function(val) {
                                return val.toLocaleString();
                            }
                        }
                    }
                }
            },
            colors: ['#FF4560', '#00E396'],
            fill: {
                type: 'solid'
            },
            stroke: {
                lineCap: 'round'
            }
        };

        var chartContainer = document.querySelector("#chart");
        if (chartContainer) {
            var chart = new ApexCharts(chartContainer, options);
            chart.render().then(() => {
                console.log("Chart rendered successfully");
            }).catch(error => {
                console.error("Error rendering chart:", error);
            });
        } else {
            console.error("Chart container not found.");
        }
    } catch (error) {
        console.error("JavaScript error:", error);
    }
});

• 浏览器控制台未显示任何错误，但图表区域为空

1. 移除DOMContentLoaded监听，改用Oracle Apex原生时机 #

Oracle Apex的页面加载生命周期和原生浏览器的DOMContentLoaded不同步，动态Action本身已设置为"页面加载时"执行，嵌套监听会导致代码执行时机错误——可能页面项或容器还未就绪。

修改后核心代码（去掉外层监听）：

try {
    var totalOrderValue = parseFloat($v('P8_TOTAL').replace(/,/g, '')) || 0;
    var targetValue = parseFloat($v('P8_TARGET').replace(/,/g, '')) || 0;

    if (isNaN(totalOrderValue) || isNaN(targetValue)) {
        throw new Error("P8_TOTAL或P8_TARGET值无效");
    }

    // 后续options和渲染代码保持不变
} catch (error) {
    console.error("JavaScript错误:", error);
}

2. 修正ApexCharts径向图的多值配置 #

ApexCharts的径向条形图默认是单值展示，要显示两个对比值，需补充轨道配置并调整series的显示逻辑：

plotOptions: {
    radialBar: {
        // 开启对比轨道
        track: {
            show: true,
            strokeWidth: '60%',
            opacity: 0.3,
            colors: ['#e0e0e0']
        },
        // 调整多系列的半径与显示规则
        barRadius: 0.5,
        radius: '70%',
        // 显示总值对比
        total: {
            show: true,
            label: '总值对比',
            formatter: function(w) {
                return w.globals.seriesTotals.reduce((a, b) => a + b, 0).toLocaleString();
            }
        },
        dataLabels: {
            name: {
                fontSize: '16px',
                offsetY: 20
            },
            value: {
                fontSize: '24px',
                offsetY: 10,
                formatter: function(val) {
                    return val.toLocaleString();
                }
            }
        }
    }
},

3. 验证页面项值的读取有效性 #

在代码开头添加调试日志，确认页面项是否被正确读取：

console.log("P8_TOTAL原始值:", $v('P8_TOTAL'));
console.log("P8_TARGET原始值:", $v('P8_TARGET'));

如果输出为空，检查页面项的可见性设置：若页面项设为"隐藏"，$v()可能无法读取，需改为"仅在会话状态中"或确保渲染时存在DOM元素。

4. 确认CDN的正确加载 #

确保CDN引入的是完整的ApexCharts库，且加载顺序在动态Action代码之前：

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

5. 避免重复渲染导致的冲突 #

若动态Action可能被多次触发（如页面刷新、部分刷新），需先销毁旧图表实例再重新渲染：

// 创建新图表前销毁旧实例
if (window.radialChart) {
    window.radialChart.destroy();
}
var chart = new ApexCharts(chartContainer, options);
window.radialChart = chart;
chart.render();

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