# 4-2、Widget構造器 # Widget構造器 - - - - - - 當調用構造函數時，您可以定義圖表庫widget的參數。例： ``` new TradingView.widget({ symbol: 'A', interval: 'D', timezone: "America/New_York", container_id: "tv_chart_container", locale: "ru", datafeed: new Datafeeds.UDFCompatibleDatafeed("https://demo_feed.tradingview.com") }); ``` 查看下列完整支持的參數列表。請記住，在圖表初始化后在更改這些參數是不起作用的。如果要在初始化圖表之后更改圖表的狀態，請使用[widget方法](Widget-Methods.html)。 屬性標記為的只在交易終端可用。 #### symbol, interval 您的圖表的初始商品和周期。`interval`的格式在另一篇[文章](Resolution.html)中說明。 *必須項* #### timeframe 設置圖表的初始時間范圍。時間范圍是加載并顯示在屏幕上的K線范圍。有效的時間范圍是一個數字加一個字母，D為數天，M為數月。 #### container\_id `id`屬性為指定要包含widget的DOM元素id。 *必須項* #### datafeed JavaScript對象的實現接口 [JS API](JS-Api.html) 以反饋圖表及數據。 *必須項* #### timezone 圖表的初始時區。時間刻度上的數字取決于這個時區。請參閱[支持的時區列表](Symbology.html#timezone)。設置為交易所時區。覆蓋默認值，您應該使用[覆蓋章節](Widget-Constructor.html#overrides)。 #### debug 將此屬性設置為 `true`時，可使圖表將詳細的API日志寫入控制臺。與功能集的`charting_library_debug_mode`用法相同。 #### library\_path `static`文件夾的路徑 #### width, height widget的尺寸，請確保widget擁有足夠的空間。 **Remark**: 如果您想讓圖表占據所有可用的空間，請不要使用 '100%' 這樣的字段。使用`fullscreen`參數來代替（見下文）。這是因為DOM節點在不同瀏覽器中有調整大小的問題。 #### fullscreen *默認值:*`false` 布爾值顯示圖表是否占用窗口中所有可用的空間。 #### autosize *默認值:*`false` 布爾值，顯示圖表是否應使用容器中的所有可用空間，并在調整容器本身大小時自動調整大小。 #### symbol\_search\_request\_delay 延遲閾值（以毫秒為單位），用于在用戶在搜索框中鍵入商品名稱時減少商品搜索請求的數量。 #### auto\_save\_delay 延遲秒數等待 `onAutoSaveNeeded` 可以被再次調用。 該參數介紹在1.5版本中。 #### toolbar\_bg 工具欄背景顏色 #### study\_count\_limit *自1.5版本起。* 多圖布局圖表的最大指標數量。 最小值為2。 #### studies\_access 版本：1.1具有以下結構的對象： ``` { type: "black" | "white", tools: [ { name: "<study name>", grayed: true }, < ... > ] } ``` - `type`是列表類型。 支持的值:`black`(所有列出的項目會被禁用),`white`(只有列出的項目會被啟用)。 - `tools`對象數組。每個對象可以具有以下屬性： - `name`(強制的) 指標的名稱。使用相同的名稱，你可以看到他們在指標控件。 - `grayed`布爾值，表明這項指標將可見，但看起來像是被禁用的。 如果指標為`grayed`，當用戶點擊它時，會調用`onGrayedObjectClicked`回調方法。 #### drawings\_access 版本：1.1 該屬性與上述的`studies_access`具有相同的結構。 使用與您在UI中看到的名稱相同的名稱。 **Remark**: 基于字體的繪圖有一個特殊情況。 使用`Font Icons`的名字時， 這個組是一個特例，它的繪圖不能被啟用或禁用 - 可以啟用或禁用整個組。 #### saved\_data JS對象包含保存的圖表內容（JSON，請參閱下面的保存/加載調用）。如果在創建圖表時已經有圖表的JSON，請使用此參數。如果要將圖表內容加載到已初始化的圖表中，請使用`loadData()`控件方法。 #### locale 圖表庫的本地化處理 。詳情：[本地化](Localization.html) #### numeric\_formatting 該對象包含數字的格式化選項。目前唯一可能的選擇是`decimal_sign`。例:`numeric_formatting: { decimal_sign: "," }` #### customFormatters 它是一個包含以下字段的對象： 1. timeFormatter 2. dateFormatter 您可以使用這些格式化方法自定義顯示日期和時間的值。這兩個值都是具有方法`format`和`formatLocal`的對象: ``` function format(date) function formatLocal(date) ``` 這些函數返回表示date或time的文本。`formatLocal`將日期和時間轉換為本地時區。 例: ``` customFormatters: { timeFormatter: { format: function(date) { var _format_str = '%h:%m'; return _format_str.replace('%h', date.getUTCHours(), 2). replace('%m', date.getUTCMinutes(), 2). replace('%s', date.getUTCSeconds(), 2); } }, dateFormatter: { format: function(date) { return date.getUTCFullYear() + '/' + date.getUTCMonth() + '/' + date.getUTCDate(); } } } ``` #### overrides 對Widget對象的默認屬性進行覆蓋。 覆蓋屬性意味著為其分配默認值。 您可以覆蓋大部分圖表的屬性（也可以由用戶通過UI編輯）使用`overrides`參數構造控件 。`overrides`應該是一個具有范圍的對象。每個字段名是重寫屬性的名稱，字段值是這些屬性的期望值。例子: ``` overrides: { "symbolWatermarkProperties.color": "rgba(0, 0, 0, 0)" } ``` 這個 `override`將使水印100％不透明（不可見）。 所有可定制的屬性都列在[單獨的文章](Overrides.html)中。 從1.5開始，您可以使用繪圖覆蓋。[繪圖覆蓋](Drawings-Overrides.html). #### disabled\_features, enabled\_features 包含功能在默認情況下啟用/禁用名稱的數組。功能表示圖表功能的一部分（更是UI/UX的一部分）。 [這里](http://tradingview.gitee.io/featuresets). 此處列出了支持的功能。 例： ``` TradingView.onready(function() { var widget = new TradingView.widget({ /* .... */ disabled_features: ["header_widget", "left_toolbar"], enabled_features: ["move_logo_to_main_pane"] }); }); ``` #### snapshot\_url 當用戶按快照按鈕時,使用base64編碼將當前圖表快照保存并返回URL。該服務返回完整的保存圖像URL。 #### indicators\_file\_name 包含您編寫的指標的文件路徑。 查看[更多細節](Creating-Custom-Studies.html)。 #### preset `preset`是一組預定義窗口小部件設置的名稱。預設中使用的所有設置也可以直接在窗口小部件的構造函數中使用。現在只支持`mobile`預設。此預設的示例可[在線獲取](https://demo_chart.tradingview.com/mobile_black.html)。 #### studies\_overrides 使用此選項自定義默認指標的樣式及輸入值。 您還可以使用此參數自定義`Compare`數據列的樣式和輸入值。 [查看更多](Studies-Overrides.html) #### time\_frames 在圖表底部的時間范圍選擇器中可以看見這個時間范圍列表。 例： ``` time_frames: [ { text: "50y", resolution: "6M", description: "50 Years" }, { text: "3y", resolution: "W", description: "3 Years", title: "3yr" }, { text: "8m", resolution: "D", description: "8 Month" }, { text: "3d", resolution: "5", description: "3 Days" }, { text: "1000y", resolution: "W", description: "All", title: "All" }, ] ``` 時間范圍是一個包含`text`和`resolution屬性的對象。文本必須具有以下格式：<integer><y|m|d>`( \\d+(y|m|d) 為正則表達式 ). 周期是具有通用周期格式的字符串. 請參閱[本主題](Time-Frames.html)了解有關時間范圍的更多信息。在1.7中添加了描述屬性，并顯示在彈出菜單中。此參數是可選的（如果時間范圍描述符不包含此屬性：title（如果指定）或使用）。title屬性在1.9中添加，此值將覆蓋從text屬性生成的默認標題。 此參數是可選的。 #### charts\_storage\_url, client\_id, user\_id 這些參數是有關于高階圖表的保存/加載。 查看[更多細節](Saving-and-Loading-Charts.html). #### charts\_storage\_api\_version 您的后臺版本。支持的值:`"1.0"`|`"1.1"`。 指標模板從`1.1`開始得到支持。 #### load\_last\_chart 將此參數設置為`true`如果您希望庫加載用戶的最后一張圖表（您也應該具有\[save/load|Saving-and-Loading-Charts\]）。 ### theme *從1.13版開始。* 為圖表添加自定義主題顏色。 支持的值是: `"Light"` | `"Dark"`. #### custom\_css\_url (since 1.4) 將您的自定義CSS添加到圖表中。url應該是到'static`文件夾的絕對或相對路徑。 #### loading\_screen (since 1.12) 定制加載進度條。值是具有以下可能 `key` 的對象。 - `backgroundColor` - `foregroundColor` Example: ``` loading_screen: { backgroundColor: "#000000" } ``` #### favorites 默認支持該項目。此選項需要禁用localstorage的使用（請參閱[功能集](Featuresets.html)以了解更多)。`favorites`property 為一個對象，擁有以下屬性： - **intervals(周期)**: 收藏的周期數組。 例：`["D", "2D"]` - **chartTypes(圖表類型)**: 收藏的圖表類型數組 。圖表類型名稱與圖表的UI中的英文版本相同。 例:`["Area", "Candles"]` #### save\_load\_adapter (since 1.12) 包含保存/加載功能的對象。 如果設置了，應有以下方法： **Chart layouts** 1. `getAllCharts(): Promise<ChartMetaInfo[]>` 獲取所有保存的圖表。 `ChartMetaInfo` 具有以下字段的對象: - `id` - 圖表id - `name` - 圖表名 - `symbol` - 圖表的商品 - `resolution` - 周期 - `timestamp` - 最后修改日期（從01/01/2015 UTC午夜開始的毫秒數）。 2. `removeChart(chartId): Promise<void>` 刪除圖表。 `chartId`是圖表的唯一ID（參見上面的`getAllCharts`）。 3. `saveChart(chartData: ChartData): Promise<ChartId>` 存儲圖表。 `ChartData` 具有以下字段的對象: - `id` - 圖表的唯一標識（如果未保存則可能是`undefined`）。 - `name` - 圖表名 - `symbol` - 圖表的商品 - `resolution` - 周期 - `content` - 圖表的內容 `ChartId` - 圖表唯一id (string) 4. `getChartContent(chartId): Promise<ChartContent>` 通過服務器加載圖表 `ChartContent` 帶有圖表內容的字符串（參見`saveChart`函數中的`ChartData :: content`字段）。 **Study Templates** 1. `getAllStudyTemplates(): Promise<StudyTemplateMetaInfo[]>` 獲取所有保存的指標模板。 `StudyTemplateMetaInfo` 具有以下字段的對象: - `name` - 指標模板名稱 2. `removeStudyTemplate(studyTemplateInfo: StudyTemplateMetaInfo): Promise<void>` 刪除指標模板 3. `saveStudyTemplate(studyTemplateData: StudyTemplateData): Promise<void>` 存儲指標模板 `StudyTemplateData` 具有以下字段的對象: - `name` - 指標模板名稱 - `content` - 指標模板的內容 4. `getStudyTemplateContent(studyTemplateInfo: StudyTemplateMetaInfo): Promise<StudyTemplateContent>` 通過服務器加載指標模板 `StudyTemplateContent` - 指標模板的內容 (string) 如果同時設置了 `charts_storage_url` 和 `save_load_adapter` 將被設置 - `save_load_adapter` **重要：** 所有函數應該返回`Promise`（或`Promise`類對象）。 #### settings\_adapter (since 1.11) 包含設置/刪除的方法。 使用它將圖表設置保存到您的首選存儲，包括服務器端。 如果設置了，應該有以下方法： 1. `initialSettings: Object`初始化設置 2. `setValue(key: string, value: string): void`存儲鍵/值對 3. `removeValue(key: string): void`刪除鍵 ##  交易終端專屬 ####  widgetbar 該對象包含圖表右側窗口小部件欄的設置。 右側窗口小部件欄中的數據窗口，觀察列表和詳細信息選項卡可以使用Widget構造函數中的widgetbar 開啟此功能： ``` widgetbar: { details: true, watchlist: true, watchlist_settings: { default_symbols: ["NYSE:AA", "NYSE:AAL", "NASDAQ:AAPL"], readonly: false } } ``` - **details**: 啟用右側窗口小部件欄中的詳細信息窗口小部件。 - **watchlist**: 啟用右側小部件欄中的觀察列表小部件。 - **watchlist\_settings.default\_symbols <\[\]>**: 給觀察列表設置商品數組。 - \*\*watchlist\_settings.readonly: 給觀察列表開啟只讀模式。 ####  rss\_news\_feed 使用此屬性更改RSS新聞。 您可以為每個商品類型設置不同的rss，或為每個商品使用一個rss。 對象將擁有`default`屬性，其他屬性是可選的; 它們的名字為商品的類型. 每個屬性都擁有一個對象(或對象數組) 并且具有以下屬性: 1. `url`請求的URL。 它可以包含以下花括號中的標簽（將會被終端所更改）：`{SYMBOL}`,`{TYPE}`,`{EXCHANGE}。` 2. `name 在每一個新聞的底部顯示一個反饋。` 例: ``` { "default": [ { url: "https://articlefeeds.nasdaq.com/nasdaq/symbols?symbol={SYMBOL}", name: "NASDAQ" }, { url: "http://feeds.finance.yahoo.com/rss/2.0/headline?s={SYMBOL}&region=US&lang=en-US", name: "Yahoo Finance" } ] } ``` 另一個例子: ``` { "default": { url: "https://articlefeeds.nasdaq.com/nasdaq/symbols?symbol={SYMBOL}", name: "NASDAQ" } } ``` 更多例子: ``` { "default": { url: "https://articlefeeds.nasdaq.com/nasdaq/symbols?symbol={SYMBOL}", name: "NASDAQ" }, "stock": { url: "http://feeds.finance.yahoo.com/rss/2.0/headline?s={SYMBOL}&region=US&lang=en-US", name: "Yahoo Finance" } } ``` ####  news\_provider 代表新聞提供者的對象。 它可能包含以下屬性： 1. `is_news_generic`- 如果為`true`新聞小部件的標題將不會有產品名稱 (只有`Headlines`). 否則`SYMBOL_NAME`將會被添加。 2. `get_news`- 使用此屬性設置自己的新聞 getter 方法.`symbol`和`callback`將會傳遞給此方法。 回調函數被調用時，會傳遞一下結構的新聞對象: 1. `title`(必須) - 新聞項目標題。 2. `published`(必須) - 新聞項目時間（以ms為單位） 3. `source`(可選) - 標題的新聞項目來源。 4. `shortDescription`(可選) - 將顯示的新聞項目的簡短說明。 5. `link`(可選) - 新聞URL 6. `fullDescription`(可選) - 新聞項目的完整描述（正文） **注意:**當用戶點擊新聞項目時，將打開帶有`link`URL的新標簽頁。 如果沒有指定`link`，將顯示帶有`fullDescription`的對話框彈出窗口。 **注意2:**如果它設置為`rss_news_feed`則將會被忽略。 例: ``` news_provider: { is_news_generic: true, get_news: function(symbol, callback) { callback([ { title: 'It is news for symbol ' + symbol, shortDescription: 'Short description of the news item', fullDescription: 'Full description of the news item', published: new Date().valueOf(), source: 'My own news source', link: 'https://www.tradingview.com/' }, { title: 'Another news for symbol ' + symbol, shortDescription: 'Short description of the news item', fullDescription: 'Full description of the news item. Very long long long long long long long long text.', published: new Date().valueOf(), source: 'My own news source', } ]); } } ``` ####  trading\_controller(已廢棄) 交易控制器可以讓您在線交易。[閱讀更多](Trading-Controller.html) ``` new TradingView.widget({ /* ... */ trading_controller: new MyTradingController() }); ``` ####  brokerFactory 使用這個字段來傳遞構造[經紀商API](Broker-API.html)的實現函數。 這是一個接收[交易主機](Trading-Host.html)并返回[經紀商API](Broker-API.html)的函數。 ####  brokerConfig `brokerConfig: { configFlags: {...} }`使用此字段設置交易終端的配置標志。 [了解更多](Broker-API.html#tradingconfiguration) # 也可以看看 - [定制概述](Customization-Overview.html) - [Widget方法](Widget-Methods.html) - [功能集](Featuresets.html) - [存儲于加載圖表](Saving-and-Loading-Charts.html) - [覆蓋默認指標參數](Studies-Overrides.html) - [覆蓋默認圖表參數](Overrides.html)