Javascript ChartJs未呈现

因此，我试图在 bootstrap 弹出窗口中呈现一个图表，但它似乎没有呈现.我try 了所有可能的方法来调试，但我不能完全弄清楚哪里出了问题.因此，任何帮助都将不胜感激.以下是我的html代码:

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

注意:我正在使用JJJA来呈现我的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)时，它在控制台中返回一个图表对象，该对象提供了一些奇怪的属性，就像在选项中，它返回的x和y是未定义的.我是不是做错了什么，或者错过了什么？

谢谢

编辑:

这是我的控制台，当我执行console.log(HourChart).