📈 修正趋势图整数刻度对齐
This commit is contained in:
@@ -88,6 +88,16 @@ const INERTIA_DECAY_PER_120HZ_FRAME = 0.96
|
|||||||
const INERTIA_STOP_VELOCITY = 0.01
|
const INERTIA_STOP_VELOCITY = 0.01
|
||||||
const HOVER_EASE_PER_120HZ_FRAME = 0.34
|
const HOVER_EASE_PER_120HZ_FRAME = 0.34
|
||||||
const HOVER_SNAP_DISTANCE = 0.2
|
const HOVER_SNAP_DISTANCE = 0.2
|
||||||
|
const getYAxisTicks = (rawMax: number) => {
|
||||||
|
const roundedMax = Math.max(1, Math.ceil(rawMax))
|
||||||
|
if (roundedMax <= 4) {
|
||||||
|
return Array.from({ length: roundedMax + 1 }, (_, index) => roundedMax - index)
|
||||||
|
}
|
||||||
|
|
||||||
|
const step = Math.ceil(roundedMax / 4)
|
||||||
|
const scaleMax = step * Math.ceil(roundedMax / step)
|
||||||
|
return Array.from({ length: scaleMax / step + 1 }, (_, index) => scaleMax - index * step)
|
||||||
|
}
|
||||||
|
|
||||||
const panelClass = computed(() =>
|
const panelClass = computed(() =>
|
||||||
props.isDarkMode
|
props.isDarkMode
|
||||||
@@ -167,7 +177,8 @@ const draw = (timestamp = performance.now()) => {
|
|||||||
0,
|
0,
|
||||||
...visible.flatMap((row) => [Number(row.downloads || 0), Number(row.uploads || 0)])
|
...visible.flatMap((row) => [Number(row.downloads || 0), Number(row.uploads || 0)])
|
||||||
)
|
)
|
||||||
const max = rawMax <= 2 ? 3 : Math.ceil(rawMax / 3) * 3
|
const yTicks = getYAxisTicks(rawMax)
|
||||||
|
const max = yTicks[0]
|
||||||
const muted = props.isDarkMode ? '#9ca3af' : '#6b7280'
|
const muted = props.isDarkMode ? '#9ca3af' : '#6b7280'
|
||||||
const border = props.isDarkMode ? '#374151' : '#e5e7eb'
|
const border = props.isDarkMode ? '#374151' : '#e5e7eb'
|
||||||
const downloadColor = props.isDarkMode ? '#8fb6c5' : '#5f8fa3'
|
const downloadColor = props.isDarkMode ? '#8fb6c5' : '#5f8fa3'
|
||||||
@@ -177,14 +188,15 @@ const draw = (timestamp = performance.now()) => {
|
|||||||
ctx.lineWidth = 1
|
ctx.lineWidth = 1
|
||||||
ctx.fillStyle = muted
|
ctx.fillStyle = muted
|
||||||
ctx.font = '12px system-ui'
|
ctx.font = '12px system-ui'
|
||||||
for (let i = 0; i < 4; i += 1) {
|
const yTickCount = Math.max(1, yTicks.length - 1)
|
||||||
const y = padTop + (height * i) / 3
|
yTicks.forEach((tick, index) => {
|
||||||
|
const y = padTop + (height * index) / yTickCount
|
||||||
ctx.beginPath()
|
ctx.beginPath()
|
||||||
ctx.moveTo(padLeft, y)
|
ctx.moveTo(padLeft, y)
|
||||||
ctx.lineTo(padLeft + width, y)
|
ctx.lineTo(padLeft + width, y)
|
||||||
ctx.stroke()
|
ctx.stroke()
|
||||||
ctx.fillText(String(Math.round(max * (1 - i / 3))), 4, y + 4)
|
ctx.fillText(String(tick), 4, y + 4)
|
||||||
}
|
})
|
||||||
|
|
||||||
const denominator = Math.max(1, windowSize.value - 1)
|
const denominator = Math.max(1, windowSize.value - 1)
|
||||||
const plotLeft = padLeft
|
const plotLeft = padLeft
|
||||||
|
|||||||
Reference in New Issue
Block a user