그리기 도구

내장 그리기 도구 69종을 제공합니다. 모든 도구는 자석으로 봉에 스냅되고, 실행 취소와 다시 실행을 지원하며, 각자의 설정을 유지하고, 레이아웃과 함께 저장됩니다.

포인터로 그리기

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 })

그림에 거는 알림

알림은 추세선, 반직선, 연장선, 수평선, 또는 평행 채널의 선을 따라가게 할 수 있습니다. 가격이 그 선의 최신 봉 위치를 교차할 때 발생하며, 선의 위치는 차트에 그려진 대로 정해집니다(봉 사이는 직선, 로그 눈금에서는 로그 가격 기준).

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)        // 다음 드래그로 상자 안의 봉을 확대
chart.setDrawingMagnetMode('strong') // 'off' | 'weak' | 'strong'

약한 자석은 포인터가 봉의 시가, 고가, 저가, 종가 가까이에 있을 때 점을 그 값에 스냅하고, 강한 자석은 항상 스냅합니다.

키보드

  • 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 — 가격 변화, 봉 수, 시간, 각도를 보여 주는 상자가 붙습니다.
  • 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 — 일부 봉의 복사본을 바, 선, 고가-저가 중 하나로 표시하며, 좌우 반전이나 상하 반전도 할 수 있습니다.
  • anchoredVWAP, volumeProfileRange

저장

const json = chart.saveState()   // 그림과 그 설정 및 그룹, 지표, 알림 등
chart.loadState(json)            // 모든 그림을 검사하며, 형식이 잘못된 그림은 제외됨

사용자 지정 도구

도구는 DrawingPlugin이며, chart.registerDrawingTool(plugin)으로 등록합니다. 디스크립터에는 설정(options), 그리는 방식 (creation), 채우기나 텍스트의 유무를 나열합니다. 또한 선의 가격 (알림에 쓰이는 priceAt)과 앵커가 아닌 이동 핸들(moveHandle)을 제공할 수 있고, 차트의 봉 데이터(setDataGetter)를 받을 수도 있습니다. 플러그인을 참고하세요.