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:
@@ -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,
|
||||
}}
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user