Chart.js 是渲染健康数据折线图的最优解，因其内置响应式、时间轴支持、空值与单位自动处理；需用 ISO 8601 时间格式、双 Y 轴正确配对、localStorage 安全存取及 devicePixelRatio 适配。
用 Chart.js 快速渲染健康数据折线图，别碰原生 SVG 手绘
直接上 Chart.js 是最省心的选择——它内置响应式、支持时间轴、自动处理空值和单位换算，比硬写 <svg></svg> 或用 D3.js 少掉至少三类坑。健康数据（如心率、血氧、步数）天然带时间戳，Chart.js 的 time 类型 x 轴开箱即用。
实操建议：
- 引入时优先用 CDN：
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>，避免本地打包版本不一致导致ticks.source或adapters.date失效 - x 轴必须设为
type: 'time'，且数据点的time字段要用 ISO 8601 格式（如"2024-05-20T08:30:00"），传毫秒时间戳容易在时区转换时偏移 8 小时 - 多指标共存时，用
spanGaps: true避免某天数据缺失就断成两截；但别开fill: true渲染心率区域图——生理值没有“负向意义”，填色反而干扰趋势判断
血压数据用双 Y 轴时，scaleID 和 axis 必须手动配对
收缩压（Systolic）和舒张压（Diastolic）数值范围不同（常为 90–160 vs 60–100），强行共用 Y 轴会压缩细节。双 Y 轴不是加个配置就行，错配 scaleID 会导致线条画到画布外或刻度全乱。
关键点：
- 左侧 Y 轴定义为
id: 'y'，右侧必须显式声明id: 'y1'，并在对应数据集里写死yAxisID: 'y1' - 两个轴的
position值不能都写'left'，右侧必须是'right'；漏写这句，浏览器不会报错，但第二条线永远贴左边缘 - 别依赖
beginAtZero: false自动缩放——血压低于 90 或高于 160 属常见异常，应设min/max固定区间（如收缩压min: 80, max: 200），否则某天数据全在 110–120 区间，图表会挤成一条线
localStorage 存健康数据前，先做 JSON.stringify() + 时间戳校验
用户离线记录晨脉、体重等，靠 localStorage 暂存没问题，但直接 setItem('hr', hrData) 会把对象转成 [object Object] 字符串，取出来就是 undefined。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
安全写法：
- 存之前必过
JSON.stringify()，取出来立刻JSON.parse()，并用try/catch包裹——用户手动改过 localStorage 内容时，解析失败很常见 - 每条记录附加
timestamp字段（用Date.now()），读取后过滤掉超过 30 天的数据，避免长期积累拖慢页面初始化 - 别存原始传感器 raw 值（如光电容积脉搏波 PPG 波形），只存聚合后指标（如 “静息心率：62 bpm”），否则单次存 10KB+，iOS Safari 的 localStorage 限额（约 5MB）几周就满
响应式布局下，devicePixelRatio 不处理会导致图表模糊
在 iPhone 或高分屏安卓机上，Chart.js 默认按 CSS 像素渲染，实际物理像素翻倍，线条发虚、文字锯齿——这不是代码 bug，是 Canvas 渲染没适配设备像素比。
修复动作必须写在初始化前：
- 获取
window.devicePixelRatio，乘到 canvas 的width/height属性上（不是 style），再调用ctx.scale(ratio, ratio) - 别只改 canvas DOM 属性而忘了重设
chart.canvas.width和chart.canvas.height，否则 resize 后图表被拉伸变形 - 这个逻辑要放在
new Chart()之前，放在resize回调里补救已经晚了——模糊帧已绘制
健康数据页的复杂点不在图表本身，而在时间精度、存储鲁棒性和屏幕适配这三处。少一个，用户就可能把异常值当波动、把模糊图当视力下降、把空白页当程序崩溃。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
