画线工具

69 种内置画线工具。每种工具都能通过磁吸对齐到K线，支持撤销和重做， 保留各自的设置，并随布局一起保存。

用指针绘制

chart.setDrawingTool('trendLine')   // 接下来的点击会绘制一条趋势线
chart.setDrawingTool(null)          // 回到光标
chart.setStayInDrawingMode(true)    // 每次绘制完成后保留当前工具

工具有三种绘制方式：

  • 点击 — 每个点点击一次（趋势线两次，XABCD 形态五次）。
  • 手绘 — 按住并拖动；brush 和 highlighter。
  • 路径 — 每个点点击一次，然后双击、按 Enter 或点击最后一个点即可结束；path 和 polyline。

Escape 会放弃尚未完成的绘制。

用代码添加画线

const id = chart.addDrawing({
  type: 'fibRetracement',
  anchors: [{ time: t1, price: 101.2 }, { time: t2, price: 96.4 }],
  style: { color: '#f2a93b' },
  options: { reverse: true, extendRight: true },
})

chart.autoFib()   // 在当前可见范围内的主要波段上绘制回撤，没有则返回 null

设置

除样式（颜色、线宽、线型、填充、文本）外，工具还可以提供自己的设置： 斐波那契级别、向左或向右延伸线条、标签、背景、图标、波浪级别。 组件的设置对话框就是根据这些设置生成的。

chart.getDrawingOptionDefs('fibRetracement')  // 工具提供哪些设置
chart.getDrawingOptions(id)                   // 当前的值，已填入默认值
chart.setDrawingOptions(id, {
  levels: [{ value: 0.5, visible: true }, { value: 0.618, visible: true, color: '#e8505b' }],
})

// 多项更改合并为一次撤销
chart.updateDrawing(id, { style: { lineWidth: 2 }, options: { extendLeft: true } })

// 预览更改的对话框：一次撤销，取消时还原
chart.beginDrawingEdit(id)
chart.updateDrawing(id, { style: { color: '#26a69a' } })
chart.endDrawingEdit(id, { cancel: false })

// 每个新建的斐波那契回撤的初始设置
chart.setDrawingToolDefaults('fibRetracement', { showPrices: false })

来自已保存布局或粘贴画线的设置会按工具进行校验；工具不接受的值会被丢弃。

多/空仓位

riskReward：从入场价拖动到止损价。目标位按盈亏比放在相应的距离处， 拖动它的控制点即可改变该比例。它根据账户资金和风险（账户的百分比或一个金额） 算出数量，并显示每条线的价格、距离以及盈亏。

chart.setDrawingOptions(id, { accountSize: 25_000, riskMode: 'percent', risk: 1, rewardRatio: 3 })

画线提醒

提醒可以跟随趋势线、射线、延长线或水平线，也可以跟随平行通道的各条线： 当价格穿越该线在最新一根K线处的位置时触发，位置以图表上绘制的为准 （K线之间保持笔直，对数坐标下按对数价格计算）。

if (chart.canAddDrawingAlert(id)) {
  chart.addDrawingAlert(id, { condition: 'crossingUp', message: 'Broke the trend line' })
}

提醒跟随其画线，撤销时随画线一同恢复，并随布局一起保存。

顺序与分组

chart.moveDrawing(id, 'front')       // 'front' | 'forward' | 'backward' | 'back'
const group = chart.groupDrawings([a, b, c], 'Weekly levels')
chart.setDrawingGroupVisible(group, false)
chart.setDrawingGroupLocked(group, true)
chart.ungroupDrawings(group)

chart.getSelectedDrawingIds()
chart.removeDrawings(ids)            // 一次撤销
chart.setDrawingsVisible(ids, false)
chart.setDrawingsLocked(ids, true)

点击分组中的任意一条画线，会选中整个分组。

橡皮擦、缩放与磁吸

chart.setEraserMode(true)          // 每次点击画线就将其删除，直到按 Escape
chart.setZoomAreaMode(true)        // 下一次拖动会缩放到框内的K线
chart.setDrawingMagnetMode('strong') // 'off' | 'weak' | 'strong'

弱磁吸会在指针靠近K线的开盘价、最高价、最低价或收盘价时，把点吸附到该价位；强磁吸则始终吸附。

键盘

  • Ctrl/⌘ + Z 撤销，Ctrl + Shift + Z 或 Ctrl + Y 重做。
  • Ctrl + C / V 复制和粘贴画线，Ctrl + D 创建副本，Delete 删除。
  • Ctrl + G 将所选画线分组，Ctrl + Shift + G 取消分组。
  • Ctrl + ] / [ 上移 / 下移一层；加按 Shift 则置于顶层 / 底层。
  • Enter 结束路径；Escape 退出工具、橡皮擦或取消选择。

事件

chart.on('drawingCreate', (e) => e.payload)       // { id, type, drawing }
chart.on('drawingUpdate', (e) => e.payload)       // { id }
chart.on('drawingRemove', (e) => e.payload)       // { id }
chart.on('drawingDoubleClick', (e) => e.payload)  // { id }
chart.on('drawingContextMenu', (e) => e.payload)  // { id, x, y }
chart.on('toolModeChange', (e) => e.payload)      // { eraser } 或 { zoomArea }

撤销和重做会针对它们恢复、移除或修改的画线，分别触发 drawingCreate、drawingRemove 和 drawingUpdate。

工具目录

线条

  • trendLine — 需要时可向左或向右延伸。
  • ray、extendedLine
  • horizontalLine、horizontalRay（从其所在点起向时间前方延伸）、verticalLine、crossLine
  • infoLine — 带有价格变化、K线数、时间和角度的信息框。
  • trendAngle — 同时显示其在屏幕上的角度。

通道

  • parallelChannel — 可选中线，可向任一方向延伸。
  • regressionChannel

斐波那契

  • fibRetracement、fibExtension — 可编辑的级别、价格和百分比，标签可置于左侧或右侧，背景，反转。
  • fibChannel、fibTimeZones、fibSpeedResistanceFan
  • fibArcs — 以一段走势的起点为中心的圆弧，半圆或整圆。
  • fibCircles — 半径按斐波那契倍数取值的圆。
  • fibSpiral — 从中心展开的黄金螺旋。
  • fibWedge — 从顶点出发的两条线之间的圆弧。

江恩与叉线

  • pitchfork、schiffPitchfork、modifiedSchiffPitchfork
  • pitchfan — 从枢轴点出发、穿过两点之间各级别的射线。
  • gannFan、gannBox、gannSquare

形状

  • rectangle、circle、ellipse、triangle
  • polyline — 封闭图形，每次点击一个点。
  • curve — 经过第三个点弯曲；arc — 经过三个点的圆弧。

画笔

  • brush、highlighter — 手绘。
  • path — 经过各点的线，末端带箭头。

形态

  • xabcdPattern、cypherPattern、abcdPattern、threeDrives — 标注各自的比例。
  • headAndShoulders — 带颈线。

艾略特波浪

  • elliottWave（1–5、A–C）、elliottImpulse、elliottCorrection、elliottTriangle、elliottDoubleCombo、elliottTripleCombo — 标签采用对应波浪级别的样式：①、(1)、1 或 i。

周期

  • cyclicLines、timeCycles、sineLine

测量

  • measure、priceRange、dateRange、dateAndPriceRange

标注与标记

  • text、note（带文字的图钉）、callout、priceLabel
  • arrow、arrowMark（向上、向下、向左或向右，带标签）、flag、icon（星形、心形、对勾、叉号、圆形、三角形、闪电）

预测

  • riskReward — 多/空仓位（见上文）。
  • forecast — 价格触及目标时变绿，若在此之前时间用完则变红。
  • projection — 从第三个点起平移复制一段走势。
  • barsPattern — 复制若干根K线，以K线、折线或最高-最低的形式显示，可左右镜像或上下翻转。
  • anchoredVWAP、volumeProfileRange

保存

const json = chart.saveState()   // 画线及其设置和分组、指标、提醒……
chart.loadState(json)            // 校验每条画线；格式有误的会被剔除

自定义工具

一个工具就是一个 DrawingPlugin，通过 chart.registerDrawingTool(plugin) 注册。它的描述对象列出了工具的设置（options）、 绘制方式（creation），以及是否带有填充或文本；它还可以提供各条线的价格 （priceAt，用于提醒）、不属于锚点的移动控制点 （moveHandle），并接收图表的K线数据 （setDataGetter）。参见插件。