用 chart.js 画月度账单柱状图最省事，需 cdn 引入、css 控制 canvas 尺寸、预聚合数据；禁用边框用 borderwidth: 0；月份标签全显设 maxrotation: 0 和 autoskip: false；导出高清 png 需适配 devicepixelratio。
用 Chart.js 快速画出月度账单柱状图，别碰原生 SVG
直接上 Chart.js 是最省事的选择——它不依赖 jQuery，体积小（gzip 后约 20KB），对账单这种静态/半动态数据足够稳。手写 <svg></svg> 或硬套 D3.js 容易卡在坐标换算、轴标签对齐、负数处理这些细节里，反而拖慢进度。
实操建议：
- 从 CDN 引入：在
里加<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> - HTML 中准备一个带
id="expenseChart"的<canvas></canvas>标签，不要设宽高 style，改用 CSS 控制（否则高清屏下模糊） - 账单数据建议按「日期字符串 → 金额」预聚合好，比如
{ "2024-01": 2845, "2024-02": 3120 }，再转成labels和data数组
datasets[0].borderColor 设成透明会出问题？那是没关 borderWidth
想让柱子只有填充色、无边框，不能只设 borderColor: "transparent"——Canvas 渲染时仍会画一笔透明边，可能在某些浏览器（尤其是 Safari）导致柱子边缘发虚或错位。
正确做法是同时清空边框逻辑：
- 设
borderWidth: 0（推荐） - 或设
borderColor: "rgba(0,0,0,0)"+borderWidth: 1（兼容旧版 Chart.js 2.x） - 如果用了
roundedCorners插件，还要额外确认它没偷偷重置borderWidth
月份横轴显示不全？检查 ticks.maxRotation 和 autoSkip
12 个月份并排时，Chart.js 默认会自动跳过部分标签，但有时跳得太多（只剩 1 月、6 月、12 月），或者文字旋转角度太大压住相邻柱子。
关键配置项：
- 加
ticks: { maxRotation: 0, minRotation: 0 }强制水平显示 - 设
autoSkip: false禁用自动跳过（配合maxRotation: 0后，需手动控制字体大小） - 用
font.size缩小字号，比如font: { size: 12 }，避免文字重叠 - 若仍挤不下，改用
category轴的offset: true让标签居中对齐柱子底部
导出 PNG 时金额数字糊了？Canvas 像素比没适配设备
调 chart.toBase64Image() 导出图片，常在 Retina 屏上出现文字锯齿、细线消失——根本原因是 Canvas 的物理像素和 CSS 像素没对齐。
修复步骤（必须按顺序）：
- 创建 chart 前，先读取
window.devicePixelRatio - 给 canvas DOM 元素手动设
width和height属性（不是 style），值为「CSS 宽高 × devicePixelRatio」 - 再调
ctx.scale(devicePixelRatio, devicePixelRatio)缩放绘图上下文 - 最后初始化 chart，并传入
devicePixelRatio: 1阻止 Chart.js 自行缩放
这一步漏掉，导出图在 Mac 或 iPhone 上基本没法用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
