描画ツール

69 種類の組み込み描画ツールがあります。どのツールもマグネットでバーに吸着し、 元に戻す / やり直すに対応し、独自の設定を持ち、レイアウトと一緒に保存されます。

ポインターで描画する

chart.setDrawingTool('trendLine')   // 次のクリックでトレンドラインを描く
chart.setDrawingTool(null)          // カーソルに戻る
chart.setStayInDrawingMode(true)    // 描画のたびにツールを維持する

ツールの描き方は次の 3 通りです：

  • クリック — 点ごとに 1 回クリックします（トレンドラインは 2 回、XABCD パターンは 5 回）。
  • フリーハンド — 押したままドラッグします。brush と highlighter。
  • パス — 点ごとに 1 回クリックし、ダブルクリック、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' }],
})

// 複数の変更を 1 回の元に戻す操作にまとめる
chart.updateDrawing(id, { style: { lineWidth: 2 }, options: { extendLeft: true } })

// 変更をプレビューするダイアログ：元に戻す操作は 1 回分、キャンセル時は元の状態に戻す
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)            // 元に戻す操作は 1 回分
chart.setDrawingsVisible(ids, false)
chart.setDrawingsLocked(ids, true)

グループ内の描画を 1 つクリックすると、グループ全体が選択されます。

消しゴム、ズーム、マグネット

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 — 頂点から伸びる 2 本の線の間の円弧。

ギャンとピッチフォーク

  • pitchfork、schiffPitchfork、modifiedSchiffPitchfork
  • pitchfan — ピボットから、2 点の間にあるレベルを通る半直線。
  • gannFan、gannBox、gannSquare

図形

  • rectangle、circle、ellipse、triangle
  • polyline — 閉じた図形。クリックごとに 1 点。
  • curve — 3 点目を通って曲がる線。arc — 3 点を通る円弧。

ブラシ

  • 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 — 値動きを 3 点目を起点に写し取ります。
  • barsPattern — 一部のバーのコピー。バー、ライン、高値-安値のいずれかで表示でき、左右反転や上下反転もできます。
  • anchoredVWAP、volumeProfileRange

保存

const json = chart.saveState()   // 描画とその設定・グループ、インジケーター、アラートなど
chart.loadState(json)            // すべての描画を検証し、不正なものは除外する

独自のツール

ツールは DrawingPlugin で、 chart.registerDrawingTool(plugin) で登録します。ディスクリプターには、 設定（options）、描き方（creation）、塗りつぶしやテキストの有無を 記述します。さらに、ラインの価格（アラート用の priceAt）、アンカーではない移動用ハンドル （moveHandle）を提供でき、チャートのバーを受け取ることもできます （setDataGetter）。プラグインを参照してください。