4-3、Widget方法 · tradingView開發文檔

# 4-3、Widget方法 # Widget方法 - - - - - - 以下是widget支持的方法列表。您可以使用widget構造函數返回給您的widget對象來調用它們。 **Remark**: 請注意，只有在onChartReady回調觸發后才可以調用這些方法。 ``` widget.onChartReady(function() { // 現在可以調用其他widget的方法了 }); ``` # Methods - 訂閱圖表事件 - [onChartReady(callback)](#onchartreadycallback) - [headerReady()](#headerready) - [onGrayedObjectClicked(callback)](#ongrayedobjectclickedcallback) - [onShortcut(shortcut, callback)](#onshortcutshortcut-callback) - [subscribe(event, callback)](#subscribeevent-callback) - [unsubscribe(event, callback)](#unsubscribeevent-callback) - 圖表動作 - [chart()](Widget-Methods.html#chart) - [setLanguage(locale)](Widget-Methods.html#setlanguagelocale) - [setSymbol(symbol, interval, callback)](Widget-Methods.html#setsymbolsymbol-interval-callback) - [remove()](Widget-Methods.html#remove) - [closePopupsAndDialogs()](Widget-Methods.html#closepopupsanddialogs) - [selectLineTool(drawingId)](Widget-Methods.html#selectlinetooldrawingid) - [selectedLineTool()](Widget-Methods.html#selectedlinetool) - [takeScreenshot()](Widget-Methods.html#takeScreenshot) - [lockAllDrawingTools()](Widget-Methods.html#lockAllDrawingTools) - [hideAllDrawingTools()](Widget-Methods.html#hideAllDrawingTools) - 保存/加載圖表 - [save(callback)](Widget-Methods.html#savecallback) - [load(state)](Widget-Methods.html#loadstate) - [getSavedCharts(callback)](Widget-Methods.html#getsavedchartscallback) - [loadChartFromServer(chartRecord)](Widget-Methods.html#loadchartfromserverchartrecord) - [saveChartToServer(onCompleteCallback, onFailCallback, saveAsSnapshot, options)](Widget-Methods.html#savecharttoserveroncompletecallback-onfailcallback-saveassnapshot-options) - [removeChartFromServer(chartId, onCompleteCallback)](Widget-Methods.html#removechartfromserverchartid-oncompletecallback) - 自定義UI控件 - [onContextMenu(callback)](Widget-Methods.html#oncontextmenucallback) - [createButton(options)](Widget-Methods.html#createbuttonoptions) - 對話框 - [showNoticeDialog(params)](Widget-Methods.html#shownoticedialogparams) - [showConfirmDialog(params)](Widget-Methods.html#showconfirmdialogparams) - [showLoadChartDialog()](Widget-Methods.html#showloadchartdialog) - [showSaveAsChartDialog()](Widget-Methods.html#showsaveaschartdialog) - Getters - [symbolInterval(callback)](Widget-Methods.html#symbolintervalcallback) - [mainSeriesPriceFormatter()](Widget-Methods.html#mainseriespriceformatter) - [getIntervals()](Widget-Methods.html#getintervals) - [getStudiesList()](Widget-Methods.html#getstudieslist) - 定制 - [changeTheme(themeName)](Widget-Methods.html#changethemethemename) - [addCustomCSSFile(url)](Widget-Methods.html#addcustomcssfileurl) - [applyOverrides(overrides)](Widget-Methods.html#applyoverridesoverrides) - [applyStudiesOverrides(overrides)](Widget-Methods.html#applystudiesoverridesoverrides) - ![](https://box.kancloud.cn/2869f58f691f1e2af0bf569197459ff8_20x20.png)[交易終端特制](Trading-Terminal.html) - [watchList()](Widget-Methods.html#watchlist) - ![](https://box.kancloud.cn/2869f58f691f1e2af0bf569197459ff8_20x20.png)多圖表布局 - [chart(index)](Widget-Methods.html#chartindex) - [activeChart()](Widget-Methods.html#activechart) - [chartsCount()](Widget-Methods.html#chartscount) - [layout()](Widget-Methods.html#layout) - [setLayout(layout)](Widget-Methods.html#setlayoutlayout) # 訂閱圖表事件 #### [onChartReady(callback)](#onchartreadycallback) 1. `callback`: function() 當圖表初始化并準備就緒時，圖表庫將調用提供的回調。你可以從這一刻安全地調用所有其他方法。 ### headerReady() 返回一個`Promise`對象，該對象應該在圖表庫頭部widget API準備就緒時用于處理其他事件（例如: [createButton](#createbuttonoptions)）。 #### onGrayedObjectClicked(callback) 1. `callback`: function(subject) 1. `subject`: object`{type, name}` 1. `type`:`drawing`|`study` 2. `name`: string, 被點擊的主題名稱每次用戶點擊灰色的對象時，圖表庫都會調用此回調函數。例： ``` new TradingView.widget({ drawings_access: { type: "black", tools: [ { name: "Regression Trend" }, { name: "Trend Angle", grayed: true }, ] }, studies_access: { type: "black", tools: [ { name: "Aroon" }, { name: "Balance of Power", grayed: true }, ] }, <...> // other widget settings }); widget.onChartReady(function() { widget.onGrayedObjectClicked(function(data) { // 當您嘗試創建力量平衡指標或趨勢圖形時 // 此方法將被調用 alert(data.name + " is grayed out!"); }) }); ``` #### onShortcut(shortcut, callback) 1. `shortcut` 2. `callback`: function(data) 每當按下快捷鍵時，圖書館將會調用此回調。例: ``` widget.onShortcut("alt+s", function() { widget.executeActionById("symbolSearch"); }); ``` #### subscribe(event, callback) 1. `event`: can be Event nameLibrary VersionDescriptiontoggle\_sidebar繪圖工具欄顯示/隱藏indicators\_dialog顯示指標對話框toggle\_header圖表頭顯示/隱藏edit\_object\_dialog顯示圖/指標屬性對話框chart\_load\_requested即將載入的新圖表chart\_loadedmouse\_downmouse\_updrawing1.7在圖表上增加繪圖。參數包含具有`value`字段的對象，該字段為繪圖的名稱。study1.7在圖表上增加指標。參數包含具有`value`字段的對象，該字段為指標的名稱。undo1.7redo1.7reset\_scales1.7復位比例按鈕被點擊后compare\_add1.7顯示比較對話框add\_compare1.7添加比較工具load\_study template1.7指標模板被載入后onTick回調將被調用每當最近的K線更新時onAutoSaveNeeded每當用戶更改圖表時，庫將調用該回調。`Chart change`意味著可以撤消用戶的任何操作。回調不會在五秒內多次調用。參見[auto\_save\_delay](Widget-Constructor#auto_save_delay)onScreenshotReady每當用戶創建屏幕截圖和服務器返回創建的圖像名稱時。onMarkClick每次當用戶點擊K線上的標記時。[mark on bar](Marks-On-Bars). 標記ID將作為參數傳遞。onTimescaleMarkClick每當用戶單擊時間刻度標記時，將調用回調。標記ID將作為參數傳遞onSelectedLineToolChanged每次當選擇的線工具更改時，將調用回調。![](https://box.kancloud.cn/2869f58f691f1e2af0bf569197459ff8_20x20.png)layout\_about\_to\_be\_changed要更改圖表的數量或位置時![](https://box.kancloud.cn/2869f58f691f1e2af0bf569197459ff8_20x20.png)layout\_changed已經更改圖表的數量或位置時![](https://box.kancloud.cn/2869f58f691f1e2af0bf569197459ff8_20x20.png)activeChartChanged活動圖表被更改2\.`callback`: function(arguments) 當GUI事件發生時，圖表庫將調用回調。每個事件都可以有不同的參數。 #### unsubscribe(event, callback) 取消訂閱特定事件 (即上表中的事件之一) 。 # 圖表功能 #### chart() 返回圖表對象，可用于調用[Chart-Methods](Chart-Methods.html) #### setLanguage(locale) 1. `locale`: [language code](Localization.html) 設置Widget的語言。目前此調用將重新加載圖表。請避免使用它。 #### setSymbol(symbol, interval, callback) 1. `symbol`: string 2. `interval`: string 3. `callback`: function() 使圖表更改其商品和周期。新商品的數據到達后調用回調。 #### remove() 從您的頁面中刪除widget。 #### closePopupsAndDialogs() 調用此方法會關閉上下文菜單或對話框（如果已顯示）。 #### selectLineTool(drawingId) 1. `drawingId`: 可以為一個[標識符](Shapes-and-Overrides.html) 或 1. `cursor` 2. `dot` 3. `arrow_cursor` 4. `eraser` 5. `measure` 6. `zoom` 7. `brush` 選擇與繪圖按鈕上的單擊相同的圖形或光標。 #### selectedLineTool() 返回所選圖形或光標的[標識符](Shapes-and-Overrides.html)（見上文）。 ### takeScreenshot() 此方法創建圖表的快照并將其上傳到服務器。完成后, 調用 [onScreenshotReady](#subscribeevent-callback) 回調函數。快照的 URL 將作為參數傳遞給回調函數。 ### lockAllDrawingTools() 此方法返回一個 [WatchedValue](WatchedValue.html) 對象, 可用于讀取/設置/監視 "鎖定所有繪圖工具" 按鈕的狀態。 ### hideAllDrawingTools() 此方法返回 [WatchedValue](WatchedValue.html) 對象, 該對象可用于讀取/設置/監視 "隱藏所有繪圖工具" 按鈕的狀態。 # 保存/加載圖表 #### save(callback) 1. `callback`: function(object) 將圖表狀態保存到JS對象。圖表庫將調用您的回調函數并將狀態對象作為參數傳遞。此調用是低級[保存/加載API](Saving-and-Loading-Charts.html)的一部分。 #### load(state) 1. `state`: object 從`state`對象加載圖表。此調用是低級[保存/加載API](Saving-and-Loading-Charts.html)的一部分。 #### getSavedCharts(callback) 1. `callback`: function(objects) `objects`is an array of: 1. `id` 2. `name` 3. `image_url` 4. `modified_iso` 5. `short_symbol` 6. `interval` 返回當前用戶在服務器上保存的圖表描述列表。 #### loadChartFromServer(chartRecord) 1. `chartRecord`是您使用[getSavedCharts(callback)](Widget-Methods.html#getsavedchartscallback) 返回的對象從服務器加載并顯示圖表。 #### saveChartToServer(onCompleteCallback, onFailCallback, saveAsSnapshot, options) 1. `onCompleteCallback`: function() 2. `onFailCallback`: function() 3. `saveAsSnapshot`: should be always`false` 4. `options`: object`{ chartName }` 1. `chartName`: 圖表名稱。應指定新圖表并重命名。 2. `defaultChartName`: 圖表的默認名稱。如果當前圖表沒有名稱，它將被使用。將當前圖表保存到服務器。 #### removeChartFromServer(chartId, onCompleteCallback) 1. `chartId`:`調用`[getSavedCharts(callback)](Widget-Methods.html#getsavedchartscallback)后獲得的`id` 2. `onCompleteCallback`: function() 從服務器移除圖表。 # 自定義UI控件 #### onContextMenu(callback) 1. `callback`: function(unixtime, price). 此回調將返回一個值（見下文）。當用戶打開圖表上的菜單時，庫將調用回調函數。UNIX時間和菜單點的價格將作為參數提供。要自定義菜單項，您必須返回項目描述數組。項目描述對象具有以下結構： ``` { position: 'top' | 'bottom', text: 'Menu item text', click: <onItemClicked callback> } ``` - `position`: 項目在菜單中的位置 - `text`: 菜單項文本 - `click`: 當用戶選擇您的菜單項時將被調用添加分隔符使用減號。例:`{ text: "-", position: "top" }`. 要從菜單中刪除現有項目，請在項目文本前面使用減號。例:`{ text: "-Objects Tree..." }` 例: ``` widget.onChartReady(function() { widget.onContextMenu(function(unixtime, price) { return [{ position: "top", text: "First top menu item, time: " + unixtime + ", price: " + price, click: function() { alert("First clicked."); } }, { text: "-", position: "top" }, { text: "-Objects Tree..." }, { position: "top", text: "Second top menu item 2", click: function() { alert("Second clicked."); } }, { position: "bottom", text: "Bottom menu item", click: function() { alert("Third clicked."); } }]; }); ``` #### createButton(options) 1. `options`: object`{ align: "left" }` 1. `align`: "right" | "left". default: "left" 在圖表的頂部工具欄中創建一個新的DOM元素，并為此按鈕返回[HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement)。您可以使用它在圖表上添加自定義控件。 **注意：**必須在[headerReady](%EF%BC%83headerready)返回的 `Promise` 為resolved之后使用。例： ``` widget.headerReady().then(function() { var button = widget.createButton(); button.setAttribute('title', 'My custom button tooltip'); button.addEventListener('click', function() { alert("My custom button pressed!"); }); button.textContent = 'My custom button caption'; }); ``` # 對話框 **Since 1.6 version** #### showNoticeDialog(params) 1. `params`: 對象: 1. `title`: 標題 2. `body`: 正文 3. `callback`: 當按下ok按鈕時調用的函數。此方法顯示一個對話框，其中包含自定義標題和文本以及“確定”按鈕。 #### showConfirmDialog(params) 1. `params`: 對象: 1. `title`: 標題 2. `body`: 正文 3. `callback(result)`: 當按下ok按鈕時調用的函數。 `result`點擊ok時為`true`, 否則為`false`。此方法顯示一個帶有自定義標題和文本以及"確定"、"取消"按鈕的對話框。 #### showLoadChartDialog() 顯示加載圖表對話框。 #### showSaveAsChartDialog() 顯示另存為...圖表對話框。 # Getters #### symbolInterval(callback) 1. `callback`: function(result) 1. `result`: object`{symbol, interval}` **由于1.4開始方法會立即返回結果。回調是為了保證兼容性。** 圖表庫將調用回調函數，參數對象包含圖表商品和時間周期。 #### mainSeriesPriceFormatter() 返回一個帶有`format`方法的對象，用來批量格式化價格。被引入在1.5. #### getIntervals() 返回支持的周期數組。被引入在1.7. #### getStudiesList() 返回全部技術指標數組，您可以通過它們創建技術指標指示器。 # 定制 #### changeTheme(themeName) *從1.13版開始.* 1. `themeName` 可以為 `"Light"` | `"Dark"` 此方法更改圖表主題而不重新加載圖表。您還可以使用Widget構造函數中的[theme](Widget-Constructor.html#theme)來創建具有自定義主題的圖表。 #### addCustomCSSFile(url) 1. `url` 絕對或相對路徑的 `static` 文件夾該方法在版本`1.3`中引入。從1.4開始，使用[custom\_css\_url](Widget-Constructor.html#loadlastchart)替代。 #### applyOverrides(overrides) *該方法在版本`1.5`中引入* 1. `overrides`為一個對象，和[overrides](Widget-Constructor.html#overrides)相同。此方法在不重新加載圖表的情況下將覆蓋應用屬性。 #### applyStudiesOverrides(overrides) *該方法在版本`1.9`中引入* 1. `overrides` 為一個對象，和[studies\_overrides](Widget-Constructor.html#studiesoverrides)相同。此方法將重寫指標的指標樣式或輸入參數，而無需重新加載圖表。 # ![](https://box.kancloud.cn/2869f58f691f1e2af0bf569197459ff8_20x20.png)交易終端特制以下方法只在[交易終端](Trading-Terminal)可用. #### ![](https://box.kancloud.cn/2869f58f691f1e2af0bf569197459ff8_20x20.png)watchList() *該方法在版本`1.9`中引入* 返回一個對象來操作觀察列表。該對象具有以下方法： 1. `defaultList()`- 允許您獲取默認的商品列表。 2. `getList(id?: string)`- 允許您獲取商品列表。如果未傳遞`id` 則返回當前列表。如果沒有監視列表則返回 `null` 。 3. `getActiveListId()` - 允許您獲取當前列表的ID。如果沒有監視列表則返回`null` 。 4. `getAllLists()` - 允許您獲取所有列表。如果沒有監視列表則返回`null` 。 5. `setList(symbols: string[])`- 允許您將商品列表設置到觀察列表中。它將替換整個列表。**過時。將在 `1.13`版本中刪除。用 `updateList` 替換。** 6. `updateList(listId: string, symbols: string[])` - 允許您編輯商品列表。 7. `renameList(listId: string, newName: string)` - 允許您將列表重命名為 `newName`. 8. `createList(listName?: string, symbols?: string[])` - 允許您創建具有`listName` 名稱的符號列表。如果未傳遞 `listName` 參數或者沒有監視列表，則返回 `null`。 9. `saveList(list: SymbolList)` - 允許您保存一個商品列表， `list` 是具有以下key的集合對象: ``` id: string; title: string; symbols: string[]; ``` 如果沒有監視列表或者已有一個等價列表，則返回`false` 否則返回 `true` 。 1. `deleteList(listId: string)` - 允許您刪除商品列表。 2. `onListChanged()`- 當在監視列表中的商品更改時, 可以使用此方法進行通知。您可以使用此方法返回的 [Subscription](Subscription.html)對象進行訂閱和取消訂閱。 3. `onActiveListChanged()` - 當選擇了不同的監視列表時, 可以使用此方法進行通知。您可以使用此方法返回的 [Subscription](Subscription.html)對象進行訂閱和取消訂閱。 4. `onListAdded()` - - 當新的列表添加到監視列表中時, 可以使用此方法進行通知。您可以使用此方法返回的 [Subscription](Subscription.html)對象進行訂閱和取消訂閱。 5. `onListRemoved()` - 當監視列表中刪除商品列表時, 可以使用此方法進行通知。您可以使用此方法返回的 [Subscription](Subscription.html)對象進行訂閱和取消訂閱。 6. `onListRenamed()` - - 當監視列表中重命名商品列表時, 可以使用此方法進行通知。您可以使用此方法返回的 [Subscription](Subscription.html)對象進行訂閱和取消訂閱。 # ![](https://box.kancloud.cn/2869f58f691f1e2af0bf569197459ff8_20x20.png)多圖表布局 #### ![](https://box.kancloud.cn/2869f58f691f1e2af0bf569197459ff8_20x20.png)chart(index) 1. `index`: 從0開始的圖表索引，默認為0。返回chart對象，用于調用[Chart-Methods](Chart-Methods.html) #### ![](https://box.kancloud.cn/2869f58f691f1e2af0bf569197459ff8_20x20.png)activeChart() 返回當前chart對象，用于調用[Chart-Methods](Chart-Methods.html) #### ![](https://box.kancloud.cn/2869f58f691f1e2af0bf569197459ff8_20x20.png)chartsCount() 返回當前布局的圖表數目。 #### ![](https://box.kancloud.cn/2869f58f691f1e2af0bf569197459ff8_20x20.png)layout() 返回當前布局模式。可能的值：`4`,`6`,`8`,`s`,`2h`,`2-1`,`2v`,`3h`,`3v`,`3s`. #### ![](https://box.kancloud.cn/2869f58f691f1e2af0bf569197459ff8_20x20.png)setLayout(layout) 1. `layout`: Possible values:`4`,`6`,`8`,`s`,`2h`,`2-1`,`2v`,`3h`,`3v`,`3s`. 變更當前圖表布局。 # 也可以看看 - [圖表方法](Chart-Methods.html) - [定制概述](Customization-Overview.html) - [Widgetg構造函數](Widget-Constructor.html) - [存儲與加載圖表](Saving-and-Loading-Charts.html) - [指標覆蓋默](Studies-Overrides.html) - [覆蓋](Overrides.html)