@363045841yyt/klinechart-core 0.9.0-alpha.2 → 0.9.0-alpha.4

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

@@ -0,0 +1,290 @@
+import type { PluginHost, RenderContext } from '../../../foundation/plugin/index'
+import { resolveThemeColors } from '../../../foundation/tokens/index'
+import type { KLineData, TimeShareData } from '../../../foundation/types/price'
+import type { TitleInfo, TitleValueItem } from '../../indicators/indicatorMetadata'
+import type { IndicatorScheduler } from '../../indicators/scheduler'
+
+/** 图例渲染模式：canvas 默认绘制；external 仅发布上下文，不画 Canvas 文字 */
+export type LegendRenderMode = 'canvas' | 'external'
+
+export interface LegendLayout {
+  x: number
+  y: number
+  lineHeight: number
+  gap: number
+  paneWidth: number
+  compact: boolean
+}
+
+/** 当前 K 线及图例派生的展示字段，保留 KLineData 自定义属性。 */
+export type LegendCurrentBar = Omit<KLineData, 'volume'> & {
+  volume: number | null
+  // 成交量+单位格式化文本(eg. 1.23亿)
+  volumeText: string | null
+  color: string
+}
+
+export interface LegendTimeshareRow {
+  price: number
+  average: number
+  changeAmount: number
+  changePercent: number
+  volume: number
+  volumeText: string
+  amount: number
+  amountText: string
+  changeColor: string
+}
+
+export interface LegendIndicatorRow {
+  name: string
+  params?: number[]
+  values?: TitleValueItem[]
+}
+
+export interface LegendComparisonRow {
+  symbol: string
+  percent: number
+  color: string
+  percentColor: string
+}
+
+/**
+ * 主图左上角图例完整上下文。
+ * Canvas 绘制与 Vue legend slot 共用同一份数据。
+ */
+export interface LegendTemplateContext {
+  period: string
+  index: number
+  hasCrosshair: boolean
+  layout: LegendLayout
+  colors: {
+    textPrimary: string
+    textTertiary: string
+    up: string
+    down: string
+  }
+  /** 十字线指向的当前 K 线展示行（含 volumeText / color 与自定义字段） */
+  currentBar: LegendCurrentBar | null
+  timeshare: LegendTimeshareRow | null
+  indicators: ReadonlyArray<LegendIndicatorRow>
+  comparisons: ReadonlyArray<LegendComparisonRow>
+  /** 当前索引处的原始 K 线（分时模式下可能无 close） */
+  bar: KLineData | TimeShareData | null
+}
+
+export interface BuildLegendTemplateContextInput {
+  context: RenderContext
+  host: PluginHost | null
+  yPaddingPx: number
+}
+
+export function formatVolumeShort(v: number): string {
+  if (v >= 1e8) return (v / 1e8).toFixed(2) + '亿'
+  if (v >= 1e4) return (v / 1e4).toFixed(2) + '万'
+  return v.toFixed(2)
+}
+
+export 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)
+}
+
+export function buildLegendTemplateContext(
+  input: BuildLegendTemplateContextInput,
+): LegendTemplateContext | null {
+  const { context, host, yPaddingPx } = input
+  const klineData = context.data as KLineData[]
+  if (!klineData.length) return null
+
+  const colors = resolveThemeColors(
+    context.theme,
+    context.isAsiaMarket,
+    context.colorPresetSettings,
+  )
+  const fontSize = 12
+  const lineHeight = fontSize + 6
+  const legendX = 12
+  const gap = 10
+  const legendYOffset = 6
+  const compact = context.paneWidth < 400
+  const range = context.range
+  const crosshairIndex = context.crosshairIndex
+  const hasCrosshair = typeof crosshairIndex === 'number'
+  const targetIndex = hasCrosshair ? crosshairIndex : Math.min(range.end - 1, klineData.length - 1)
+
+  const layout: LegendLayout = {
+    x: legendX,
+    y: yPaddingPx / 2 + legendYOffset,
+    lineHeight,
+    gap,
+    paneWidth: context.paneWidth,
+    compact,
+  }
+
+  let timeshare: LegendTimeshareRow | null = null
+  if (context.period === 'timeshare') {
+    const tsData = context.data as TimeShareData[]
+    const rawPreClose = context.settings?.preClose as number | undefined
+    const preClose =
+      typeof rawPreClose === 'number' && Number.isFinite(rawPreClose) && rawPreClose !== 0
+        ? rawPreClose
+        : (tsData[0]?.price ?? 0)
+    const item = tsData[targetIndex]
+    if (item) {
+      const changeAmount = item.price - preClose
+      const changePercent = preClose !== 0 ? (changeAmount / preClose) * 100 : 0
+      timeshare = {
+        price: item.price,
+        average: item.average,
+        changeAmount,
+        changePercent,
+        volume: item.volume,
+        volumeText: formatVolumeShort(item.volume),
+        amount: item.amount,
+        amountText: formatAmountShort(item.amount),
+        changeColor: changeAmount >= 0 ? colors.candleUpBody : colors.candleDownBody,
+      }
+    }
+  }
+
+  let currentBar: LegendCurrentBar | null = null
+  if (hasCrosshair) {
+    const k = klineData[targetIndex]
+    if (k && typeof k.close === 'number') {
+      const isUp = k.close >= k.open
+      currentBar = {
+        ...k,
+        volume: typeof k.volume === 'number' ? k.volume : null,
+        volumeText: typeof k.volume === 'number' ? formatVolumeShort(k.volume) : null,
+        color: isUp ? colors.candleUpBody : colors.candleDownBody,
+      }
+    }
+  }
+
+  const indicators = collectIndicatorRows(host, klineData, targetIndex)
+  const comparisons = collectComparisonRows(context, klineData, targetIndex, range, colors)
+
+  return {
+    period: context.period,
+    index: targetIndex,
+    hasCrosshair,
+    layout,
+    colors: {
+      textPrimary: colors.text.primary,
+      textTertiary: colors.text.tertiary,
+      up: colors.candleUpBody,
+      down: colors.candleDownBody,
+    },
+    currentBar,
+    timeshare,
+    indicators,
+    comparisons,
+    bar: klineData[targetIndex] ?? null,
+  }
+}
+
+function collectIndicatorRows(
+  host: PluginHost | null,
+  klineData: KLineData[],
+  targetIndex: number,
+): LegendIndicatorRow[] {
+  if (!host || typeof host.getService !== 'function') return []
+  const scheduler = host.getService<IndicatorScheduler>('indicatorScheduler')
+  if (!scheduler) return []
+
+  const rows: LegendIndicatorRow[] = []
+  for (const meta of scheduler.getMainIndicators()) {
+    if (!meta.getTitleInfo) continue
+    if (!scheduler.isMainIndicatorActive(meta.name)) continue
+    const params = scheduler.getMainIndicatorParams(meta.name) ?? {}
+    const titleInfo: TitleInfo | null = meta.getTitleInfo(
+      klineData,
+      targetIndex,
+      params as Record<string, number | boolean | string>,
+      host,
+      'main',
+    )
+    if (!titleInfo) continue
+    rows.push({
+      name: titleInfo.name,
+      params: titleInfo.params,
+      values: titleInfo.values,
+    })
+  }
+  return rows
+}
+
+function collectComparisonRows(
+  context: RenderContext,
+  klineData: KLineData[],
+  targetIndex: number,
+  range: { start: number; end: number },
+  colors: ReturnType<typeof resolveThemeColors>,
+): LegendComparisonRow[] {
+  const comparisonSymbols = context.comparisonSymbols
+  const comparisonData = context.comparisonData
+  const comparisonColors = context.comparisonColors
+  if (!comparisonSymbols?.length || !comparisonData?.size) return []
+
+  const baseIndex = Math.max(0, range.start)
+  const baseItem = klineData[baseIndex]
+  if (!baseItem || !Number.isFinite(baseItem.close) || baseItem.close <= 0) return []
+
+  const baseDate = baseItem.date ?? ''
+  const rows: LegendComparisonRow[] = []
+
+  for (const spec of comparisonSymbols) {
+    const data = comparisonData.get(spec.symbol)
+    if (!data?.length) continue
+
+    const baseline = baseDate
+      ? findBaselineByDate(data, baseDate)
+      : findBaselineByTimestamp(data, baseItem.timestamp)
+    if (!baseline || baseline.close <= 0) continue
+
+    const byDate = new Map<string, KLineData>()
+    for (const item of data) {
+      byDate.set(item.date ?? String(item.timestamp), item)
+    }
+
+    const mainItem = klineData[targetIndex]
+    if (!mainItem) continue
+    const key = mainItem.date ?? String(mainItem.timestamp)
+    const currentItem = byDate.get(key)
+    if (!currentItem || !Number.isFinite(currentItem.close)) continue
+
+    const percent = ((currentItem.close - baseline.close) / baseline.close) * 100
+    const color = comparisonColors?.get(spec.symbol) ?? '#f59e0b'
+    rows.push({
+      symbol: spec.symbol,
+      percent,
+      color,
+      percentColor:
+        percent > 0
+          ? colors.candleUpBody
+          : percent < 0
+            ? colors.candleDownBody
+            : colors.text.primary,
+    })
+  }
+  return rows
+}
+
+function findBaselineByDate(data: ReadonlyArray<KLineData>, date: string): KLineData | null {
+  for (const item of data) {
+    if (item.date && item.date >= date) return item
+  }
+  return null
+}
+
+function findBaselineByTimestamp(
+  data: ReadonlyArray<KLineData>,
+  timestamp: number,
+): KLineData | null {
+  for (const item of data) {
+    if (item.timestamp >= timestamp) return item
+  }
+  return null
+}

package/src/engine/renderers/__tests__/mainIndicatorLegend.renderer.test.ts

@@ -20,7 +20,7 @@ import type { KLineData } from '@/types/price'
 // Type helper for tests - we know these methods exist on the implementation
 interface TestableLegendRenderer extends RendererPluginWithHost {
   draw: (context: RenderContext) => void
-  getConfig: () => { yPaddingPx: number }
+  getConfig: () => { yPaddingPx: number; renderMode: 'canvas' | 'external' }
   setConfig: (config: Record<string, unknown>) => void
 }
 
@@ -210,7 +210,7 @@ describe('createMainIndicatorLegendRendererPlugin', () => {
     const plugin = createMainIndicatorLegendRendererPlugin({ yPaddingPx: 20 })
 
     expect(plugin.name).toBe('mainIndicatorLegend')
-    expect(plugin.version).toBe('2.1.0')
+    expect(plugin.version).toBe('2.2.0')
     expect(plugin.description).toBe('主图指标图例渲染器（MA 数据来自 StateStore）')
     expect(plugin.debugName).toBe('主图指标图例')
     expect(plugin.paneId).toBe('main')
@@ -552,3 +552,74 @@ describe('MainIndicatorLegend with other indicators', () => {
     expect(wmaLabelCalls.length).toBeGreaterThan(0)
   })
 })
+
+describe('MainIndicatorLegend external mode & context callback', () => {
+  it('publishes legend context via onContext while still painting in canvas mode', () => {
+    const onContext = vi.fn()
+    const scheduler = createMockScheduler({ ma: { getTitleInfo: createMAGetTitleInfo() } }, ['ma'])
+    const state = createTestMARenderState()
+    const mockHost = createMockPluginHost(state, scheduler)
+    const plugin = createMainIndicatorLegendRendererPlugin({
+      yPaddingPx: 20,
+      onContext,
+    }) as TestableLegendRenderer
+    plugin.onInstall(mockHost)
+
+    const ctx = createMockCanvasContext()
+    const context = createMockRenderContext(ctx, { crosshairIndex: 50 })
+    plugin.draw(context)
+
+    expect(onContext).toHaveBeenCalledTimes(1)
+    const legend = onContext.mock.calls[0]![0]
+    expect(legend).not.toBeNull()
+    expect(legend.index).toBe(50)
+    expect(legend.hasCrosshair).toBe(true)
+    expect(legend.currentBar).not.toBeNull()
+    expect(legend.indicators.some((row: { name: string }) => row.name === 'MA')).toBe(true)
+    expect(vi.mocked(ctx.fillText).mock.calls.length).toBeGreaterThan(0)
+  })
+
+  it('does not paint canvas text when renderMode is external but still publishes context', () => {
+    const onContext = vi.fn()
+    const scheduler = createMockScheduler({ ma: { getTitleInfo: createMAGetTitleInfo() } }, ['ma'])
+    const state = createTestMARenderState()
+    const mockHost = createMockPluginHost(state, scheduler)
+    const plugin = createMainIndicatorLegendRendererPlugin({
+      yPaddingPx: 20,
+      onContext,
+    }) as TestableLegendRenderer
+    plugin.onInstall(mockHost)
+    plugin.setConfig({ renderMode: 'external' })
+    expect(plugin.getConfig().renderMode).toBe('external')
+
+    const ctx = createMockCanvasContext()
+    const context = createMockRenderContext(ctx, { crosshairIndex: 10 })
+    plugin.draw(context)
+
+    expect(onContext).toHaveBeenCalledTimes(1)
+    expect(onContext.mock.calls[0]![0]).not.toBeNull()
+    expect(vi.mocked(ctx.fillText)).not.toHaveBeenCalled()
+  })
+
+  it('retains custom KLineData fields in the currentBar slot context', () => {
+    const onContext = vi.fn()
+    const plugin = createMainIndicatorLegendRendererPlugin({
+      yPaddingPx: 20,
+      onContext,
+    }) as TestableLegendRenderer
+    plugin.onInstall(createMockPluginHost())
+    plugin.setConfig({ renderMode: 'external' })
+
+    const ctx = createMockCanvasContext()
+    const context = createMockRenderContext(ctx, { crosshairIndex: 10 })
+    Object.assign((context.data as KLineData[])[10]!, {
+      turnoverRate: 3.14,
+      customLabel: 'featured',
+    })
+    plugin.draw(context)
+
+    const legend = onContext.mock.calls[0]![0]
+    expect(legend.currentBar.turnoverRate).toBe(3.14)
+    expect(legend.currentBar.customLabel).toBe('featured')
+  })
+})

package/src/engine/renderers/__tests__/yAxis.renderer.test.ts

@@ -1,6 +1,6 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 
-import { createYAxisRendererPlugin } from '@/core/renderers/yAxis'
+import { createYAxisRendererPlugin, createYAxisOverlayRendererPlugin } from '@/core/renderers/yAxis'
 import type { RenderContext, PaneInfo, YAxisTick } from '@/plugin'
 
 vi.mock('@/utils/kLineDraw/axis', () => ({
@@ -135,9 +135,10 @@ describe('yAxis renderer', () => {
   })
 
   it('draws last price label via drawAxisPriceLabel for main pane when yAxisLabels contains lastPrice', () => {
-    const plugin = createYAxisRendererPlugin({ axisWidth: 80, yPaddingPx: 0 })
+    const plugin = createYAxisOverlayRendererPlugin({ axisWidth: 80, yPaddingPx: 0 })
     const context = createContext({
       pane: createPane({ id: 'main' }),
+      yAxisOverlayCtx: createCtx(),
       yAxisLabels: [
         {
           type: 'lastPrice',
@@ -165,12 +166,15 @@ describe('yAxis renderer', () => {
   })
 
   it('draws crosshair price label exactly once for active pane', () => {
-    const plugin = createYAxisRendererPlugin({
+    const plugin = createYAxisOverlayRendererPlugin({
       axisWidth: 80,
       yPaddingPx: 0,
       getCrosshair: () => ({ y: 55, price: 95, activePaneId: 'main' }),
     })
-    const context = createContext({ pane: createPane({ id: 'main' }) })
+    const context = createContext({
+      pane: createPane({ id: 'main' }),
+      yAxisOverlayCtx: createCtx(),
+    })
 
     plugin.draw(context)
 
@@ -178,12 +182,12 @@ describe('yAxis renderer', () => {
   })
 
   it('does not draw crosshair price label when getCrosshair returns null', () => {
-    const plugin = createYAxisRendererPlugin({
+    const plugin = createYAxisOverlayRendererPlugin({
       axisWidth: 80,
       yPaddingPx: 0,
       getCrosshair: () => null,
     })
-    const context = createContext()
+    const context = createContext({ yAxisOverlayCtx: createCtx() })
 
     plugin.draw(context)
 

package/src/engine/renderers/leftYAxis.ts

@@ -6,49 +6,52 @@ import { roundToPhysicalPixel } from '../../foundation/utils/pixelAlign'
 import { getFont, setCanvasFont } from '../../foundation/tokens/fonts'
 import { priceAtYForScaleType, type ScaleType } from '../utils/tickPosition'
 
-export function createLeftYAxisRendererPlugin(options: {
+type LeftYAxisOptions = {
   axisWidth: number
   yPaddingPx: number
   getCrosshair?: () => { y: number; price: number; activePaneId: string | null } | null
-}): RendererPlugin {
+}
+
+function shouldShowLeftAxis(period: string, settings: RenderContext['settings']): boolean {
+  if (period === 'timeshare') return true
+  const leftType = settings?.leftAxisType as string | undefined
+  return Boolean(leftType && leftType !== 'none')
+}
+
+/**
+ * 左 Y 轴静态层：刻度，画到 leftAxisCtx（main 级刷新）
+ */
+export function createLeftYAxisStaticRendererPlugin(options: LeftYAxisOptions): RendererPlugin {
   return {
     name: 'leftYAxis',
-    version: '1.0.0',
-    description: '左侧Y轴价格刻度渲染器',
-    debugName: '左侧Y轴',
+    version: '2.0.0',
+    description: '左侧Y轴价格刻度渲染器（静态）',
+    debugName: '左侧Y轴刻度',
     paneId: GLOBAL_PANE_ID,
     priority: RENDERER_PRIORITY.SYSTEM_YAXIS,
-    layer: 'overlay',
 
     draw(context: RenderContext) {
       const { leftAxisCtx, pane, dpr, period } = context
       if (!leftAxisCtx) return
+      if (!shouldShowLeftAxis(period, context.settings)) return
+      if (!pane.capabilities.showPriceAxisTicks) return
+      if (!context.yAxisTicks) return
 
       const axisWidth = leftAxisCtx.canvas ? leftAxisCtx.canvas.width / dpr : 0
       if (axisWidth <= 0) return
 
-      // 分时模式始终显示左轴（线性），不受设置约束
-      if (period !== 'timeshare') {
-        const leftType = context.settings?.leftAxisType as string | undefined
-        if (!leftType || leftType === 'none') return
-      }
-
       const tokenColors = resolveThemeColors(
         context.theme,
         context.isAsiaMarket,
         context.colorPresetSettings,
       )
 
-      if (!pane.capabilities.showPriceAxisTicks) return
-
       const scaleType: ScaleType =
         period === 'timeshare'
           ? 'linear'
           : ((context.settings?.leftAxisType as ScaleType) ?? 'linear')
       const paneScaleType = pane.yAxis.getScaleType()
 
-      if (!context.yAxisTicks) return
-
       leftAxisCtx.clearRect(0, 0, axisWidth, pane.height)
 
       const font = getFont(12)
@@ -58,7 +61,6 @@ export function createLeftYAxisRendererPlugin(options: {
       leftAxisCtx.fillStyle = tokenColors.text.secondary
 
       const textX = roundToPhysicalPixel(axisWidth / 2, dpr)
-
       const needsOwnValues = scaleType !== paneScaleType
       const crosshairPriceRange = pane.yAxis.getDisplayRange()
 
@@ -92,14 +94,47 @@ export function createLeftYAxisRendererPlugin(options: {
         }
         leftAxisCtx.fillText(formatTick(displayValue), textX, tick.y)
       }
+    },
+  }
+}
+
+/**
+ * 左 Y 轴动态层：十字线价签，画到 leftAxisOverlayCtx（overlay 级刷新）
+ */
+export function createLeftYAxisOverlayRendererPlugin(options: LeftYAxisOptions): RendererPlugin {
+  return {
+    name: 'leftYAxisOverlay',
+    version: '2.0.0',
+    description: '左侧Y轴动态标签渲染器',
+    debugName: '左侧Y轴标签',
+    paneId: GLOBAL_PANE_ID,
+    priority: RENDERER_PRIORITY.SYSTEM_YAXIS + 1,
+    layer: 'overlay',
+
+    draw(context: RenderContext) {
+      const { leftAxisOverlayCtx, leftAxisCtx, pane, dpr, period } = context
+      if (!shouldShowLeftAxis(period, context.settings)) return
+
+      const targetCtx = leftAxisOverlayCtx ?? leftAxisCtx
+      if (!targetCtx) return
+
+      const axisWidth = targetCtx.canvas ? targetCtx.canvas.width / dpr : 0
+      if (axisWidth <= 0) return
+
+      targetCtx.clearRect(0, 0, axisWidth, pane.height)
 
       const crosshair = options.getCrosshair?.()
       if (!crosshair || crosshair.activePaneId !== pane.id || crosshair.price === null) return
 
+      const scaleType: ScaleType =
+        period === 'timeshare'
+          ? 'linear'
+          : ((context.settings?.leftAxisType as ScaleType) ?? 'linear')
       const isCrosshairPercent = scaleType === 'percent'
       const crosshairPrice = isCrosshairPercent
         ? pane.yAxis.toPercent(crosshair.price)
         : crosshair.price
+      const crosshairPriceRange = pane.yAxis.getDisplayRange()
       const crosshairLabelRange: { minPrice: number; maxPrice: number } = isCrosshairPercent
         ? (() => {
             const p = pane.yAxis.getDisplayPercentRange()
@@ -114,7 +149,7 @@ export function createLeftYAxisRendererPlugin(options: {
         : undefined
 
       drawCrosshairPriceLabel(
-        leftAxisCtx,
+        targetCtx,
         {
           x: 0,
           y: pane.top,
@@ -136,3 +171,10 @@ export function createLeftYAxisRendererPlugin(options: {
     },
   }
 }
+
+/**
+ * @deprecated 使用 createLeftYAxisStaticRendererPlugin + createLeftYAxisOverlayRendererPlugin
+ */
+export function createLeftYAxisRendererPlugin(options: LeftYAxisOptions): RendererPlugin {
+  return createLeftYAxisStaticRendererPlugin(options)
+}

package/src/engine/renderers/timeShare.ts

@@ -8,6 +8,10 @@ import { RENDERER_PRIORITY } from '../../foundation/plugin/index'
 import { resolveThemeColors } from '../../foundation/tokens/index'
 import type { TimeShareData } from '../../foundation/types/price'
 import { Indicator } from '../indicators/indicatorDefinitionRegistry'
+import {
+  computeTimeSharePaneLayout,
+  resolveTimeShareBaseline,
+} from '../modes/timeShareMath'
 
 /** 成交量区域占 pane 高度的比例（底部） */
 const VOLUME_RATIO = 0.25
@@ -34,15 +38,17 @@ export function createTimeShareRendererPlugin(): RendererPluginWithHost {
         context.isAsiaMarket,
         context.colorPresetSettings,
       )
-      const preClose = (settings?.preClose as number) ?? tsData[0]?.price ?? 0
-      if (preClose === 0) return
+      const preClose = resolveTimeShareBaseline({
+        preClose: settings?.preClose as number | undefined,
+        firstPrice: tsData[0]?.price,
+      })
+      if (preClose === null) return
 
       const paneHeight = pane.height
-      const volumeAreaHeight = Math.round(paneHeight * VOLUME_RATIO * dpr) / dpr
-      const priceAreaHeight = paneHeight - volumeAreaHeight
+      const layout = computeTimeSharePaneLayout(paneHeight, VOLUME_RATIO)
+      const { volumeAreaHeight, priceAreaHeight } = layout
 
       const { start, end } = range
-      const visibleCount = Math.min(end - start, tsData.length - start)
       const itemCount = Math.min(end, tsData.length) - start
 
       const xPositions: number[] = []
@@ -51,16 +57,19 @@ export function createTimeShareRendererPlugin(): RendererPluginWithHost {
       const volumes: number[] = []
       let maxVolume = 0
 
+      // 价格 Y 映射到 price 子区域：pane.yAxis 仍按全高，再线性压到 priceAreaHeight
+      const scaleYToPriceArea = (y: number) => (y / Math.max(paneHeight, 1)) * priceAreaHeight
+
       for (let i = start; i < start + itemCount; i++) {
         const item = tsData[i]
         if (!item) continue
         const x = kLineCenters[i - start]
         if (x === undefined) continue
         xPositions.push(x)
-        yPrices.push(pane.yAxis.priceToY(item.price))
-        yAvgs.push(pane.yAxis.priceToY(item.average))
+        yPrices.push(scaleYToPriceArea(pane.yAxis.priceToY(item.price)))
+        yAvgs.push(scaleYToPriceArea(pane.yAxis.priceToY(item.average)))
         volumes.push(item.volume ?? 0)
-        maxVolume = Math.max(maxVolume, item.volume)
+        maxVolume = Math.max(maxVolume, item.volume ?? 0)
       }
 
       if (xPositions.length < 2) return
@@ -68,7 +77,13 @@ export function createTimeShareRendererPlugin(): RendererPluginWithHost {
       ctx.save()
       ctx.translate(-scrollLeft, 0)
 
-      const preCloseY = pane.yAxis.priceToY(preClose)
+      const preCloseY = scaleYToPriceArea(pane.yAxis.priceToY(preClose))
+
+      // 价格区裁剪，避免线/填充画进成交量区（translate 后世界 scrollLeft 映射到 0）
+      ctx.save()
+      ctx.beginPath()
+      ctx.rect(scrollLeft, 0, context.paneWidth, priceAreaHeight)
+      ctx.clip()
 
       drawPreCloseLine(ctx, xPositions, preCloseY, dpr, colors.timeSharePreClose)
 
@@ -85,6 +100,7 @@ export function createTimeShareRendererPlugin(): RendererPluginWithHost {
       drawSegmentLine(ctx, xPositions, yPrices, dpr, colors.timeSharePriceLine, 2)
 
       drawSegmentLine(ctx, xPositions, yAvgs, dpr, colors.timeShareAvgLine, 1.5)
+      ctx.restore()
 
       drawVolumeBars(
         ctx,