@363045841yyt/klinechart-core 0.8.6 → 0.8.7

package/src/engine/renderers/Indicator/fastk.ts

@@ -1,7 +1,7 @@
 import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
 import { RENDERER_PRIORITY } from '../../../plugin'
 import { resolveThemeColors } from '../../../tokens'
-import { alignToPhysicalPixelCenter } from '../../draw/pixelAlign'
+import { createDashedLineRenderer } from './shared/dashedLines'
 import type { FASTKRenderState } from '../../indicators/fastkState'
 import { createFASTKStateKey, EMPTY_FASTK_STATE } from '../../indicators/fastkState'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
@@ -10,11 +10,11 @@ import { resolveStateKey } from '../../indicators/indicatorMetadata'
 import type { IndicatorScheduler, FASTKSchedulerConfig } from '../../indicators/scheduler'
 import { createFastkScaleRendererPlugin } from './scale/fastk_scale'
 import { calcFASTKData } from '../../indicators/calculators'
-import type { KLineData } from '../../../types/price'
+import { createSingleLineTitleInfo } from './shared/titleInfo'
 
 type LinePoint = { x: number; y: number }
 
-export interface FASTKRendererOptions {
+interface FASTKRendererOptions {
     /** 目标 pane ID（默认 'sub'） */
     paneId?: string
 }
@@ -36,7 +36,7 @@ function getFASTKStateKey(host: PluginHost | null, paneId: string): string | nul
 /**
  * 创建 FASTK 渲染器插件
  */
-export function createFASTKRendererPlugin(options: FASTKRendererOptions = {}): RendererPluginWithHost {
+function createFASTKRendererPlugin(options: FASTKRendererOptions = {}): RendererPluginWithHost {
     const { paneId = 'sub' } = options
     let pluginHost: PluginHost | null = null
 
@@ -49,65 +49,13 @@ export function createFASTKRendererPlugin(options: FASTKRendererOptions = {}): R
     let cachedFASTKPoints: LinePoint[] = []
 
     // 离屏 Canvas 缓存虚线背景线 (80/20)
-    let offscreenCanvas: HTMLCanvasElement | null = null
-    let offscreenCtx: CanvasRenderingContext2D | null = null
-    let cachedDashedLinesKey = ''
+    const dashedLines = createDashedLineRenderer()
 
     function clearLineCache() {
         cachedKey = ''
         cachedFASTKPoints = []
     }
 
-    function getOffscreenCanvas(width: number, height: number): { canvas: HTMLCanvasElement; ctx: CanvasRenderingContext2D } {
-        if (!offscreenCanvas || offscreenCanvas.width !== width || offscreenCanvas.height !== height) {
-            offscreenCanvas = document.createElement('canvas')
-            offscreenCanvas.width = width
-            offscreenCanvas.height = height
-            offscreenCtx = offscreenCanvas.getContext('2d')!
-            cachedDashedLinesKey = ''
-        }
-        return { canvas: offscreenCanvas, ctx: offscreenCtx! }
-    }
-
-    function buildDashedLinesKey(
-        paneWidth: number,
-        paneHeight: number,
-        displayMin: number,
-        displayMax: number,
-        dpr: number
-    ): string {
-        return `${paneWidth}|${paneHeight}|${displayMin.toFixed(4)}|${displayMax.toFixed(4)}|${dpr}`
-    }
-
-    function renderDashedLinesToOffscreen(
-        ctx: CanvasRenderingContext2D,
-        paneWidth: number,
-        paneHeight: number,
-        displayMin: number,
-        displayMax: number,
-        dpr: number
-    ): void {
-        const displayValueRange = displayMax - displayMin || 1
-        const y80 = alignToPhysicalPixelCenter(paneHeight - (80 - displayMin) / displayValueRange * paneHeight, dpr)
-        const y20 = alignToPhysicalPixelCenter(paneHeight - (20 - displayMin) / displayValueRange * paneHeight, dpr)
-
-        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
-        ctx.save()
-        ctx.scale(dpr, dpr)
-
-        ctx.strokeStyle = 'rgba(0, 0, 0, 0.1)'
-        ctx.lineWidth = 1
-        ctx.setLineDash([4, 4])
-        ctx.beginPath()
-        ctx.moveTo(0, y80)
-        ctx.lineTo(paneWidth, y80)
-        ctx.moveTo(0, y20)
-        ctx.lineTo(paneWidth, y20)
-        ctx.stroke()
-
-        ctx.restore()
-    }
-
     function buildFASTKCacheKey(
         range: { start: number; end: number },
         kLineCenters: number[],
@@ -171,20 +119,7 @@ const { ctx, pane, range, scrollLeft, dpr, kLineCenters, lineWebGLSurface } = co
 
             const paneWidth = context.paneWidth
             const paneHeight = pane.height
-            const dashedLinesKey = buildDashedLinesKey(paneWidth, paneHeight, displayMin, displayMax, dpr)
-
-            if (cachedDashedLinesKey !== dashedLinesKey) {
-                cachedDashedLinesKey = dashedLinesKey
-                const { ctx: offCtx } = getOffscreenCanvas(
-                    Math.ceil(paneWidth * dpr),
-                    Math.ceil(paneHeight * dpr)
-                )
-                renderDashedLinesToOffscreen(offCtx, paneWidth, paneHeight, displayMin, displayMax, dpr)
-            }
-
-            if (offscreenCanvas) {
-                ctx.drawImage(offscreenCanvas, 0, 0, paneWidth, paneHeight)
-            }
+            dashedLines.render(ctx, paneWidth, paneHeight, displayMin, displayMax, dpr)
 
             // 确定绘制范围
             const drawStart = Math.max(range.start, params.period - 1)
@@ -281,30 +216,12 @@ function drawFASTKLineWithCanvas2D(
 /**
  * 获取 FASTK 标题信息（供 paneTitle 使用）
  */
-export function getFASTKTitleInfo(
-    _data: KLineData[],
-    index: number | null,
-    params: Record<string, number | boolean | string>,
-    pluginHost: PluginHost,
-    paneId: string,
-): { name: string; params: number[]; values: Array<{ label: string; value: number; color: string }> } | null {
-    if (index === null) return null
-    const period = (params.period as number) ?? 9
-    const colors = resolveThemeColors('light')
-    const state = pluginHost.getSharedState<FASTKRenderState>(createFASTKStateKey(paneId))
-    if (!state) return null
-
-    const fastk = state.series[index]
-    if (fastk === undefined) return null
-
-    return {
-        name: 'FASTK',
-        params: [period],
-        values: [
-            { label: 'FASTK', value: fastk, color: colors.kdj.k },
-        ],
-    }
-}
+const getFASTKTitleInfo = createSingleLineTitleInfo({
+    createStateKey: createFASTKStateKey,
+    name: 'FASTK',
+    defaultPeriod: 9,
+    getColor: (colors) => colors.kdj.k,
+})
 
 @Indicator({
     name: 'fastk',

package/src/engine/renderers/Indicator/fib.ts

@@ -34,7 +34,7 @@ function getFibStateKey(host: PluginHost | null, paneId: string): string | null
     return resolveStateKey(meta.stateKey, paneId)
 }
 
-export function createFibRendererPlugin(options: { paneId?: string } = {}): RendererPluginWithHost {
+function createFibRendererPlugin(options: { paneId?: string } = {}): RendererPluginWithHost {
     const { paneId = 'main' } = options
     let pluginHost: PluginHost | null = null
 
@@ -126,7 +126,7 @@ function drawLine(ctx: CanvasRenderingContext2D, pts: Point[], color: string): v
     ctx.stroke()
 }
 
-export const getFibTitleInfo: GetTitleInfoFn = (_data, index, _params, host, paneId) => {
+const getFibTitleInfo: GetTitleInfoFn = (_data, index, _params, host, paneId) => {
     if (index === null || index < 0) return null
 
     const stateKey = createFibStateKey(paneId)

package/src/engine/renderers/Indicator/hma.ts

@@ -1,10 +1,10 @@
 import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
-import type { KLineData } from '../../../types/price'
+import { createSingleLineTitleInfo } from './shared/titleInfo'
 import { RENDERER_PRIORITY } from '../../../plugin'
 import type { HMARenderState } from '../../indicators/hmaState'
 import { createHMAStateKey, EMPTY_HMA_STATE } from '../../indicators/hmaState'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
-import { resolveStateKey, type TitleInfo, type TitleValueItem, type GetTitleInfoFn } from '../../indicators/indicatorMetadata'
+import { resolveStateKey } from '../../indicators/indicatorMetadata'
 import { createSparseVisibleStateComposer } from '../../indicators/visibleStateComposers'
 import type { IndicatorScheduler, HMASchedulerConfig } from '../../indicators/scheduler'
 import { calcHMAData } from '../../indicators/calculators'
@@ -13,7 +13,7 @@ const HMA_COLOR = '#f43f5e'
 
 type Point = { x: number; y: number }
 
-export interface HMARendererOptions {
+interface HMARendererOptions {
     paneId?: string
 }
 
@@ -31,7 +31,7 @@ function getHMAStateKey(host: PluginHost | null, paneId: string): string | null
     return resolveStateKey(meta.stateKey, paneId)
 }
 
-export function createHMARendererPlugin(options: HMARendererOptions = {}): RendererPluginWithHost {
+function createHMARendererPlugin(options: HMARendererOptions = {}): RendererPluginWithHost {
     const { paneId = 'main' } = options
     let pluginHost: PluginHost | null = null
 
@@ -122,28 +122,7 @@ export function createHMARendererPlugin(options: HMARendererOptions = {}): Rende
     }
 }
 
-export const getHMATitleInfo: GetTitleInfoFn = (
-    _data: KLineData[],
-    index: number | null,
-    _params: Record<string, number | boolean | string>,
-    pluginHost: PluginHost,
-    paneId: string,
-): TitleInfo | null => {
-    if (index === null) return null
-
-    const stateKey = createHMAStateKey(paneId)
-    const state = pluginHost?.getSharedState<HMARenderState>(stateKey)
-    if (!state || state.visibleMin > state.visibleMax) return null
-
-    const value = state.series[index]
-    if (value === undefined) return null
-
-    return {
-        name: 'HMA',
-        params: [state.params.period],
-        values: [{ label: 'HMA', value, color: '#f43f5e' }],
-    }
-}
+const getHMATitleInfo = createSingleLineTitleInfo({ createStateKey: createHMAStateKey, name: 'HMA', getParams: (p) => [p.period as number], color: HMA_COLOR })
 
 @Indicator({
     name: 'hma',

package/src/engine/renderers/Indicator/hv.ts

@@ -9,8 +9,7 @@ import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
 import { resolveStateKey } from '../../indicators/indicatorMetadata'
 import type { IndicatorScheduler, HVSchedulerConfig } from '../../indicators/scheduler'
 import { calcHVData } from '../../indicators/calculators'
-import type { TitleInfo } from '../../indicators/indicatorMetadata'
-import type { KLineData } from '../../../types/price'
+import { createSingleLineTitleInfo } from './shared/titleInfo'
 
 const HV_COLOR = '#7c3aed'
 
@@ -30,7 +29,7 @@ function getHVStateKey(host: PluginHost | null, paneId: string): string | null {
     return resolveStateKey(meta.stateKey, paneId)
 }
 
-export function createHVRendererPlugin(options: { paneId?: string } = {}): RendererPluginWithHost {
+function createHVRendererPlugin(options: { paneId?: string } = {}): RendererPluginWithHost {
     const { paneId = 'sub_HV' } = options
     let pluginHost: PluginHost | null = null
 
@@ -114,26 +113,7 @@ export function createHVRendererPlugin(options: { paneId?: string } = {}): Rende
     }
 }
 
-export function getHVTitleInfo(
-  _data: KLineData[],
-  index: number | null,
-  params: Record<string, number | boolean | string>,
-  host: PluginHost,
-  paneId: string,
-): TitleInfo | null {
-  if (index === null) return null
-  const period = (params.period as number) ?? 20
-  const annualizationFactor = (params.annualizationFactor as number) ?? 252
-  const state = host.getSharedState<HVRenderState>(createHVStateKey(paneId))
-  const value = state?.series[index]
-  if (value === undefined) return null
-
-  return {
-    name: 'HV',
-    params: [period, annualizationFactor],
-    values: [{ label: 'HV', value, color: HV_COLOR }],
-  }
-}
+const getHVTitleInfo = createSingleLineTitleInfo({ createStateKey: createHVStateKey, name: 'HV', getParams: (p) => [(p.period as number) ?? 20, (p.annualizationFactor as number) ?? 252], color: HV_COLOR })
 
 @Indicator({
     name: 'hv',

package/src/engine/renderers/Indicator/ichimoku.ts

@@ -19,7 +19,7 @@ const CHIKOU_COLOR = '#7c3aed'
 
 type Point = { x: number; y: number }
 
-export interface IchimokuRendererOptions {
+interface IchimokuRendererOptions {
     paneId?: string
 }
 
@@ -37,7 +37,7 @@ function getIchimokuStateKey(host: PluginHost | null, paneId: string): string |
     return resolveStateKey(meta.stateKey, paneId)
 }
 
-export function createIchimokuRendererPlugin(options: IchimokuRendererOptions = {}): RendererPluginWithHost {
+function createIchimokuRendererPlugin(options: IchimokuRendererOptions = {}): RendererPluginWithHost {
     const { paneId = 'main' } = options
     let pluginHost: PluginHost | null = null
 
@@ -194,7 +194,7 @@ function fillCloud(
     ctx.restore()
 }
 
-export function getIchimokuTitleInfo(
+function getIchimokuTitleInfo(
     _data: KLineData[],
     index: number | null,
     params: Record<string, number | boolean | string>,

package/src/engine/renderers/Indicator/kama.ts

@@ -1,10 +1,10 @@
 import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
-import type { KLineData } from '../../../types/price'
+import { createSingleLineTitleInfo } from './shared/titleInfo'
 import { RENDERER_PRIORITY } from '../../../plugin'
 import type { KAMARenderState } from '../../indicators/kamaState'
 import { createKAMAStateKey, EMPTY_KAMA_STATE } from '../../indicators/kamaState'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
-import { resolveStateKey, type TitleInfo, type TitleValueItem, type GetTitleInfoFn } from '../../indicators/indicatorMetadata'
+import { resolveStateKey } from '../../indicators/indicatorMetadata'
 import { createSparseVisibleStateComposer } from '../../indicators/visibleStateComposers'
 import type { IndicatorScheduler, KAMASchedulerConfig } from '../../indicators/scheduler'
 import { calcKAMAData } from '../../indicators/calculators'
@@ -13,7 +13,7 @@ const KAMA_COLOR = '#0ea5e9'
 
 type Point = { x: number; y: number }
 
-export interface KAMARendererOptions {
+interface KAMARendererOptions {
     paneId?: string
 }
 
@@ -31,7 +31,7 @@ function getKAMAStateKey(host: PluginHost | null, paneId: string): string | null
     return resolveStateKey(meta.stateKey, paneId)
 }
 
-export function createKAMARendererPlugin(options: KAMARendererOptions = {}): RendererPluginWithHost {
+function createKAMARendererPlugin(options: KAMARendererOptions = {}): RendererPluginWithHost {
     const { paneId = 'main' } = options
     let pluginHost: PluginHost | null = null
 
@@ -122,28 +122,7 @@ export function createKAMARendererPlugin(options: KAMARendererOptions = {}): Ren
     }
 }
 
-export const getKAMATitleInfo: GetTitleInfoFn = (
-    _data: KLineData[],
-    index: number | null,
-    _params: Record<string, number | boolean | string>,
-    pluginHost: PluginHost,
-    paneId: string,
-): TitleInfo | null => {
-    if (index === null) return null
-
-    const stateKey = createKAMAStateKey(paneId)
-    const state = pluginHost?.getSharedState<KAMARenderState>(stateKey)
-    if (!state || state.visibleMin > state.visibleMax) return null
-
-    const value = state.series[index]
-    if (value === undefined) return null
-
-    return {
-        name: 'KAMA',
-        params: [state.params.period, state.params.fastPeriod, state.params.slowPeriod],
-        values: [{ label: 'KAMA', value, color: '#0ea5e9' }],
-    }
-}
+const getKAMATitleInfo = createSingleLineTitleInfo({ createStateKey: createKAMAStateKey, name: 'KAMA', getParams: (p) => [p.period as number, p.fastPeriod as number, p.slowPeriod as number], color: KAMA_COLOR })
 
 @Indicator({
     name: 'kama',

package/src/engine/renderers/Indicator/keltner.ts

@@ -15,7 +15,7 @@ const KELTNER_LOWER_COLOR = '#7c3aed'
 
 type Point = { x: number; y: number }
 
-export interface KeltnerRendererOptions { paneId?: string }
+interface KeltnerRendererOptions { paneId?: string }
 
 function getKeltnerStateKey(host: PluginHost | null, paneId: string): string | null {
     const scheduler = host?.getService<IndicatorScheduler>('indicatorScheduler')
@@ -31,7 +31,7 @@ function getKeltnerStateKey(host: PluginHost | null, paneId: string): string | n
     return resolveStateKey(meta.stateKey, paneId)
 }
 
-export function createKeltnerRendererPlugin(options: KeltnerRendererOptions = {}): RendererPluginWithHost {
+function createKeltnerRendererPlugin(options: KeltnerRendererOptions = {}): RendererPluginWithHost {
     const { paneId = 'main' } = options
     let pluginHost: PluginHost | null = null
 
@@ -124,7 +124,7 @@ function drawLine(ctx: CanvasRenderingContext2D, pts: Point[], color: string): v
     ctx.stroke()
 }
 
-export function getKeltnerTitleInfo(
+function getKeltnerTitleInfo(
     _data: KLineData[],
     index: number | null,
     params: Record<string, number | boolean | string>,

package/src/engine/renderers/Indicator/kst.ts

@@ -14,7 +14,7 @@ import type { KLineData } from '../../../types/price'
 
 type LinePoint = { x: number; y: number }
 
-export interface KSTRendererOptions {
+interface KSTRendererOptions {
     /** 目标 pane ID（默认 'sub'） */
     paneId?: string
 }
@@ -36,7 +36,7 @@ function getKSTStateKey(host: PluginHost | null, paneId: string): string | null
 /**
  * 创建 KST 渲染器插件
  */
-export function createKSTRendererPlugin(options: KSTRendererOptions = {}): RendererPluginWithHost {
+function createKSTRendererPlugin(options: KSTRendererOptions = {}): RendererPluginWithHost {
     const { paneId = 'sub' } = options
     let pluginHost: PluginHost | null = null
 
@@ -260,7 +260,7 @@ function drawKSTLinesWithCanvas2D(
 /**
  * 获取 KST 标题信息（供 paneTitle 使用）
  */
-export function getKSTTitleInfo(
+function getKSTTitleInfo(
     _data: KLineData[],
     index: number | null,
     params: Record<string, number | boolean | string>,

package/src/engine/renderers/Indicator/ma.ts

@@ -94,7 +94,7 @@ function getMAStateKey(host: PluginHost | null): string | null {
     return resolveStateKey(meta.stateKey)
 }
 
-export function getMATitleInfo(
+function getMATitleInfo(
     _data: KLineData[],
     index: number | null,
     _params: Record<string, number | boolean | string>,

package/src/engine/renderers/Indicator/macd.ts

@@ -15,7 +15,7 @@ import { createMacdScaleRendererPlugin } from './scale/macd_scale'
 
 type LinePoint = { x: number; y: number }
 
-export interface MACDConfig {
+interface MACDConfig {
   /** 快线周期（默认 12） */
   fastPeriod?: number
   /** 慢线周期（默认 26） */
@@ -30,7 +30,7 @@ export interface MACDConfig {
   showBAR?: boolean
 }
 
-export interface MACDRendererOptions {
+interface MACDRendererOptions {
   /** 目标 pane ID（默认 'sub'） */
   paneId?: string
   /** 初始配置 */
@@ -55,7 +55,7 @@ function getMACDStateKey(host: PluginHost | null, paneId: string): string | null
  * 创建 MACD 渲染器插件
  * 从 StateStore 读取 MACD 状态，不再内联计算
  */
-export function createMACDRendererPlugin(options: MACDRendererOptions = {}): RendererPluginWithHost {
+function createMACDRendererPlugin(options: MACDRendererOptions = {}): RendererPluginWithHost {
   const { paneId = 'sub', config: initialConfig = {} } = options
 
   let pluginHost: PluginHost | null = null
@@ -416,28 +416,11 @@ function compositeMacdWebGL(ctx: CanvasRenderingContext2D, context: RenderContex
   surface.compositeTo(ctx)
 }
 
-/**
- * 计算指定索引处的 MACD 值（供图例使用）
- * 使用 calculators.ts 中的计算函数
- */
-export function calcMACDAtIndex(
-  data: KLineData[],
-  index: number,
-  fastPeriod: number = 12,
-  slowPeriod: number = 26,
-  signalPeriod: number = 9
-): { dif: number; dea: number; macd: number } | null {
-  if (index < slowPeriod || index >= data.length) return null
-
-  const macdData = calcMACDData(data, fastPeriod, slowPeriod, signalPeriod)
-  return macdData[index] ?? null
-}
-
 /**
  * 获取 MACD 标题信息（供 paneTitle 使用）
  * 从 pluginHost 获取已计算好的数据，避免重复计算
  */
-export function getMACDTitleInfo(
+function getMACDTitleInfo(
     _data: KLineData[],
     index: number | null,
     params: Record<string, number | boolean | string>,

package/src/engine/renderers/Indicator/mainIndicatorLegend.ts

@@ -1,6 +1,6 @@
 import type { RendererPluginWithHost, PluginHost, RenderContext } from '../../../plugin'
 import { RENDERER_PRIORITY } from '../../../plugin'
-import type { KLineData } from '../../../types/price'
+import type { KLineData, TimeShareData } from '../../../types/price'
 import { resolveThemeColors } from '../../../tokens'
 import { getFont, setCanvasFont } from '../../theme/fonts'
 import type { IndicatorScheduler } from '../../indicators/scheduler'
@@ -81,9 +81,128 @@ export function createMainIndicatorLegendRendererPlugin(options: {
       const targetIndex = crosshairIndex ?? Math.min(range.end - 1, klineData.length - 1)
       const rows: Array<{ draw: (rowIndex: number) => void }> = []
 
+      // ── Timeshare legend ──
+      if (context.period === 'timeshare') {
+        const tsData = data as TimeShareData[]
+        const preClose = (context.settings?.preClose as number) ?? tsData[0]?.price ?? 0
+        const item = tsData[targetIndex]
+        if (item) {
+          const changeAmount = item.price - preClose
+          const changePercent = preClose !== 0 ? (changeAmount / preClose) * 100 : 0
+          const changeColor = changeAmount >= 0 ? colors.candleUpBody : colors.candleDownBody
+
+          if (context.paneWidth >= 400) {
+            rows.push({
+              draw: (rowIndex: number) => {
+                let x = legendX
+                const y = config.yPaddingPx / 2 + legendYOffset + rowIndex * lineHeight
+
+                overlayCtx.fillStyle = colors.text.primary
+                overlayCtx.fillText('现价 ', x, y)
+                x += measureTextWidth(overlayCtx, '现价 ')
+                overlayCtx.fillStyle = changeColor
+                overlayCtx.fillText(item.price.toFixed(2), x, y)
+                x += measureTextWidth(overlayCtx, item.price.toFixed(2)) + gap
+
+                overlayCtx.fillStyle = colors.text.primary
+                overlayCtx.fillText('均价 ', x, y)
+                x += measureTextWidth(overlayCtx, '均价 ')
+                overlayCtx.fillText(item.average.toFixed(2), x, y)
+                x += measureTextWidth(overlayCtx, item.average.toFixed(2)) + gap
+
+                overlayCtx.fillStyle = colors.text.primary
+                overlayCtx.fillText('涨跌 ', x, y)
+                x += measureTextWidth(overlayCtx, '涨跌 ')
+                overlayCtx.fillStyle = changeColor
+                const sign = changeAmount > 0 ? '+' : ''
+                overlayCtx.fillText(`${sign}${changeAmount.toFixed(2)}`, x, y)
+                x += measureTextWidth(overlayCtx, `${sign}${changeAmount.toFixed(2)}`) + gap
+
+                overlayCtx.fillStyle = colors.text.primary
+                overlayCtx.fillText('涨幅 ', x, y)
+                x += measureTextWidth(overlayCtx, '涨幅 ')
+                overlayCtx.fillStyle = changeColor
+                const pctSign = changePercent > 0 ? '+' : ''
+                overlayCtx.fillText(`${pctSign}${changePercent.toFixed(2)}%`, x, y)
+                x += measureTextWidth(overlayCtx, `${pctSign}${changePercent.toFixed(2)}%`) + gap
+
+                const volText = formatVolumeShort(item.volume)
+                overlayCtx.fillStyle = colors.text.tertiary
+                overlayCtx.fillText('成交量 ', x, y)
+                x += measureTextWidth(overlayCtx, '成交量 ')
+                overlayCtx.fillStyle = colors.text.primary
+                overlayCtx.fillText(volText, x, y)
+                x += measureTextWidth(overlayCtx, volText) + gap
+
+                const amtText = formatAmountShort(item.amount)
+                overlayCtx.fillStyle = colors.text.tertiary
+                overlayCtx.fillText('成交额 ', x, y)
+                x += measureTextWidth(overlayCtx, '成交额 ')
+                overlayCtx.fillStyle = colors.text.primary
+                overlayCtx.fillText(amtText, x, y)
+              },
+            })
+          } else {
+            rows.push({
+              draw: (rowIndex: number) => {
+                let x = legendX
+                const y = config.yPaddingPx / 2 + legendYOffset + rowIndex * lineHeight
+
+                overlayCtx.fillStyle = colors.text.primary
+                overlayCtx.fillText('现价 ', x, y)
+                x += measureTextWidth(overlayCtx, '现价 ')
+                overlayCtx.fillStyle = changeColor
+                overlayCtx.fillText(item.price.toFixed(2), x, y)
+                x += measureTextWidth(overlayCtx, item.price.toFixed(2)) + gap
+
+                overlayCtx.fillStyle = colors.text.primary
+                overlayCtx.fillText('均价 ', x, y)
+                x += measureTextWidth(overlayCtx, '均价 ')
+                overlayCtx.fillText(item.average.toFixed(2), x, y)
+                x += measureTextWidth(overlayCtx, item.average.toFixed(2)) + gap
+
+                overlayCtx.fillStyle = colors.text.tertiary
+                overlayCtx.fillText('成交量 ', x, y)
+                x += measureTextWidth(overlayCtx, '成交量 ')
+                overlayCtx.fillStyle = colors.text.primary
+                overlayCtx.fillText(formatVolumeShort(item.volume), x, y)
+              },
+            })
+            rows.push({
+              draw: (rowIndex: number) => {
+                let x = legendX
+                const y = config.yPaddingPx / 2 + legendYOffset + rowIndex * lineHeight
+
+                overlayCtx.fillStyle = colors.text.primary
+                overlayCtx.fillText('涨跌 ', x, y)
+                x += measureTextWidth(overlayCtx, '涨跌 ')
+                overlayCtx.fillStyle = changeColor
+                const sign = changeAmount > 0 ? '+' : ''
+                overlayCtx.fillText(`${sign}${changeAmount.toFixed(2)}`, x, y)
+                x += measureTextWidth(overlayCtx, `${sign}${changeAmount.toFixed(2)}`) + gap
+
+                overlayCtx.fillStyle = colors.text.primary
+                overlayCtx.fillText('涨幅 ', x, y)
+                x += measureTextWidth(overlayCtx, '涨幅 ')
+                overlayCtx.fillStyle = changeColor
+                const pctSign = changePercent > 0 ? '+' : ''
+                overlayCtx.fillText(`${pctSign}${changePercent.toFixed(2)}%`, x, y)
+                x += measureTextWidth(overlayCtx, `${pctSign}${changePercent.toFixed(2)}%`) + gap
+
+                overlayCtx.fillStyle = colors.text.tertiary
+                overlayCtx.fillText('成交额 ', x, y)
+                x += measureTextWidth(overlayCtx, '成交额 ')
+                overlayCtx.fillStyle = colors.text.primary
+                overlayCtx.fillText(formatAmountShort(item.amount), x, y)
+              },
+            })
+          }
+        }
+      }
+
       if (typeof crosshairIndex === 'number') {
         const k = klineData[targetIndex]
-        if (k) {
+        if (k && typeof k.close === 'number') {
           const isUp = k.close >= k.open
           const volText = typeof k.volume === 'number' ? formatVolumeShort(k.volume) : null
           const upColor = isUp ? colors.candleUpBody : colors.candleDownBody
@@ -339,3 +458,9 @@ function formatVolumeShort(v: number): string {
   if (v >= 1e4) return (v / 1e4).toFixed(2) + '万'
   return v.toFixed(2)
 }
+
+function formatAmountShort(v: number): string {
+  if (v >= 1e8) return (v / 1e8).toFixed(2) + '亿'
+  if (v >= 1e4) return (v / 1e4).toFixed(2) + '万'
+  return v.toFixed(2)
+}