feat(stats): 近 30 天折线补纵轴刻度

原来这条折线只有横轴日期,纵轴没有任何参照:读者看到峰谷不知道自己
在看 3 次还是 300 次的起伏。现在补上三条刻度(上限 / 一半 / 0)加对应
的横向虚线。

纵轴上限取 niceMax(峰值),不是峰值本身。峰值正好压在顶格里时,读者
分不清那到底是确切的数还是被裁掉的数;向上取整到 1/2/1.5/3/4/6/8×10^n
之后顶部留白固定,三条刻度又都是整数和好读的数(1.5 倍只在量级≥100
时参与,否则算出来是 7.5 这种半格)。上限恒为偶数,中间刻度必然是整数。

刻度文字不放进 SVG:viewBox 用 preserveAspectRatio="none" 横向拉伸填满
卡片,里面的文字会跟着被拉扁,窄屏尤其明显。改成左边一列 HTML 标签 +
横向虚线仍在 SVG 里(描边锁 non-scaling-stroke)。列宽靠一份看不见的
「最宽刻度」占位撑开,不写死 em。

同时把 Polyline/AreaPath 收敛成单个 NewLineChart:坐标、面积、刻度必须
共用同一个上限,分两次算就会各按自己看到的峰值归一化,出现刻度和线错开
的图。面积路径改为沿基线闭合,不再漏进轴标签的留白区。

新增 chart_test.go 锁住三条不变式:中间刻度必为整数、上限不离开峰值一倍、
刻度/折线/面积共用上限;另有 0..2000 的穷举检查。
This commit is contained in:
tamakyi
2026-10-24 01:57:36 +08:00
parent 0226956feb
commit cbb8908275
4 changed files with 308 additions and 52 deletions
+2 -3
View File
@@ -232,12 +232,11 @@ func FuncMap() []template.FuncMap {
return string(moderation.StrictnessFor(raw))
},
// 全站数据页的图表辅助:数字格式化 + 折线坐标(见 chart.go)。
// 全站数据页的图表辅助:数字格式化 + 折线几何(见 chart.go)。
// 站点不引前端图表库,柱状 / 环形 / 热力图都用 CSS 画,只有折线需要坐标。
"NumInt": NumInt,
"PctText": PctText,
"Polyline": Polyline,
"AreaPath": AreaPath,
"LineChart": NewLineChart,
"HeatLevel": HeatLevel,
}}
})