HTMX切换页面时Flowbite/ApexCharts图表无法渲染问题求助

问题核心：通过HTMX异步加载包含ApexCharts的页面时，图表无法渲染；但直接访问该页面地址时图表正常显示。原因是HTMX加载内容时，DOMContentLoaded事件早已触发，原脚本中的初始化逻辑不会执行。

步骤1：重构图表初始化逻辑为独立函数 #

修改你的templ模板脚本，把图表初始化代码抽成单独函数，同时保留DOMContentLoaded触发逻辑（兼容直接访问页面的场景）：

templ C1(s []int){
    <div id="area-chart"></div>
    @templ.JSONScript("chart-data", s)

    <script>
        function initAreaChart() {
            const chartEl = document.getElementById("area-chart");
            if (!chartEl || typeof ApexCharts === 'undefined') return;

            // 销毁已存在的图表实例，避免重复渲染导致异常
            const existingChart = ApexCharts.getChartByID("area-chart");
            if (existingChart) {
                existingChart.destroy();
            }

            const chartData = JSON.parse(document.getElementById('chart-data').textContent);
            const options = {
                // 你的图表配置项
                series: [{ data: chartData }],
                chart: {
                    id: "area-chart",
                    type: "area"
                    // 其他图表设置...
                }
                // 其余配置...
            };

            const chart = new ApexCharts(chartEl, options);
            chart.render();
        }

        // 兼容直接访问页面的情况
        document.addEventListener('DOMContentLoaded', initAreaChart);
    </script>
}

步骤2：在HTMX加载回调中触发图表初始化 #

更新HTMX的onLoad回调，在初始化Flowbite后调用图表初始化函数：

<script>
    htmx.onLoad(function(content) {
        initFlowbite();
        // 仅当加载的内容包含目标图表元素时才执行初始化
        if (content.querySelector("#area-chart")) {
            initAreaChart();
        }
    })
</script>

补充说明 #

• 加入图表销毁逻辑是为了防止多次切换面板时重复创建实例，避免性能损耗或渲染错乱。
• 回调中判断目标元素是否存在，可减少不必要的函数调用，提升效率。

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