如何解决Django集成Chart.js时控制台报Uncaught ReferenceError的问题

报错原因 #

你遇到的Uncaught ReferenceError: doughnutChart is not defined报错，核心原因是初始化Chart实例时，直接传入了doughnutChart作为参数，浏览器不会默认将DOM元素的id作为全局变量识别，因此找不到对应的变量引用。

修复步骤 #

修改Chart初始化的第一个入参，主动通过DOM API获取id为doughnutChart的canvas元素即可，修改后完整代码如下：

<canvas id="doughnutChart"></canvas>
<script>
// 先获取canvas DOM元素，替换原来直接写的doughnutChart
var chartDom = document.getElementById('doughnutChart');
var myDoughnutChart = new Chart(chartDom, {
    type: 'doughnut',
    data: {
        datasets: [{
            data: ['{{ wait_senior_analyst|safe }}','{{ wait_lead|safe }}',
                '{{ wait_manager|safe }}','{{ wait_regional_manager|safe }}',
                '{{ wait_regional_director|safe }}','{{ wait_cfo|safe }}'],
            backgroundColor: [   '#f6f349','#6def56',
                                '#e90d73','#7f00d9',
                                '#1df3f3','#ff7702']
        }],
        labels: [
        'Senior Analyst',
        'Lead',
        'Manager',
        'Regional Manager',
        'Regional Director',
        'CFO',
        ]
    },
    options: {
        responsive: true,
        legend : {
            position: 'bottom',
            labels: {
            fontColor: {% if request.user.themeChoice == 'Light' %}"black"{% else %}"#d2fff2"{% endif %},
            fontSize: 16
        }
        },
        layout: {
        }
    }
});
</script>

可选优化点 #

• 确保Chart.js的引入代码在你这段自定义script代码之前执行，避免Chart构造函数未定义报错
• 可以将初始化逻辑包裹在DOM加载完成的回调中，避免canvas元素还未渲染就执行JS逻辑：

document.addEventListener('DOMContentLoaded', function() {
  // 此处放上述Chart初始化代码
})

• 如果你传入的wait_senior_analyst等变量是数字类型，建议去掉data数组中对应值的单引号，避免Chart.js将数据识别为字符串导致渲染异常

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