Canvas+ChartJS无法渲染毕业生反馈可视化图表问题

问题现象 #

基于Canvas + ChartJS搭建多场景反馈数据可视化模块时，学生、教职工等其他用户群体的反馈图表均可正常渲染，仅毕业生反馈板块的图表始终无法正常显示。

关联代码 #

HTML结构代码 #

<h3 style="text-align: center; background-color: lightgrey;">Graduate Student Feedback Visualization</h3>

<canvas id="graduate-chart1" class="mx-auto" style="width:100%;max-width:600px"></canvas>
<br> 
<canvas id="graduate-chart2" class="mx-auto" style="width:100%;max-width:600px"></canvas>
<br>
<canvas id="graduate-chart3" class="mx-auto" style="width:100%;max-width:600px"></canvas>
<br>
<canvas id="graduate-chart4" class="mx-auto" style="width:100%;max-width:600px"></canvas>
<br>
<canvas id="graduate-chart5" class="mx-auto" style="width:100%;max-width:600px"></canvas>
<!-- 省略中间canvas，直至第16个 -->
<canvas id="graduate-chart16" class="mx-auto" style="width:100%;max-width:600px"></canvas>

渲染脚本代码 #

<script>
var xValues = ["very satisfied", "satisfied", "neutral", "dissatisifed", "very dissatified"];
var yValues = {{ Graduate_Feedback_data }};
var barColors = [
    "#b91d47",
    "#00aba9",
    "#2b5797",
    "#e8c3b9",
    "#1e7145"
];

graduate_questionnaire = ["The work in the program is too heavy and induces a lot of pressure.",
                        "The program is effective in enhancing team- working abilities.",
                        // 省略其余问题
                        "Discipline",
                        "The link between theory and practice"]
graduate_chart_ids = ["graduate-chart1", "graduate-chart2", "graduate-chart3", "graduate-chart4", "graduate-chart5", "graduate-chart6", "graduate-chart7", "graduate-chart8", "graduate-chart9","graduate-chart10", "graduate-chart11", "graduate-chart12", "graduate-chart13","graduate-chart14","graduate-chart15",'graduate-chart16']
for (let i = 0; i < graduate_chart_ids.length; i++) {
    new Chart(graduate_chart_ids[i], {
        type: "pie",
        data: {
            labels: xValues,
            datasets: [{
                backgroundColor: barColors,
                data: yValues[i]
            }]
        },
        options: {
            title: {
                display: true,
                text: graduate_questionnaire[i]
            }
        }
    })
}
</script>

故障原因 #

• 数组长度不匹配：graduate_chart_ids固定长度为16，对应16个图表容器，但graduate_questionnaire仅声明了4个问题项，循环索引超过3后会取到undefined作为图表标题，触发ChartJS配置校验错误，直接中断整个渲染流程。
• DOM节点缺失：HTML部分仅明确声明了前5个和最后1个canvas容器，中间10个canvas用注释省略，若页面实际未补全这部分DOM，循环时会找不到对应id的渲染节点，抛出DOM获取错误。
• 后端模板插值风险：yValues通过模板语法{{ Graduate_Feedback_data }}直接注入，如果后端返回的数据不是长度为16的标准二维数组（每个子数组需包含5个对应满意度选项的数值），或是序列化时存在转义字符、特殊符号破坏JS语法，会导致yValues[i]取值非法，数据集配置不符合ChartJS要求。
• 实例化参数不规范：直接将id字符串传入new Chart()作为渲染容器，该写法仅在部分旧版ChartJS中做了兼容，版本变动或上下文异常时会无法识别目标容器。

修复方案 #

• 补全所有依赖项，保证长度对齐：
  1. 补全HTML中id从graduate-chart6到graduate-chart15的10个canvas元素，确保16个图表容器全部真实存在。
  2. 补全graduate_questionnaire数组的剩余12个问题文本，保证数组长度和graduate_chart_ids完全一致。
  3. 校验后端返回的Graduate_Feedback_data格式，确保为长度16的二维数组，每个子数组包含5个有效数值；模板渲染时对JSON数据做安全转义，例如Django模板需添加|safe过滤器，避免HTML转义破坏JS语法。
• 优化渲染逻辑，增加容错判断：
  替换原有循环渲染代码，先获取DOM节点、校验配置合法性后再实例化图表，避免单个节点/配置错误导致整个板块渲染失败：

for (let i = 0; i < graduate_chart_ids.length; i++) {
    // 先获取canvas DOM节点，不直接传id
    const canvas = document.getElementById(graduate_chart_ids[i]);
    // 节点不存在直接跳过，不中断后续循环
    if (!canvas) continue;
    // 校验当前索引的数据集、标题是否存在
    const chartData = yValues[i];
    const chartTitle = graduate_questionnaire[i];
    if (!Array.isArray(chartData) || !chartTitle) continue;

    new Chart(canvas, {
        type: "pie",
        data: {
            labels: xValues,
            datasets: [{
                backgroundColor: barColors,
                data: chartData
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            title: {
                display: true,
                text: chartTitle
            }
        }
    })
}

• 可选优化：修正满意度选项的拼写错误，将dissatisifed、very dissatified改为正确拼写dissatisfied、very dissatisfied，避免前端展示错别字。

内容的提问来源于stack exchange，提问作者Amiable.Azam