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
+107
-37
@@ -50,64 +50,134 @@ func PctText(part, total int64) string {
|
||||
return strconv.FormatFloat(float64(part)/float64(total)*100, 'f', 1, 64)
|
||||
}
|
||||
|
||||
// ratio 把数值序列归一化到 [0,1]，空序列或全零时返回全 0（不会出现除零）。
|
||||
func ratioOf(values []int64) ([]float64, float64) {
|
||||
maxV := int64(0)
|
||||
for _, v := range values {
|
||||
if v > maxV {
|
||||
maxV = v
|
||||
}
|
||||
}
|
||||
out := make([]float64, len(values))
|
||||
if maxV == 0 {
|
||||
return out, 0
|
||||
}
|
||||
for i, v := range values {
|
||||
out[i] = float64(v) / float64(maxV)
|
||||
}
|
||||
return out, float64(maxV)
|
||||
// Tick 是折线纵轴上的一条刻度。
|
||||
type Tick struct {
|
||||
// Y 是 viewBox 内的纵坐标（"%.1f"），直接填 <line> 的 y1/y2。
|
||||
Y string
|
||||
// TopPct 是同一位置换算成画布高度的百分比，用来定位 SVG 外的 HTML 标签。
|
||||
TopPct string
|
||||
// Label 是带千分位的数值文本。
|
||||
Label string
|
||||
// Base 标记值为 0 的那条基线，模板里画得实一些。
|
||||
Base bool
|
||||
}
|
||||
|
||||
// Polyline 生成折线图的 points 属性值。
|
||||
// LineChart 是一条折线渲染所需的全部几何量。
|
||||
//
|
||||
// 坐标、面积路径、纵轴刻度必须在同一次调用里用同一个上限算出来：分几次算，
|
||||
// 各自按自己看到的峰值归一化，就会出现「刻度写着峰值 40、线却顶到 30 那一格」
|
||||
// 这种自相矛盾的图。
|
||||
type LineChart struct {
|
||||
HasData bool
|
||||
// Max 是纵轴上限（向上取整到好看的刻度），不是数据峰值。
|
||||
Max int64
|
||||
Points string
|
||||
Area string
|
||||
Ticks []Tick
|
||||
}
|
||||
|
||||
// NewLineChart 计算折线、面积与纵轴刻度。
|
||||
//
|
||||
// w/h 是 viewBox 尺寸，padTop/padBottom 给顶部留呼吸空间、底部留给轴标签。
|
||||
// 返回 "x1,y1 x2,y2 ..."；空数据返回空串（模板里 SVG 折线自然消失）。
|
||||
func Polyline(values []int64, w, h, padTop, padBottom float64) string {
|
||||
n := len(values)
|
||||
if n == 0 {
|
||||
return ""
|
||||
//
|
||||
// 纵轴上限取 niceMax(峰值) 而不是峰值本身：峰值正好压在顶格里时，读者没法判断
|
||||
// 那是确切的数还是被裁掉的数。取整之后顶部留白固定，三条刻度
|
||||
// （上限 / 一半 / 0）又都是整数和读数好算的数。
|
||||
func NewLineChart(values []int64, w, h, padTop, padBottom float64) LineChart {
|
||||
peak := int64(0)
|
||||
for _, v := range values {
|
||||
if v > peak {
|
||||
peak = v
|
||||
}
|
||||
}
|
||||
ratios, _ := ratioOf(values)
|
||||
maxV := niceMax(peak)
|
||||
|
||||
usable := h - padTop - padBottom
|
||||
if usable < 1 {
|
||||
usable = 1
|
||||
}
|
||||
// yFor 把数值映射到纵坐标：满格贴 padTop，0 落在 h-padBottom。
|
||||
yFor := func(v int64) float64 {
|
||||
return padTop + usable - float64(v)/float64(maxV)*usable
|
||||
}
|
||||
|
||||
c := LineChart{HasData: peak > 0 && len(values) > 0, Max: maxV}
|
||||
|
||||
// 刻度自上而下：上限 / 一半 / 基线。maxV 恒为偶数，一半必是整数。
|
||||
for _, v := range []int64{maxV, maxV / 2, 0} {
|
||||
y := yFor(v)
|
||||
c.Ticks = append(c.Ticks, Tick{
|
||||
Y: strconv.FormatFloat(y, 'f', 1, 64),
|
||||
TopPct: strconv.FormatFloat(y/h*100, 'f', 3, 64),
|
||||
Label: NumInt(v),
|
||||
Base: v == 0,
|
||||
})
|
||||
}
|
||||
|
||||
// 全零或空数据只出轴、不出线：一条贴着基线的直线看起来像「数据都是 0」，
|
||||
// 而真实情况往往是「这几天确实没人提问」，两者在页面上必须能区分开。
|
||||
if !c.HasData {
|
||||
return c
|
||||
}
|
||||
|
||||
var b strings.Builder
|
||||
for i, r := range ratios {
|
||||
for i, v := range values {
|
||||
var x float64
|
||||
if n == 1 {
|
||||
if len(values) == 1 {
|
||||
x = w / 2
|
||||
} else {
|
||||
x = float64(i) * w / float64(n-1)
|
||||
x = float64(i) * w / float64(len(values)-1)
|
||||
}
|
||||
y := padTop + usable - r*usable
|
||||
if i > 0 {
|
||||
b.WriteByte(' ')
|
||||
}
|
||||
fmt.Fprintf(&b, "%.1f,%.1f", x, y)
|
||||
fmt.Fprintf(&b, "%.1f,%.1f", x, yFor(v))
|
||||
}
|
||||
return b.String()
|
||||
c.Points = b.String()
|
||||
// 面积沿基线闭合，不落到 viewBox 底边：底边以下是留给轴标签的留白，
|
||||
// 填充溢过去会和基线刻度线错开一截。
|
||||
base := strconv.FormatFloat(yFor(0), 'f', 1, 64)
|
||||
c.Area = "M0," + base + " L" +
|
||||
strings.ReplaceAll(c.Points, " ", " L") +
|
||||
" L" + strconv.FormatFloat(w, 'f', 1, 64) + "," + base + " Z"
|
||||
return c
|
||||
}
|
||||
|
||||
// AreaPath 把同一组数值渲染成闭合的面积路径，用于折线下方的浅色填充。
|
||||
func AreaPath(values []int64, w, h, padTop, padBottom float64) string {
|
||||
points := Polyline(values, w, h, padTop, padBottom)
|
||||
if points == "" {
|
||||
return ""
|
||||
// niceMax 把峰值向上取整到好看的刻度上限。
|
||||
//
|
||||
// 两头都有限制：上限必须是偶数，中间那条刻度（上限的一半）才是整数 ——
|
||||
// 「7.5 次提问」这种刻度只会让人以为统计口径有问题；上限又不能离开峰值太远，
|
||||
// 否则折线整条压在图上三分之一的位置，看不出起伏。
|
||||
// 因此阶梯是 1 / 1.5 / 2 / 3 / 4 / 6 / 8 × 10^n，其中 1.5 只在 mag≥100 时参与：
|
||||
// 那时 1.5×mag（150、1500）本身和它的一半都是整数，小量级下会算出 15/7.5 这种。
|
||||
func niceMax(v int64) int64 {
|
||||
if v < 2 {
|
||||
return 2
|
||||
}
|
||||
return "M0," + strconv.FormatFloat(h, 'f', 1, 64) + " L" +
|
||||
strings.ReplaceAll(points, " ", " L") +
|
||||
" L" + strconv.FormatFloat(w, 'f', 1, 64) + "," + strconv.FormatFloat(h, 'f', 1, 64) + " Z"
|
||||
mag := int64(1)
|
||||
for mag*10 <= v {
|
||||
mag *= 10
|
||||
}
|
||||
|
||||
var cands []int64
|
||||
if mag == 1 {
|
||||
// 个位数阶梯只能给偶数，否则中间刻度是 x.5
|
||||
cands = []int64{2, 4, 6, 8, 10}
|
||||
} else {
|
||||
cands = []int64{mag}
|
||||
if mag >= 100 {
|
||||
cands = append(cands, mag*3/2)
|
||||
}
|
||||
for _, m := range []int64{2, 3, 4, 6, 8, 10} {
|
||||
cands = append(cands, m*mag)
|
||||
}
|
||||
}
|
||||
for _, n := range cands {
|
||||
if n >= v {
|
||||
return n
|
||||
}
|
||||
}
|
||||
return 10 * mag
|
||||
}
|
||||
|
||||
// HeatLevel 把热力图的一个格子映射到 0-4 的强度档位（0 表示没有提问）。
|
||||
|
||||
Reference in New Issue
Block a user