定制

从最轻的改动到最深的改造，这里列出让图表成为你自己的每一种方式。大多数应用只需其中两三种：一个主题、几个开关、一个自己的按钮。

想改什么，用什么

你想改变	使用
颜色	`theme`（`'dark'`、`'light'` 或你自己的主题）、`setTheme` — API
组件的圆角、尺寸、字体和各个栏	`ui` / `setUI` — 样式
图表外观的某一部分：网格、十字光标、某种图表类型的颜色	按键名使用 `applyOverrides` — 样式
指标的线条、窗格的背景	`updateIndicatorStyle(id, { plots })`、`setPaneStyle`
组件显示哪些部分	`features` / `setFeatures` — 见下文
用户能在图表上做什么：绘图、交易、缩放	图表自身的 features：`chartOptions: { features: { drawings: false } }`
你自己的按钮、菜单和状态项	`addToolbarButton`、`addToolbarDropdown`、`addSidebarButton`、`addStatusBarItem`、`getSlot`、菜单钩子 — 见下文
你自己的快捷键	`addHotkey` — 见下文
你自己的 CSS	稳定的挂钩：`--tcw-*`、`data-tcw-part` — 见下文
组件的文字	`locale`、`messages` — 见下文
你自己的指标、绘图工具或图表类型	插件
整个界面	无界面的 `Chart`，外面套上你自己的界面 — API

功能开关

组件的每个部分都有一个开关，所有开关默认开启，直到你关掉它。不带点的名称是一整项功能，在它出现的每个地方都会关闭： alerts 会去掉铃铛按钮、菜单里的警报项以及警报通知。带点的名称是一个位置：toolbar.alerts 只去掉铃铛按钮，菜单里仍然可以添加警报。开关可以在组件运行时切换。

const widget = new ChartWidget(host, {
  features: {
    'toolbar.replay': false,          // 一个按钮
    'sidebar.patterns': false,        // 一组绘图工具
    'menu.chart.exportData': false,   // 一个菜单项
    hotkeys: false,                   // 组件的所有快捷键
  },
})

widget.setFeatures({ sidebar: false, statusBar: false })   // 运行中得到一个干净的图表
widget.isFeatureOn('sidebar')        // false
widget.getFeatures()                 // 所有开关，开或关
grid.setFeatures({ toasts: false })  // ChartWidgetGrid 中的每个图表

这些名称是一项约定：只会新增，不会改名。它们列在 WIDGET_FEATURES 中并由 TypeScript 检查；未知的名称会被忽略并给出警告。

开关只负责显示和隐藏组件自身的部分。要禁止图表本身的某件事——绘图、交易、缩放、某个周期——请使用图表的 features （chartOptions.features）。会带来数据或存储的部分仍然是选项：trading、watchlist、 depthLadder 和 layouts 决定它们是否存在，开关则可以隐藏它们的按钮。

以前的开/关选项就是这些开关，用法不变：

选项	开关
`toolbar: false`	`toolbar`
`drawingTools: false`	`sidebar`、`drawingSettings`、`hotkeys.tools`、`menu.chart.horizontalLine`
`statusBar: false`	`statusBar`、`goToDate`
`rangeBar: false`	`statusBar.range`、`goToDate`
`accountPanel: false`	`accountPanel`、`orderTicket`
`indicatorLegend`、`settings`、`alerts`、`objectTree`、`indicatorTemplates`、`intervalTyping`、`symbolInfo`、`navigation`、`dragDropImport`、`customTimeframes`、`fullscreen`	同名的开关

全部开关

分组	开关
各个栏	`toolbar` `sidebar` `statusBar`
功能	`alerts` `objectTree` `symbolInfo` `symbolSearch` `settings` `indicatorSettings` `drawingSettings` `dataWindow` `commandPalette` `hotkeySheet` `goToDate` `replay` `screenshot` `copyImage` `shareView` `autoFib` `themeToggle` `fullscreen` `accountPanel` `orderTicket` `bracketOrders` `depthLadder` `layouts` `indicatorTemplates` `compare` `indicatorLegend` `navigation` `customTimeframes` `intervalTyping` `dragDropImport` `hotkeys` `toasts`
工具栏	`toolbar.symbol` `toolbar.symbolInfo` `toolbar.timeframes` `toolbar.timeframeMenu` `toolbar.chartType` `toolbar.indicators` `toolbar.layouts` `toolbar.replay` `toolbar.bracketOrders` `toolbar.depthLadder` `toolbar.accountPanel` `toolbar.objectTree` `toolbar.alerts` `toolbar.screenshot` `toolbar.settings` `toolbar.themeToggle` `toolbar.fullscreen`
绘图侧栏	`sidebar.cursor` `sidebar.favorites` `sidebar.lines` `sidebar.fibonacci` `sidebar.patterns` `sidebar.forecasting` `sidebar.annotation` `sidebar.style` `sidebar.magnet` `sidebar.eraser` `sidebar.zoomArea` `sidebar.stayInDrawing` `sidebar.undo` `sidebar.redo` `sidebar.clear`
状态栏	`statusBar.range` `statusBar.goToDate` `statusBar.market` `statusBar.connection` `statusBar.symbol` `statusBar.rangeTimeframe`
图表上	`indicatorLegend.values` `indicatorLegend.visibility` `indicatorLegend.settings` `indicatorLegend.remove` `indicatorLegend.more` `pane.move` `pane.collapse` `pane.maximize` `navigation.zoom` `navigation.scroll` `navigation.reset` `selectionToolbar`
菜单	`menu.chart` `menu.chart.alert` `menu.chart.order` `menu.chart.orderTicket` `menu.chart.horizontalLine` `menu.chart.resetView` `menu.chart.drawings` `menu.chart.exportData` `menu.chart.settings` `menu.chart.scale` `menu.chart.goToDate` `menu.chart.paneScale` `menu.priceAxisAdd` `menu.drawing` `menu.drawing.settings` `menu.drawing.alert` `menu.drawing.order` `menu.drawing.group` `menu.drawing.lock` `menu.drawing.hide` `menu.drawing.duplicate` `menu.drawing.delete`
快捷键	`hotkeys.commandPalette` `hotkeys.symbolSearch` `hotkeys.save` `hotkeys.tools` `hotkeys.invertScale` `hotkeys.goToDate` `hotkeys.help`

有几个开关的作用比名字多：关闭 indicatorLegend 后，窗格会显示回自己的标题；menu.chart.* 同时作用于价格轴旁的 "+" 和右键菜单；compare 去掉对象树里的添加按钮，已有的对比仍保留在列表中； toasts 关闭组件自身的提示（错误提示仍会显示），你通过 widget.toast() 发出的提示也照常显示。关闭 selectionToolbar 会隐藏选中画线上方的工具栏；右键菜单仍然保留。关闭 statusBar.rangeTimeframe 时，区间栏上的区间长于 K 线能放下的范围也保持周期；开启时切换为周线或月线并在之后切回。

你自己的提示可以带上组件图标集中的图标，按名称指定（'bell'、'check'、'info'…），就像组件的提醒提示带着铃铛一样。组件任何地方都不使用 emoji：所有图标，包括图表自身的标签，都来自同一套图标。

widget.toast('Order filled at 64,200', 'info', 'check')  // the icon set's check before the text
widget.toast('Feed lost', 'error', 'info')

你自己的部件

你的按钮、菜单和状态项放在组件的各个栏里，看起来和组件自带的一样，并跟随它的主题和外观。每个方法都返回一个句柄，用来修改或移除，并且在所在的栏显示时才显示。

widget.addToolbarButton({ id: 'news', label: 'News', icon: 'bell', toggle: true, onClick })

widget.addToolbarDropdown({
  id: 'scans',
  label: 'Scans',
  icon: 'layers',
  side: 'left',                              // 和图表控件放在一起
  items: () => [                             // 每次打开时重新获取
    { label: 'Breakouts', onSelect: () => runScan('breakouts') },
    { label: 'Live only', checked: liveOnly, onSelect: () => (liveOnly = !liveOnly) },
  ],
})

const ruler = widget.addSidebarButton({ id: 'ruler', label: 'Ruler', icon: 'ruler', toggle: true,
  onClick: () => ruler?.setActive(toggleRuler()) })

const latency = widget.addStatusBarItem({ id: 'latency', text: '12 ms', label: 'Latency' })
latency?.setText('15 ms')
widget.addHotkey({ keys: 'Alt+N', label: 'New note', onPress: () => addNote() })   // 按键相同时取代组件自带的快捷键；也列在快捷键面板中（?）

// 你的其他任何内容：工具栏控件旁、侧栏按钮下、状态栏两端，或图表之上
widget.getSlot('chart')?.append(myOverlay)   // 这一层让指针穿过；你的元素需设置 pointer-events: auto

插槽：toolbar.left、toolbar.right、sidebar、statusBar.left、statusBar.right、chart。

你的菜单项

你的菜单项排在组件菜单的末尾，每次菜单打开时重新获取，并告诉你菜单在哪里打开。

new ChartWidget(host, {
  chartMenuItems: ({ area, price }) => area === 'plot' && price !== undefined
    ? [{ label: 'Copy price', onSelect: () => copy(price) }]
    : [],
  drawingMenuItems: ({ id, type, selected }) => [{ label: 'Share', icon: 'link', onSelect: () => share(id) }],
  indicatorMenuItems: ({ instanceId, indicatorId }) => [{ label: 'Explain', onSelect: () => explain(indicatorId) }],
})

你自己的 CSS

组件是页面的一部分，而不是嵌在 iframe 里，所以你的 CSS 能作用到它。以下这些挂钩在 1.x 中保持不变：

.tcw-root 上的 --tcw-* 变量：外观的 token（见样式）。
[data-tcw-part~="toolbar.screenshot"]：每个部分都带有其开关的名称，规则可以按同样的名称找到它。
.tcw-root[data-tcw-off~="sidebar"]：关闭的开关，写在组件的根元素上。
[data-host-button="id"]、[data-host-item="id"]：你自己的按钮和状态项，按你给的 id。

其他类名属于组件内部，可能会变：请通过这些挂钩来写样式。

/* 你的工具栏按钮使用强调色 */
.tcw-root [data-host-button="news"] { color: var(--tcw-accent); }
/* 绘图工具关闭时，让你自己的面板更宽 */
.my-layout:has(.tcw-root[data-tcw-off~="sidebar"]) .my-panel { width: 320px; }

文字

组件支持 30 种语言（locale；内置英语和越南语，其他语言从 @tradecanvas/chart/widget/locales 加载）。messages 可以在语言的字符串之上修改任意一条。指标名称保持不变。

import { de } from '@tradecanvas/chart/widget/locales'

new ChartWidget(host, {
  locale: 'de',
  messages: { ...de, 'toolbar.indicators': 'Studien' },
})

更深入

你自己的指标、绘图工具和图表类型以插件形式注册，之后就和内置的一样工作，包括出现在菜单中。想要完全属于你的界面，就使用无界面的 Chart：同一个引擎，没有组件外壳。