用chart.js做家庭能耗统计页的关键是数据组织、时间对齐和单位统一：月度用电用yyyy-mm字符串作x轴，多能源分独立dataset并标注单位，本地存储加容错校验，移动端设responsive:true和autoskip，并按小时聚合分析峰谷。
直接用 Chart.js + 纯 HTML/JS 就能做出可交互、响应式、无需后端的家庭能耗统计页，关键不是“怎么画图”，而是数据怎么组织、时间维度怎么对齐、单位怎么统一。
用 Chart.js 渲染月度用电量折线图
家庭能耗最常看的是「本月 vs 上月 vs 去年同月」对比。别用日期字符串当 X 轴标签，容易错位；改用标准化的 YYYY-MM 字符串，Chart.js 会自动排序且不翻车。
实操建议：
- 数据源用数组对象，每个对象含
month（如"2024-05"）和kwh（数值，单位统一为 kWh） - 配置
options.scales.x.time.unit = 'month'会触发内部时间解析，但家庭场景简单数据反而容易出错——直接关掉时间轴：type: 'category' - 加个
tooltips.callbacks.label把125.3显示成"125.3 kWh"，避免用户猜单位
多类型能耗（电/气/水）共用同一张柱状图
如果页面要并排显示三种能源，别硬塞进一个 datasets 数组里靠颜色区分——那样无法单独开关图例、也不好加单位说明。
实操建议：
- 每个能源建独立
dataset，label设为"用电"、"用气"、"用水" - 用
stacked: true可看总量，但家庭用户更关心分项对比 → 改用grouped: true（默认行为），并设barPercentage: 0.6防止柱子挤在一起 - 注意单位差异：电是 kWh，气是 m³，水是吨 —— 必须在
tooltip和 Y 轴标题里显式标注，否则图表失去意义
本地存储历史数据避免每次手动填
用户不会天天打开页面输数字，得让数据「留在浏览器里」。别用 localStorage.setItem('data', JSON.stringify(arr)) 就完事——没容错，一报错整个数据就清空。
实操建议：
- 读取时用
try/catch包住JSON.parse()，失败则返回空数组 - 写入前校验数据结构：
Array.isArray(data) && data.every(d => typeof d.month === 'string' && typeof d.kwh === 'number') - 给每条记录加
updated_at时间戳（用Date.now()），方便后续判断是否超 30 天未更新
移动端适配时图表被截断怎么办
常见现象：在手机上打开，柱状图右侧被切掉，或者 X 轴文字叠成一团。根本原因不是 CSS 宽度没设好，而是 Chart.js 默认 canvas 宽高是固定像素值，缩放后失真。
实操建议：
- HTML 中
<canvas id="chart"></canvas>外层包一个带max-width: 100%的<div> <li>初始化时传入 <code>responsive: true和maintainAspectRatio: false，否则高度会被锁死 - X 轴文字太长？用
ticks.maxRotation = 0强制水平，并开启ticks.autoSkip: true自动省略部分标签
真正难的不是画出那根线或那根柱子，而是让用户一眼看出「这个月比上个月多了 23 度电，主要发生在晚上 8 点后」——这需要把原始数据按小时聚合、再叠加峰谷时段标记。那个层面，Chart.js 只是工具，逻辑得自己补全。
