HTML表单本身不生成图表，需用JavaScript读取表单数据并交由Chart.js等库渲染；关键点包括防止默认提交、确保DOM就绪、正确处理数据类型及移动端canvas适配。
HTML 表单本身不生成图表，得靠 JavaScript 配合
HTML 表单只是收集数据的容器，<form></form>、<input>、<select></select> 这些标签不会自动画图。所谓“表单填写图表”，本质是：用户填完表单后，用 JS 读取 form.elements 或 FormData，再把数据喂给图表库（比如 Chart.js、ECharts）渲染。
常见错误现象：Uncaught TypeError: Cannot read property 'value' of null —— 拿错了元素 ID；或者图表没刷新，因为没调用 chart.update()。
- 别在表单提交默认行为里直接画图，先
event.preventDefault() - 确保图表容器（如
<canvas id="myChart"></canvas>）已存在且 DOM 加载完成 - 如果表单有动态增删字段，别用固定索引取值，改用
form.querySelectorAll('input[name="score"]')这类方式遍历
用 Chart.js 渲染表单数据的最小可行步骤
Chart.js 是最轻量、兼容性好、适合表单场景的选择。它不依赖 jQuery，API 直观，且支持实时更新。
使用场景：问卷得分汇总、多选项占比、时间序列录入后的折线图等。
立即学习“前端免费学习笔记（深入）”；
- 引入 Chart.js：
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> - 准备一个
<canvas id="chart"></canvas>容器，别写成<div> <li>创建 chart 实例时，<code>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 }] }
});
});
表单字段类型和图表数据类型的匹配陷阱
不是所有表单输入都能直接塞进图表。数值类图表（柱状图、折线图）只认数字，但 <input type="text"> 的 .value 永远是字符串；<input type="number"> 空值时返回空字符串，不是 0 或 null。
-
<input type="checkbox">要判断element.checked，不能读.value -
<select multiple></select>得用Array.from(select.selectedOptions).map(o => o.value)，而不是select.value - 日期类字段（
<input type="date">）需转成new Date(value).getTime()才能用于时间轴 - 带单位或符号的输入（如 “85%”、“¥120”）必须用正则清洗：
value.replace(/[^-\d.]/g, '')
移动端表单提交后图表不显示或错位
主要出在 canvas 渲染时机和尺寸适配。Canvas 初始化后若容器宽高为 0，Chart.js 会画出空白；iOS Safari 对 resize 事件响应滞后，导致图表拉伸变形。
- 不要依赖 CSS 设置
<canvas></canvas>宽高，Chart.js 默认用width/height属性，设为100%会失效 - 初始化 chart 前，手动触发一次重绘：
ctx.canvas.width = ctx.canvas.offsetWidth; ctx.canvas.height = ctx.canvas.offsetHeight; - 对响应式图表，监听
window.matchMedia('(max-width: 768px)')或用ResizeObserver替代resize事件 - 避免在
input事件中高频更新图表，加个setTimeout防抖，不然 iOS 键盘弹起时卡顿明显
