金融图表

面向金融仪表盘的专用渲染器，可与主K线图并列使用。

可用的渲染器

渲染器	适用场景
SparklineRenderer	紧凑的行情条、自选列表、KPI 单元格。
GaugeRenderer	单一数值的仪表——市场情绪、风险、敞口。
HeatmapRenderer	板块 / 资产相关性矩阵。
DepthChartRenderer	L2 订单簿深度，累计买单 / 卖单。
WaterfallRenderer	盈亏归因、可累加的资金流。
EquityCurveRenderer	带回撤阴影的回测权益曲线。
FinanceCrosshair	用于金融图表的多坐标轴十字光标。

权益曲线示例

可与分析模块中的回测器搭配使用：

import { Backtester } from '@tradecanvas/analytics'
import { EquityCurveRenderer } from '@tradecanvas/chart'

const result = new Backtester({ initialCash: 10_000 }).run(bars, myStrategy)

const renderer = new EquityCurveRenderer(canvas.getContext('2d')!)
renderer.render(result.equityCurve)

绩效仪表盘

PerformanceDashboard 把这些金融渲染器组合成一份带主题的策略报告—— 顶部的关键统计条、权益曲线、水下回撤面板，以及按日历排列的月度收益热力图—— 直接由回测结果生成。

import { Backtester } from '@tradecanvas/analytics'
import { PerformanceDashboard } from '@tradecanvas/chart'

const result = new Backtester({ initialCash: 10_000 }).run(bars, myStrategy)

const dash = new PerformanceDashboard(document.getElementById('report')!, {
  result,            // any { equityCurve, metrics } — Backtester output fits
  theme: 'dark',
  title: 'SMA Crossover',
  subtitle: 'BTC/USDT · 1h · 2023',
})

// later: dash.update(newResult) · dash.setTheme('light') · dash.destroy()

如果需要自定义布局，相关的纯计算函数也已导出： computeMonthlyReturns、computeDrawdownCurve、 toEquityPoints 和 selectKeyStats。

热力图布局

HeatmapLayout 可帮助你为任意指标矩阵计算方形网格和颜色刻度。