{"path":"972225","ref":"13.md","title":"4-2、Widget构造器","content":"# 4-2、Widget构造器\n\n# Widget构造器\n\n- - - - - -\n\n当调用构造函数时，您可以定义图表库widget的参数。例：\n\n\n```\nnew TradingView.widget({\n    symbol: 'A',\n    interval: 'D',\n    timezone: \"America\/New_York\",\n    container_id: \"tv_chart_container\",\n    locale: \"ru\",\n    datafeed: new Datafeeds.UDFCompatibleDatafeed(\"https:\/\/demo_feed.tradingview.com\")\n});\n\n```\n查看下列完整支持的参数列表。请记住，在图表初始化后在更改这些参数是不起作用的。如果要在初始化图表之后更改图表的状态，请使用[widget方法](Widget-Methods.html)。\n\n属性标记为![](https:\/\/box.kancloud.cn\/2869f58f691f1e2af0bf569197459ff8_20x20.png)的只在交易终端可用。\n\n#### symbol, interval\n\n您的图表的初始商品和周期。`interval`的格式在另一篇[文章](Resolution.html)中说明。 *必须项*\n\n#### timeframe\n\n设置图表的初始时间范围。时间范围是加载并显示在屏幕上的K线范围。有效的时间范围是一个数字加一个字母，D为数天，M为数月。\n\n#### container\\_id\n\n`id`属性为指定要包含widget的DOM元素id。 *必须项*\n\n#### datafeed\n\nJavaScript对象的实现接口 [JS API](JS-Api.html) 以反馈图表及数据。 *必须项*\n\n#### timezone\n\n图表的初始时区。时间刻度上的数字取决于这个时区。请参阅[支持的时区列表](Symbology.html#timezone)。设置为交易所时区。覆盖默认值，您应该使用[覆盖章节](Widget-Constructor.html#overrides)。\n\n#### debug\n\n将此属性设置为 `true`时，可使图表将详细的API日志写入控制台。与功能集的`charting_library_debug_mode`用法相同。\n\n#### library\\_path\n\n`static`文件夹的路径\n\n#### width, height\n\nwidget的尺寸，请确保widget拥有足够的空间。\n\n**Remark**: 如果您想让图表占据所有可用的空间，请不要使用 '100%' 这样的字段。使用`fullscreen`参数来代替（见下文）。这是因为DOM节点在不同浏览器中有调整大小的问题。\n\n#### fullscreen\n\n*默认值:*`false`\n\n布尔值显示图表是否占用窗口中所有可用的空间。\n\n#### autosize\n\n*默认值:*`false`\n\n布尔值，显示图表是否应使用容器中的所有可用空间，并在调整容器本身大小时自动调整大小。\n\n#### symbol\\_search\\_request\\_delay\n\n延迟阈值（以毫秒为单位），用于在用户在搜索框中键入商品名称时减少商品搜索请求的数量。\n\n#### auto\\_save\\_delay\n\n延迟秒数等待 `onAutoSaveNeeded` 可以被再次调用。 该参数介绍在1.5版本中。\n\n#### toolbar\\_bg\n\n工具栏背景颜色\n\n#### study\\_count\\_limit\n\n*自1.5版本起。*\n\n多图布局图表的最大指标数量。 最小值为2。\n\n#### studies\\_access\n\n版本：1.1具有以下结构的对象：\n\n\n```\n{\n    type: \"black\" | \"white\",\n    tools: [\n        {\n            name: \"<study name>\",\n            grayed: true\n        },\n        < ... >\n    ]\n}\n\n```\n- `type`是列表类型。 支持的值:`black`(所有列出的项目会被禁用),`white`(只有列出的项目会被启用)。\n- `tools`对象数组。每个对象可以具有以下属性：\n  - `name`(强制的) 指标的名称。使用相同的名称，你可以看到他们在指标控件。\n  - `grayed`布尔值，表明这项指标将可见，但看起来像是被禁用的。 如果指标为`grayed`，当用户点击它时，会调用`onGrayedObjectClicked`回调方法。\n\n#### drawings\\_access\n\n版本：1.1 该属性与上述的`studies_access`具有相同的结构。 使用与您在UI中看到的名称相同的名称。\n\n**Remark**: 基于字体的绘图有一个特殊情况。 使用`Font Icons`的名字时， 这个组是一个特例，它的绘图不能被启用或禁用 - 可以启用或禁用整个组。\n\n#### saved\\_data\n\nJS对象包含保存的图表内容（JSON，请参阅下面的保存\/加载调用）。如果在创建图表时已经有图表的JSON，请使用此参数。如果要将图表内容加载到已初始化的图表中，请使用`loadData()`控件方法。\n\n#### locale\n\n图表库的本地化处理 。详情：[本地化](Localization.html)\n\n#### numeric\\_formatting\n\n该对象包含数字的格式化选项。目前唯一可能的选择是`decimal_sign`。例:`numeric_formatting: { decimal_sign: \",\" }`\n\n#### customFormatters\n\n它是一个包含以下字段的对象：\n\n1. timeFormatter\n2. dateFormatter\n\n您可以使用这些格式化方法自定义显示日期和时间的值。这两个值都是具有方法`format`和`formatLocal`的对象:\n\n\n```\nfunction format(date)\nfunction formatLocal(date)\n\n```\n这些函数返回表示date或time的文本。`formatLocal`将日期和时间转换为本地时区。\n\n例:\n\n\n```\ncustomFormatters: {\n  timeFormatter: {\n    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); }\n  },\n  dateFormatter: {\n    format: function(date) { return date.getUTCFullYear() + '\/' + date.getUTCMonth() + '\/' + date.getUTCDate(); }\n  }\n}\n\n```\n#### overrides\n\n对Widget对象的默认属性进行覆盖。 覆盖属性意味着为其分配默认值。 您可以覆盖大部分图表的属性（也可以由用户通过UI编辑）使用`overrides`参数构造控件 。`overrides`应该是一个具有范围的对象。每个字段名是重写属性的名称，字段值是这些属性的期望值。例子:\n\n\n```\noverrides: {\n    \"symbolWatermarkProperties.color\": \"rgba(0, 0, 0, 0)\"\n}\n\n```\n这个 `override`将使水印100％不透明（不可见）。 所有可定制的属性都列在[单独的文章](Overrides.html)中。 从1.5开始，您可以使用绘图覆盖。[绘图覆盖](Drawings-Overrides.html).\n\n#### disabled\\_features, enabled\\_features\n\n包含功能在默认情况下启用\/禁用名称的数组。功能表示图表功能的一部分（更是UI\/UX的一部分）。 [这里](http:\/\/tradingview.gitee.io\/featuresets). 此处列出了支持的功能。 例：\n\n\n```\nTradingView.onready(function()\n{\n    var widget = new TradingView.widget({\n        \/* .... *\/\n        disabled_features: [\"header_widget\", \"left_toolbar\"],\n        enabled_features: [\"move_logo_to_main_pane\"]\n    });\n});\n\n```\n#### snapshot\\_url\n\n当用户按快照按钮时,使用base64编码将当前图表快照保存并返回URL。该服务返回完整的保存图像URL。\n\n#### indicators\\_file\\_name\n\n包含您编写的指标的文件路径。 查看[更多细节](Creating-Custom-Studies.html)。\n\n#### preset\n\n`preset`是一组预定义窗口小部件设置的名称。预设中使用的所有设置也可以直接在窗口小部件的构造函数中使用。现在只支持`mobile`预设。此预设的示例可[在线获取](https:\/\/demo_chart.tradingview.com\/mobile_black.html)。\n\n#### studies\\_overrides\n\n使用此选项自定义默认指标的样式及输入值。 您还可以使用此参数自定义`Compare`数据列的样式和输入值。 [查看更多](Studies-Overrides.html)\n\n#### time\\_frames\n\n在图表底部的时间范围选择器中可以看见这个时间范围列表。 例：\n\n\n```\ntime_frames: [\n    { text: \"50y\", resolution: \"6M\", description: \"50 Years\" },\n    { text: \"3y\", resolution: \"W\", description: \"3 Years\", title: \"3yr\" },\n    { text: \"8m\", resolution: \"D\", description: \"8 Month\" },\n    { text: \"3d\", resolution: \"5\", description: \"3 Days\" },\n    { text: \"1000y\", resolution: \"W\", description: \"All\", title: \"All\" },\n]\n\n```\n时间范围是一个包含`text`和`resolution属性的对象。文本必须具有以下格式：<integer><y|m|d>`( \\\\d+(y|m|d) 为正则表达式 ). 周期是具有通用周期格式的字符串. 请参阅[本主题](Time-Frames.html)了解有关时间范围的更多信息。在1.7中添加了描述属性，并显示在弹出菜单中。此参数是可选的（如果时间范围描述符不包含此属性：title（如果指定）或使用）。title属性在1.9中添加，此值将覆盖从text属性生成的默认标题。 此参数是可选的。\n\n#### charts\\_storage\\_url, client\\_id, user\\_id\n\n这些参数是有关于高阶图表的保存\/加载。 查看[更多细节](Saving-and-Loading-Charts.html).\n\n#### charts\\_storage\\_api\\_version\n\n您的后台版本。支持的值:`\"1.0\"`|`\"1.1\"`。 指标模板从`1.1`开始得到支持。\n\n#### load\\_last\\_chart\n\n将此参数设置为`true`如果您希望库加载用户的最后一张图表（您也应该具有\\[save\/load|Saving-and-Loading-Charts\\]）。\n\n### theme\n\n*从1.13版开始。*\n\n为图表添加自定义主题颜色。 支持的值是: `\"Light\"` | `\"Dark\"`.\n\n#### custom\\_css\\_url (since 1.4)\n\n将您的自定义CSS添加到图表中。url应该是到'static`文件夹的绝对或相对路径。\n\n#### loading\\_screen (since 1.12)\n\n定制加载进度条。值是具有以下可能 `key` 的对象。\n\n- `backgroundColor`\n- `foregroundColor`\n\nExample:\n\n\n```\nloading_screen: { backgroundColor: \"#000000\" }\n\n```\n#### favorites\n\n默认支持该项目。此选项需要禁用localstorage的使用（请参阅[功能集](Featuresets.html)以了解更多)。`favorites`property 为一个对象，拥有以下属性：\n\n- **intervals(周期)**: 收藏的周期数组。 例：`[\"D\", \"2D\"]`\n- **chartTypes(图表类型)**: 收藏的图表类型数组 。图表类型名称与图表的UI中的英文版本相同。 例:`[\"Area\", \"Candles\"]`\n\n#### save\\_load\\_adapter (since 1.12)\n\n包含保存\/加载功能的对象。 如果设置了，应有以下方法：\n\n**Chart layouts**\n\n1. `getAllCharts(): Promise<ChartMetaInfo[]>`\n  \n  获取所有保存的图表。\n  \n  `ChartMetaInfo` 具有以下字段的对象:\n  \n  \n  - `id` - 图表id\n  - `name` - 图表名\n  - `symbol` - 图表的商品\n  - `resolution` - 周期\n  - `timestamp` - 最后修改日期（从01\/01\/2015 UTC午夜开始的毫秒数）。\n2. `removeChart(chartId): Promise<void>`\n  \n   删除图表。 `chartId`是图表的唯一ID（参见上面的`getAllCharts`）。\n3. `saveChart(chartData: ChartData): Promise<ChartId>`\n  \n   存储图表。\n  \n  `ChartData` 具有以下字段的对象:\n  \n  \n  - `id` - 图表的唯一标识（如果未保存则可能是`undefined`）。\n  - `name` - 图表名\n  - `symbol` - 图表的商品\n  - `resolution` - 周期\n  - `content` - 图表的内容\n  \n  `ChartId` - 图表唯一id (string)\n4. `getChartContent(chartId): Promise<ChartContent>`\n  \n   通过服务器加载图表\n  \n  `ChartContent` 带有图表内容的字符串（参见`saveChart`函数中的`ChartData :: content`字段）。\n\n**Study Templates**\n\n1. `getAllStudyTemplates(): Promise<StudyTemplateMetaInfo[]>`\n  \n   获取所有保存的指标模板。\n  \n  `StudyTemplateMetaInfo` 具有以下字段的对象:\n  \n  \n  - `name` - 指标模板名称\n2. `removeStudyTemplate(studyTemplateInfo: StudyTemplateMetaInfo): Promise<void>`\n  \n   删除指标模板\n3. `saveStudyTemplate(studyTemplateData: StudyTemplateData): Promise<void>`\n  \n   存储指标模板\n  \n  `StudyTemplateData` 具有以下字段的对象:\n  \n  \n  - `name` - 指标模板名称\n  - `content` - 指标模板的内容\n4. `getStudyTemplateContent(studyTemplateInfo: StudyTemplateMetaInfo): Promise<StudyTemplateContent>`\n  \n   通过服务器加载指标模板\n  \n  `StudyTemplateContent` - 指标模板的内容 (string)\n  \n  如果同时设置了 `charts_storage_url` 和 `save_load_adapter` 将被设置 - `save_load_adapter`\n  \n  **重要：** 所有函数应该返回`Promise`（或`Promise`类对象）。\n\n#### settings\\_adapter (since 1.11)\n\n包含设置\/删除的方法。 使用它将图表设置保存到您的首选存储，包括服务器端。 如果设置了，应该有以下方法：\n\n1. `initialSettings: Object`初始化设置\n2. `setValue(key: string, value: string): void`存储键\/值对\n3. `removeValue(key: string): void`删除键\n\n## ![](https:\/\/box.kancloud.cn\/2869f58f691f1e2af0bf569197459ff8_20x20.png) 交易终端专属\n\n#### ![](https:\/\/box.kancloud.cn\/2869f58f691f1e2af0bf569197459ff8_20x20.png) widgetbar\n\n该对象包含图表右侧窗口小部件栏的设置。 右侧窗口小部件栏中的数据窗口，观察列表和详细信息选项卡可以使用Widget构造函数中的widgetbar 开启此功能：\n\n\n```\nwidgetbar: {\n    details: true,\n    watchlist: true,\n    watchlist_settings: {\n        default_symbols: [\"NYSE:AA\", \"NYSE:AAL\", \"NASDAQ:AAPL\"],\n        readonly: false\n    }\n}\n\n```\n- **details**: 启用右侧窗口小部件栏中的详细信息窗口小部件。\n- **watchlist**: 启用右侧小部件栏中的观察列表小部件。\n- **watchlist\\_settings.default\\_symbols <\\[\\]>**: 给观察列表设置商品数组。\n- \\*\\*watchlist\\_settings.readonly: 给观察列表开启只读模式。\n\n#### ![](https:\/\/box.kancloud.cn\/2869f58f691f1e2af0bf569197459ff8_20x20.png) rss\\_news\\_feed\n\n使用此属性更改RSS新闻。 您可以为每个商品类型设置不同的rss，或为每个商品使用一个rss。 对象将拥有`default`属性，其他属性是可选的; 它们的名字为商品的类型. 每个属性都拥有一个对象(或对象数组) 并且具有以下属性:\n\n1. `url`请求的URL。 它可以包含以下花括号中的标签（将会被终端所更改）：`{SYMBOL}`,`{TYPE}`,`{EXCHANGE}。`\n2. `name 在每一个新闻的底部显示一个反馈。`\n\n例:\n\n\n```\n{\n    \"default\": [ {\n        url: \"https:\/\/articlefeeds.nasdaq.com\/nasdaq\/symbols?symbol={SYMBOL}\",\n        name: \"NASDAQ\"\n      }, {\n        url: \"http:\/\/feeds.finance.yahoo.com\/rss\/2.0\/headline?s={SYMBOL}&region=US&lang=en-US\",\n        name: \"Yahoo Finance\"\n      } ]\n}\n\n```\n另一个例子:\n\n\n```\n{\n    \"default\": {\n        url: \"https:\/\/articlefeeds.nasdaq.com\/nasdaq\/symbols?symbol={SYMBOL}\",\n        name: \"NASDAQ\"\n    }\n}\n\n```\n更多例子:\n\n\n```\n{\n    \"default\": {\n        url: \"https:\/\/articlefeeds.nasdaq.com\/nasdaq\/symbols?symbol={SYMBOL}\",\n        name: \"NASDAQ\"\n     },\n    \"stock\": {\n        url: \"http:\/\/feeds.finance.yahoo.com\/rss\/2.0\/headline?s={SYMBOL}&region=US&lang=en-US\",\n        name: \"Yahoo Finance\"\n    }\n}\n\n```\n#### ![](https:\/\/box.kancloud.cn\/2869f58f691f1e2af0bf569197459ff8_20x20.png) news\\_provider\n\n代表新闻提供者的对象。 它可能包含以下属性：\n\n1. `is_news_generic`- 如果为`true`新闻小部件的标题将不会有产品名称 (只有`Headlines`). 否则`SYMBOL_NAME`将会被添加。\n2. `get_news`- 使用此属性设置自己的新闻 getter 方法.`symbol`和`callback`将会传递给此方法。\n  \n  回调函数被调用时，会传递一下结构的新闻对象:\n  \n  \n  1. `title`(必须) - 新闻项目标题。\n  2. `published`(必须) - 新闻项目时间（以ms为单位）\n  3. `source`(可选) - 标题的新闻项目来源。\n  4. `shortDescription`(可选) - 将显示的新闻项目的简短说明。\n  5. `link`(可选) - 新闻URL\n  6. `fullDescription`(可选) - 新闻项目的完整描述（正文）\n  \n  **注意:**当用户点击新闻项目时，将打开带有`link`URL的新标签页。 如果没有指定`link`，将显示带有`fullDescription`的对话框弹出窗口。\n  \n  **注意2:**如果它设置为`rss_news_feed`则将会被忽略。\n\n例:\n\n\n```\nnews_provider: {\n    is_news_generic: true,\n    get_news: function(symbol, callback) {\n        callback([\n            {\n                title: 'It is news for symbol ' + symbol,\n                shortDescription: 'Short description of the news item',\n                fullDescription: 'Full description of the news item',\n                published: new Date().valueOf(),\n                source: 'My own news source',\n                link: 'https:\/\/www.tradingview.com\/'\n            },\n            {\n                title: 'Another news for symbol ' + symbol,\n                shortDescription: 'Short description of the news item',\n                fullDescription: 'Full description of the news item. Very long long long long long long long long text.',\n                published: new Date().valueOf(),\n                source: 'My own news source',\n            }\n        ]);\n    }\n}\n\n```\n#### ![](https:\/\/box.kancloud.cn\/2869f58f691f1e2af0bf569197459ff8_20x20.png) trading\\_controller(已废弃)\n\n交易控制器可以让您在线交易。[阅读更多](Trading-Controller.html)\n\n\n```\nnew TradingView.widget({\n    \/* ... *\/\n    trading_controller: new MyTradingController()\n});\n\n```\n#### ![](https:\/\/box.kancloud.cn\/2869f58f691f1e2af0bf569197459ff8_20x20.png) brokerFactory\n\n使用这个字段来传递构造[经纪商API](Broker-API.html)的实现函数。 这是一个接收[交易主机](Trading-Host.html)并返回[经纪商API](Broker-API.html)的函数。\n\n#### ![](https:\/\/box.kancloud.cn\/2869f58f691f1e2af0bf569197459ff8_20x20.png) brokerConfig\n\n`brokerConfig: { configFlags: {...} }`使用此字段设置交易终端的配置标志。 [了解更多](Broker-API.html#tradingconfiguration)\n\n# 也可以看看\n\n- [定制概述](Customization-Overview.html)\n- [Widget方法](Widget-Methods.html)\n- [功能集](Featuresets.html)\n- [存储于加载图表](Saving-and-Loading-Charts.html)\n- [覆盖默认指标参数](Studies-Overrides.html)\n- [覆盖默认图表参数](Overrides.html)"}