HTML表单生成填写图表流程详解

常见错误现象：Uncaught TypeError: Cannot read property 'value' of null —— 拿错了元素 ID；或者图表没刷新，因为没调用 chart.update()。

• 别在表单提交默认行为里直接画图，先 event.preventDefault()
• 确保图表容器（如 ）已存在且 DOM 加载完成
• 如果表单有动态增删字段，别用固定索引取值，改用 form.querySelectorAll('input[name="score"]') 这类方式遍历

用 Chart.js 渲染表单数据的最小可行步骤

Chart.js 是最轻量、兼容性好、适合表单场景的选择。它不依赖 jQuery，API 直观，且支持实时更新。

使用场景：问卷得分汇总、多选项占比、时间序列录入后的折线图等。

• 引入 Chart.js：
• 准备一个 容器，别写成
• 创建 chart 实例时，data.labels 和 data.datasets[0].data 必须长度一致，否则报错 Cannot read property 'length' of undefined
• 每次重新绘图前，建议先调用 myChart.destroy() 或复用实例并执行 myChart.data = newData; myChart.update();

示例片段：

const form = document.getElementById('myForm');
const ctx = document.getElementById('chart').getContext('2d');
let myChart;

form.addEventListener('submit', function(e) {
  e.preventDefault();
  const scoreInputs = form.querySelectorAll('input[name="score"]');
  const labels = Array.from(scoreInputs).map(i => i.dataset.label);
  const data = Array.from(scoreInputs).map(i => Number(i.value) || 0);

  if (myChart) myChart.destroy();
  myChart = new Chart(ctx, {
    type: 'bar',
    data: { labels, datasets: [{ data }] }
  });
});

表单字段类型和图表数据类型的匹配陷阱

不是所有表单输入都能直接塞进图表。数值类图表（柱状图、折线图）只认数字，但