Bootstrap Popover中ChartJs无法渲染问题排查求助

尝试在Bootstrap Popover中渲染Chart.js图表但未成功，已尝试多种调试方法仍无法定位问题，相关代码如下：

HTML代码 #

<div id="popover-content" style="display: none;">
      {%include 'scroll_card.html'%}
</div>

注：使用Jinja渲染包含图表的HTML，scroll_card.html内容如下：

<div class='summary'><h5 class='header'> Chart </h5>
    <div class="chart" style="height: 400px;">
        <canvas id='hourly-chart' width="300" height="400">Hello</canvas>
    </div>
</div>

JS代码 #

document.addEventListener('DOMContentLoaded', function() {
const myPopoverTrigger = document.getElementById('popover');
let hourChart =null;
const instance = new mdb.Popover(myPopoverTrigger, {
    title:"Hourly Forecast",
    sanitize:false,
    html:true,
    content: function(){
        popContent = document.querySelector('#popover-content').innerHTML;
        return popContent;
    }
    
});


myPopoverTrigger.addEventListener('show.mdb.popover', () => {
    const ctxHour = document.getElementById('hourly-chart').getContext('2d');
    console.log(ctxHour);
    if (hourChart) {
            hourChart.destroy();
        }
hourChart = new Chart(ctxHour, {
    type: 'line',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3],
          borderWidth: 1
        }]
      },
      options: {
        responsive: false,
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    
    });
    console.log(hourChart);
});
    myPopoverTrigger.addEventListener('hide.mdb.popover', () => {
        if (hourChart) {
            hourChart.destroy();
        }

    });
});

补充说明 #

console.log输出hourChart对象时，其options中的x、y属性显示为undefined，怀疑存在操作错误或遗漏环节。截图显示hourChart的options里x和y字段值为undefined。

内容的提问来源于stack exchange，提问作者Alabi Oluwabusayo Joseph