'2025-01-01','cents'=>123456], …]; * $ckLabel = '招商银行'; * $ckKind = 'asset'; // 'asset' 红 / 'debt' 绿(**A 股口径:涨红跌绿**) * $ckWidth = 260; * echo chart_line($ckSeries, $ckLabel, $ckKind, $ckWidth); * * ⚠️ 颜色按**中式财务习惯**:金额变多 = 红,变少 = 绿(与 A 股一致)。 * 这是项目里已经定下的口径(见 Ledger 的 led-asset/led-debt 配色), * 改成欧美口径(涨绿跌红)会让这个页面和账目表对不上。 */ /** * 把一串「日期 → 分值」画成一条折线。 * * @param array $series ['date'=>'Y-m-d','cents'=>int] 列表,按时间正序;空数组返回 '' * @param string $label 图例上的名字 * @param string $kind 'asset' | 'debt'(只影响配色) * @param int $width 画布宽(高度按 3:1 推) * @param bool $showVal 是否在两端标出金额 * @return string SVG(可直接 echo) */ function chart_line(array $series, string $label, string $kind = 'asset', int $width = 260, bool $showVal = true): string { $pts = []; foreach ($series as $p) { // ⚠️ 取值的键要兼容两种数据源(这里曾是真 bug 的现场): // · entrySeries() / 盘点历史 → 'cents' // · Ledger::timeline() → 'net'(净资产)/ 'asset' / 'debt' // 只认 'cents' 的话,**总资产图会把每个点都读成 0** —— 图上线是一条 // 贴着 0 的平线,看起来像"数据全是 0"(用户 2026-10-04 第 12 批 #5 // 原话:「上面那个图,如果是总资产的变化,那么不应该是 0 啊」)。 $v = $p['cents'] ?? $p['net'] ?? $p['asset'] ?? 0; $pts[] = ['d' => (string)($p['date'] ?? ''), 'v' => (int)$v]; } if (!$pts) { return ''; } $w = max(120, $width); $h = (int)round($w / 3.2); // 内边距:左边留给"最高/最低"标签,下边留给日期,上边留给数值标 $padL = 6; $padR = 6; $padT = 14; $padB = 16; $iw = $w - $padL - $padR; $ih = $h - $padT - $padB; $vals = array_column($pts, 'v'); $min = min($vals); $max = max($vals); // ⚠️ 只有一个点、或所有值相同 → max==min,除零。 // 此时把线画在**中间**(比贴底好:贴底看起来像"跌到 0 了")。 $span = $max - $min; $flat = $span <= 0; if ($flat) { $span = 1; } $n = count($pts); $xy = []; foreach ($pts as $i => $p) { $x = $n === 1 ? ($padL + $iw / 2) : ($padL + $iw * $i / ($n - 1)); $ratio = $flat ? 0.5 : (($p['v'] - $min) / $span); $y = $padT + $ih * (1 - $ratio); $xy[] = [round($x, 2), round($y, 2)]; } $isDebt = $kind === 'debt'; // 中式财务口径:资产涨=红、负债涨=绿(负债变多是"好"的方向相反,同样用绿表示"更多") $stroke = $isDebt ? '#1F7A4D' : '#B0342C'; $fill = $isDebt ? 'rgba(31,122,77,.10)' : 'rgba(176,52,44,.10)'; $poly = []; foreach ($xy as $p) { $poly[] = $p[0] . ',' . $p[1]; } $polyStr = implode(' ', $poly); // 面积:从线走一遍再回到基线 —— 让"变化"比一条细线更醒目 $areaStr = ''; if ($n > 1) { $base = $padT + $ih; $areaStr = $padL . ',' . $base . ' ' . $polyStr . ' ' . ($padL + $iw) . ',' . $base; } $out = ''; // 基线(0 或最低值那一条)—— 让图有个水平参照 $out .= ''; if ($areaStr !== '') { $out .= ''; } if ($n === 1) { $out .= ''; } else { $out .= ''; // 每个盘点点一个小圆点:有几处转折要看得出来 foreach ($xy as $p) { $out .= ''; } } if ($showVal && $n > 0) { // 首尾各标一个数值:光看形状不知道"多少" $first = $pts[0]; $last = $pts[$n - 1]; $fy = max(9, $xy[0][1] - 6); $ly = max(9, $xy[$n - 1][1] - 6); $out .= '' . e(\App\Ledger::money($first['v'])) . ''; if ($n > 1) { $out .= '' . e(\App\Ledger::money($last['v'])) . ''; } } // 日期:首尾各一个(中间的点太密,标了反而糊) $out .= '' . e((string)$pts[0]['d']) . ''; if ($n > 1) { $out .= '' . e((string)$pts[$n - 1]['d']) . ''; } $out .= ''; return $out; } /** * **多条线**的折线图(v24 第 11 批 #7)。 * * 用户原话:「图下面的条目不用显示详情,只需要显示每个账目的颜色, * 就是说哪个颜色代表哪个账目,就可以了。」 * * 所以把原来"每条账目一张小图"合并成**一张图**:每条账目一条线、各自一个颜色, * 颜色由图例给出(Ledger::legendColor())。这样一眼能比较"哪条在涨、哪条在跌", * 而不是逐张小图去脑补 —— 那是用户嫌"显示详情"没必要的真正原因。 * * ⚠️ 时间轴取所有曲线日期的**并集**,每条线在自己的日期上有值、 * 没有的日期就"沿用上一次的值"(阶梯式),否则线会断成一段段虚线。 * 这与 Ledger::timeline() 的口径一致:金额是"状态量",不是"发生量"。 * * @param array $charts Ledger::charts() 的返回值:[['entry'=>…, 'color'=>…, 'series'=>…], …] * @param int $width 画布宽 * @return string SVG(无可画内容时返回 '') */ function chart_multi(array $charts, int $width = 900): string { if (!$charts) { return ''; } // ---- 时间轴:所有日期的并集(升序)---- $dateSet = []; foreach ($charts as $ch) { foreach ((array)($ch['series'] ?? []) as $p) { $d = (string)($p['date'] ?? ''); if ($d !== '') { $dateSet[$d] = true; } } } $dates = array_keys($dateSet); sort($dates); $n = count($dates); if ($n === 0) { return ''; } // ---- 值域:所有曲线所有点的 min/max(含 0,让"从 0 涨起来"看得出来)---- $vals = [0]; foreach ($charts as $ch) { foreach ((array)($ch['series'] ?? []) as $p) { $vals[] = (int)($p['cents'] ?? 0); } } $min = min($vals); $max = max($vals); $span = $max - $min; if ($span <= 0) { $span = 1; } $w = max(200, $width); $h = (int)round($w / 3.6); $padL = 8; $padR = 8; $padT = 16; $padB = 18; $iw = $w - $padL - $padR; $ih = $h - $padT - $padB; $idxOf = array_flip($dates); // 日期 => 横轴序号 $out = ''; // 底板与基线 $out .= ''; foreach ($charts as $ch) { $series = (array)($ch['series'] ?? []); if (!$series) { continue; } $color = (string)($ch['color'] ?? '#B0342C'); // v24 第 23 批 用户第 2 条:给每条线标上**它属于哪个类别**。 // ⚠️ 标在服务端(而不是让前端去认图例文字):图例上的名字是 // `$en['title']`(用户自己输入的,可能重复、可能含空格), // 拿它当筛选键迟早对不上;类别 key 是封闭枚举,稳定。 // ⚠️ 这是纯粹的**标注**,线上图画法一字未改 —— 同一份数据多次渲染要完全一致, // 所以属性值只允许是 kind 本身,不能拼时间戳之类会让输出漂移的东西。 $ck = (string)(($ch['entry']['kind'] ?? '')); // 把每个日期上的值铺齐(沿用上一次),再转成坐标 $pts = []; $last = null; foreach ($dates as $d) { // 取"这一天或之前最后一次的值"(状态量口径,与 timeline 一致) foreach ($series as $p) { if ((string)($p['date'] ?? '') <= $d) { $last = (int)($p['cents'] ?? 0); } else { break; } } if ($last === null) { continue; } // 这条线还没开始(创建日之前) $i = $idxOf[$d]; $x = $n === 1 ? ($padL + $iw / 2) : ($padL + $iw * $i / ($n - 1)); $ratio = ($last - $min) / $span; $y = $padT + $ih * (1 - $ratio); $pts[] = [round($x, 2), round($y, 2)]; } if (!$pts) { continue; } // v24 第 23 批 用户第 2 条:整条线包一个 ,把"这条线属于哪个类别"写在上面。 // 前端筛选时按 `[data-ck-line]` 显隐,**不动几何**(几何一变,图就看着"跳"了)。 // ⚠️ 只在有 kind 时才包 —— 拼出 `data-ck-line=""` 会让"选中空类别"的 // 选择器意外命中所有线(下一次改这段的人很容易踩)。 $open = $ck !== '' ? '' : ''; $close = $ck !== '' ? '' : ''; if (count($pts) === 1) { $out .= $open . '' . $close; } else { $poly = []; foreach ($pts as $p) { $poly[] = $p[0] . ',' . $p[1]; } $out .= $open . ''; // 每段转折点一个小点:有几个盘要点一眼看得出 foreach ($pts as $p) { $out .= ''; } $out .= $close; } } // 首尾日期(中间太密,标了反糊) $out .= '' . e($dates[0]) . ''; if ($n > 1) { $out .= '' . e($dates[$n - 1]) . ''; } // 右上角标一下最高/最低,否则不知道纵轴量级 $out .= '' . e(\App\Ledger::money($max)) . ' / ' . e(\App\Ledger::money($min)) . ''; $out .= ''; return $out; }