Bootstrap弹出框中Chart.js折线图无法显示的问题求助

问题原因 #

你的代码核心问题在于：

• 提前在未插入DOM的canvas上渲染Chart，此时canvas的绘图上下文无法正确完成绘制
• 通过chartCanvas.outerHTML获取的只是canvas的空标签，Chart绘制的图形不会被包含在HTML字符串中——因为Chart是操作canvas的像素上下文，而非修改DOM结构

修正方案 #

必须在popover完全显示后，再获取DOM中的canvas元素并初始化Chart，这样canvas已经存在于DOM树中，能正确完成渲染：

<!DOCTYPE html>
<html lang="en">

<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js" integrity="sha512-TW5s0IT/IppJtu76UbysrBH9Hy/5X41OTAbQuffZFU6lQ1rdcLHzpU5BzVvr/YFykoiMYZVWlr/PX1mDcfM9Qg==" crossorigin="anonymous"></script>

</head>

<body>
    <div class="container py-3">
        <button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-html="true" title="Chart">Open Chart</button>
    </div>
    <script>
        // 定义Chart数据和配置
        const chartData = {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [{
                label: 'My Dataset',
                data: [65, 59, 80, 81, 56, 55, 40],
                fill: false,
                borderColor: 'rgb(75, 192, 192)',
                tension: 0.1
            }]
        };

        const chartOptions = {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        };

        // 初始化popover，仅提供包含canvas的HTML结构
        const popoverTrigger = document.querySelector('[data-bs-toggle="popover"]');
        const popover = new bootstrap.Popover(popoverTrigger, {
            container: 'body',
            content: '<div class="chart-container"><canvas id="myChart" role="img" aria-label="Hello world" style="width:400px; height:300px;"></canvas><h1>Hello</h1></div>',
            html: true
        });

        // 监听popover显示完成事件，此时canvas已插入DOM
        popoverTrigger.addEventListener('shown.bs.popover', function () {
            const chartCanvas = document.getElementById('myChart');
            // 初始化Chart
            new Chart(chartCanvas, {
                type: 'line',
                data: chartData,
                options: chartOptions
            });
        });
    </script>
      
</body>
</html>

关键改动说明 #

• 移除提前创建canvas并渲染Chart的逻辑，改为在popover内容中直接写入canvas标签
• 添加shown.bs.popover事件监听，确保在弹出框完全显示、canvas已存在于DOM中时，再初始化Chart
• 避免使用outerHTML传递已渲染的canvas，因为它无法携带Chart绘制的像素内容

内容的提问来源于stack exchange，提问作者Thiếp Nguyễn