Công cụ vẽ

69 công cụ vẽ có sẵn. Mỗi công cụ đều hút vào các nến nhờ nam châm, hỗ trợ hoàn tác và làm lại, có cài đặt riêng, và được lưu cùng bố cục.

Vẽ bằng con trỏ

chart.setDrawingTool('trendLine')   // các lần bấm tiếp theo vẽ một đường xu hướng
chart.setDrawingTool(null)          // quay về con trỏ
chart.setStayInDrawingMode(true)    // giữ công cụ sau mỗi hình vẽ

Một công cụ được vẽ theo một trong ba cách:

  • Bấm — mỗi điểm một lần bấm (hai lần với đường xu hướng, năm lần với mô hình XABCD).
  • Vẽ tay — nhấn và kéo; brush và highlighter.
  • Đường nhiều điểm — mỗi điểm một lần bấm, rồi bấm đúp, nhấn Enter hoặc bấm vào điểm cuối để kết thúc; path và polyline.

Escape bỏ hình vẽ đang vẽ dở.

Thêm hình vẽ từ code

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()   // một Fibonacci thoái lui trên con sóng chính đang hiện, hoặc null

Cài đặt

Ngoài kiểu (màu, độ dày nét, kiểu nét, màu nền, chữ), một công cụ có thể có cài đặt riêng: các mức Fibonacci, kéo dài đường sang trái hoặc phải, nhãn, nền, biểu tượng, cấp sóng. Hộp thoại cài đặt của widget được dựng từ các cài đặt này.

chart.getDrawingOptionDefs('fibRetracement')  // công cụ có những cài đặt nào
chart.getDrawingOptions(id)                   // giá trị của nó, đã điền mặc định
chart.setDrawingOptions(id, {
  levels: [{ value: 0.5, visible: true }, { value: 0.618, visible: true, color: '#e8505b' }],
})

// nhiều thay đổi gộp thành một bước hoàn tác
chart.updateDrawing(id, { style: { lineWidth: 2 }, options: { extendLeft: true } })

// hộp thoại xem trước thay đổi: một bước hoàn tác, hoặc khôi phục khi huỷ
chart.beginDrawingEdit(id)
chart.updateDrawing(id, { style: { color: '#26a69a' } })
chart.endDrawingEdit(id, { cancel: false })

// giá trị ban đầu của mỗi Fibonacci thoái lui mới
chart.setDrawingToolDefaults('fibRetracement', { showPrices: false })

Cài đặt lấy từ bố cục đã lưu hoặc từ hình vẽ được dán vào sẽ được kiểm tra theo công cụ; giá trị mà công cụ không nhận sẽ bị bỏ.

Vị thế Long/Short

riskReward: kéo từ điểm vào lệnh đến điểm dừng lỗ. Mục tiêu nằm cách đó theo tỷ lệ lời:lỗ, và điểm kéo của nó dùng để đổi tỷ lệ này. Từ vốn tài khoản và mức rủi ro (một phần trăm của vốn, hoặc một số tiền), công cụ tính ra khối lượng, và hiện giá, khoảng cách cùng lãi hoặc lỗ của từng đường.

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

Cảnh báo trên hình vẽ

Một cảnh báo có thể bám theo đường xu hướng, tia, đường kéo dài hoặc đường ngang, hay các đường của kênh song song: nó kích hoạt khi giá cắt qua đường tại giá trị của đường ở nến mới nhất, đúng như được vẽ trên biểu đồ (thẳng qua các nến, và theo giá logarit trên thang logarit).

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

Cảnh báo đi cùng hình vẽ của nó, quay lại cùng hình vẽ khi hoàn tác, và được lưu cùng bố cục.

Thứ tự và nhóm

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)            // một bước hoàn tác
chart.setDrawingsVisible(ids, false)
chart.setDrawingsLocked(ids, true)

Bấm vào một hình vẽ trong nhóm sẽ chọn cả nhóm.

Tẩy, phóng to và nam châm

chart.setEraserMode(true)          // mỗi lần bấm vào một hình vẽ sẽ xoá nó, cho đến khi nhấn Escape
chart.setZoomAreaMode(true)        // lần kéo tiếp theo phóng to vào các nến trong khung của nó
chart.setDrawingMagnetMode('strong') // 'off' | 'weak' | 'strong'

Nam châm yếu hút một điểm vào giá mở cửa, cao, thấp hoặc đóng cửa của nến khi con trỏ ở gần một trong số đó; nam châm mạnh thì luôn làm vậy.

Bàn phím

  • Ctrl/⌘ + Z hoàn tác, Ctrl + Shift + Z hoặc Ctrl + Y làm lại.
  • Ctrl + C / V sao chép và dán hình vẽ, Ctrl + D nhân bản, Delete xoá.
  • Ctrl + G nhóm các hình vẽ đang chọn, Ctrl + Shift + G bỏ nhóm.
  • Ctrl + ] / [ đưa lên / xuống một lớp; kèm Shift thì đưa lên trên cùng / xuống dưới cùng.
  • Enter kết thúc đường nhiều điểm; Escape thoát khỏi công cụ, tẩy hoặc vùng chọn.

Sự kiện

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 } hoặc { zoomArea }

Hoàn tác và làm lại phát ra drawingCreate, drawingRemove và drawingUpdate cho các hình vẽ mà chúng khôi phục, xoá đi hoặc thay đổi.

Danh mục

Đường

  • trendLine — kéo dài sang trái hoặc phải khi cần.
  • ray, extendedLine
  • horizontalLine, horizontalRay (về phía tương lai tính từ điểm của nó), verticalLine, crossLine
  • infoLine — kèm hộp thay đổi giá, số nến, thời gian và góc.
  • trendAngle — kèm góc hiển thị trên màn hình.

Kênh

  • parallelChannel — kèm đường giữa tuỳ chọn, kéo dài được về cả hai phía.
  • regressionChannel

Fibonacci

  • fibRetracement, fibExtension — các mức, giá và phần trăm có thể sửa, nhãn bên trái hoặc phải, nền, đảo chiều.
  • fibChannel, fibTimeZones, fibSpeedResistanceFan
  • fibArcs — các cung quanh điểm bắt đầu của một nhịp, nửa hoặc cả vòng tròn.
  • fibCircles — các vòng tròn ở bội số Fibonacci của một bán kính.
  • fibSpiral — xoắn ốc vàng từ tâm của nó.
  • fibWedge — các cung giữa hai đường xuất phát từ một đỉnh.

Gann và Pitchfork

  • pitchfork, schiffPitchfork, modifiedSchiffPitchfork
  • pitchfan — các tia từ một điểm pivot đi qua các mức nằm giữa hai điểm.
  • gannFan, gannBox, gannSquare

Hình

  • rectangle, circle, ellipse, triangle
  • polyline — một hình khép kín, mỗi lần bấm một điểm.
  • curve — uốn cong qua điểm thứ ba; arc — một cung tròn đi qua ba điểm.

Bút vẽ

  • brush, highlighter — vẽ tay.
  • path — một đường đi qua các điểm, có mũi tên ở cuối.

Mô hình

  • xabcdPattern, cypherPattern, abcdPattern, threeDrives — kèm các tỷ lệ của chúng.
  • headAndShoulders — kèm đường viền cổ.

Sóng Elliott

  • elliottWave (1–5, A–C), elliottImpulse, elliottCorrection, elliottTriangle, elliottDoubleCombo, elliottTripleCombo — nhãn theo kiểu của cấp sóng: ①, (1), 1 hoặc i.

Chu kỳ

  • cyclicLines, timeCycles, sineLine

Đo lường

  • measure, priceRange, dateRange, dateAndPriceRange

Chú thích và đánh dấu

  • text, note (một chiếc ghim kèm chữ), callout, priceLabel
  • arrow, arrowMark (lên, xuống, trái hoặc phải, kèm nhãn), flag, icon (ngôi sao, trái tim, dấu tích, dấu chéo, hình tròn, tam giác, tia sét)

Dự báo

  • riskReward — Vị thế Long/Short (ở trên).
  • forecast — chuyển xanh khi giá chạm mục tiêu, chuyển đỏ khi hết thời gian trước đó.
  • projection — một nhịp được chiếu tiếp từ điểm thứ ba.
  • barsPattern — bản sao của một số nến, dưới dạng nến, đường hoặc cao-thấp, đảo chiều thời gian hoặc lật ngược.
  • anchoredVWAP, volumeProfileRange

Lưu

const json = chart.saveState()   // hình vẽ cùng cài đặt và nhóm của chúng, chỉ báo, cảnh báo…
chart.loadState(json)            // kiểm tra từng hình vẽ; hình vẽ sai định dạng bị bỏ

Công cụ của riêng bạn

Một công cụ là một DrawingPlugin được đăng ký bằng chart.registerDrawingTool(plugin). Descriptor của nó liệt kê các cài đặt (options), cách vẽ (creation), và việc có màu nền hay chữ hay không; nó có thể cho biết giá của các đường (priceAt, dùng cho cảnh báo), các điểm kéo di chuyển không phải điểm neo (moveHandle), và nhận các nến của biểu đồ (setDataGetter). Xem Plugin.