用 chart.js 实时渲染投票柱状图应调用 update() 方法更新数据，避免重复初始化；初始化时保存实例引用，直接修改 data.labels 和 data.datasets[0].data 后调用 update('active')，可保留悬停效果并实现平滑动画。
用 Chart.js 实时渲染投票柱状图，不刷新页面
直接改 DOM 再重绘图表比重新初始化快得多，Chart.js 的 update() 方法是核心。别每次选票变都 new Chart()，内存和渲染开销大，还容易卡顿。
常见错误：监听到新投票后，删掉旧 <canvas></canvas>、重建节点、再 new 一次实例——这会丢掉动画状态，且触发重排。
- 初始化时保存
chart实例引用，比如let myChart = new Chart(...) - 后端返回新统计数据（如
{ "选项A": 42, "选项B": 29 }）后，用myChart.data.labels和myChart.data.datasets[0].data直接赋值 - 调用
myChart.update('active')，传'active'可保留悬停高亮效果 - 若需平滑过渡，确保
options.animation.animateRotate和animateScale为true（默认开启）
前端轮询还是 WebSocket？看并发量和延迟要求
小范围投票（setInterval + fetch 轮询足够；但每秒查一次后端接口，后端压力小，前端也好控制。超百人活跃或要求毫秒级同步，必须换 WebSocket。
轮询容易踩的坑：fetch 请求没加 cache: 'no-cache'，浏览器缓存响应导致数据“不动”；或者没做请求节流，用户切页又切回来，多个定时器叠在一起发请求。
- 轮询示例：用
setTimeout替代setInterval，每次成功响应后再设下一次，避免堆积 - WebSocket 连接建立后，监听
message事件，收到数据直接调用图表update()，无需解析 URL 或参数 - 务必监听
onclose并自动重连，否则网络抖动后图表就“冻住”了 - 后端若用 Node.js，
ws库比Socket.IO更轻量，少一层兼容性包袱
fetch 返回 JSON 失败？检查 Content-Type 和 CORS
本地双击打开 HTML 文件（file:// 协议）时，fetch 会因跨域被浏览器拦截，控制台报 Failed to fetch，但没具体提示——这是最常被忽略的环境问题。
另一个高频错误：后端返回的是 text/plain 类型的 JSON 字符串，response.json() 就会抛 Unexpected token 错误，而不是你想象中的“数据格式错”。
- 开发阶段用
http-server或live-server启一个本地 HTTP 服务，避开file://限制 - 后端响应头必须含
Content-Type: application/json，Node/Express 里用res.json()而非res.send() -
fetch后先判断response.ok，再调.json()，否则 500 错误会进catch但看不出是服务端崩了还是解析失败 - 若后端不能配 CORS，临时用浏览器插件（如 Moesif Origin Cors Changer）绕过，仅限调试
移动端柱状图文字挤成一团？用 ticks.maxRotation 和 padding
手机横屏看投票结果，X 轴选项名一长就重叠，Chart.js 默认不自动适配，得手动干预。别只调 maxRotation，不配 minRotation 和 padding，文字还是会糊。
更隐蔽的问题：iOS Safari 对 canvas 的 DPR 处理异常，图表在 iPhone 上模糊，其实是像素比没对齐。
- X 轴文字强制竖排：
ticks: { maxRotation: 90, minRotation: 90 }，配合padding: 20防遮挡 - 移动端启用响应式：
responsive: true, maintainAspectRatio: false，否则高度被锁死 - 修复模糊：创建 canvas 前获取
window.devicePixelRatio，手动设置canvas.width/canvas.height为两倍，并用 CSS 缩放回 100% - 真机测试时关掉“缩放字体大小”系统设置，否则 iOS 会偷偷放大 canvas 文字导致错位
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
