迁移到 2.0
2.0 改变了图表和组件的默认外观，移除了 1.x 中已弃用的名称，并改变了四项行为。数据、已保存的布局、指标、画线、 交易和主题照旧可用。本页逐项列出这些变化以及相应的处理方法。
安装
2.0 是当前的正式版本：所有包都以 2.0.0 发布在 npm 的 latest 标签下。1.x 仍然保留，可通过 @tradecanvas/chart@1 安装，供暂时不便升级的页面使用。
npm install @tradecanvas/chart
# 使用框架组件时，同时安装对应的包
npm install @tradecanvas/react
npm install @tradecanvas/vue
npm install @tradecanvas/svelte默认外观
图表和组件现在会在所绘内容周围留出更多空间。用一个选项即可保留 1.x 的外观：
// 组件保持 1.x 的样子
new ChartWidget(host, { ui: { density: 'classic' } })
widget.setUI({ density: 'classic' })
// 你自己的图表保持 1.x 的样子
new Chart(host, { density: 'compact' })ui: { density: 'compact' }（更小的控件）没有变化。
默认情况下的不同之处：
| 对象 | 1.x | 2.0 |
|---|---|---|
| 最新 K 线之后的留白 | 5 格 | 8 格 |
| 价格上方和下方的留白 | 高度的 9% | 高度的 11.5% |
单独使用的 Chart 的 K 线 | classic | golden，实体占一格的 62%，与组件原本的画法相同 |
| 图例与绘图区角的距离 | 向内 8 px | 向内 12 px |
独立 Chart 的数字（坐标轴、标签、图例） | 等宽字体 | 系统无衬线字体，与组件和金融图表一致；font: { family: MONO_FONT_FAMILY } 可保留原字体 |
组件的间距 --tcw-space-1 … -7 | 2 · 3 · 5 · 8 · 13 · 21 · 34 px | 2 · 4 · 6 · 8 · 12 · 20 · 32 px |
| Print 的按钮 | 33 px | 34 px |
| 按钮文字两侧的内边距 | 8 px | 12 px |
组件中的所有尺寸和间距现在都是偶数像素；屏幕缩放为 125% 和 150% 时，细线的宽度为一个设备像素。
请在你自己的代码中检查以下几处：
- 覆盖了
--tcw-space-*的 CSS，或假定控件为 33 px 的 CSS。 - 传入
rightMargin的代码。只要设置了，它仍然优先。 - React、Vue 和 Svelte 组件不再自行设置
rightMargin: 5。如需保留，请在options中传入density: 'compact'或rightMargin: 5。 - 读取
@tradecanvas/core的PRICE_SCALE_MARGIN或DEFAULT_CHART_OPTIONS.rightMargin的代码：两者的值都变了。
// React；Vue 和 Svelte 组件接受同样的 options
<TradeCanvas options={{ density: 'compact' }} />
<TradeCanvas options={{ rightMargin: 5 }} />每种密度设置的全部内容，参见 样式 → 密度。
已移除的名称
以下名称均已在 1.x 中弃用，2.0 中不再存在。
| 已移除 | 改用 |
|---|---|
chart.setTimezone(tz) | chart.setTimeZone(tz) |
chart.getTimezone() | chart.getTimeZone() |
chart.getEffectiveTimezone() | chart.getEffectiveTimeZone() |
chart.getExchangeTimezone() | chart.getExchangeTimeZone() |
chart.setTimezoneOffset(minutes) | chart.setTimeZone(minutes)：UTC 以东的分钟数，传 null 则使用浏览器的时区 |
EXCHANGE_TIMEZONE | EXCHANGE_TIME_ZONE |
DEFAULT_FONT_FAMILY | MONO_FONT_FAMILY：等宽字体，已不再是默认字体 |
SymbolInfo.timezone | SymbolInfo.timeZone |
timeFormatter 中的 TimeFormatContext.kind === 'date' | 时间轴给出的是 'year'、'month' 或 'day'。从 1.x 起它就不再给出 'date'，现在类型中也已去掉。 |
SessionBreaks.setLocale() 和 SessionBreaks.renderLabels()（@tradecanvas/core） | 删除这些调用：两者原本就不做任何事。 |
组件的字符串键 replay.barsPerSecond | 从 messages 覆盖中删除：它从未被使用。回放速度的文字是 replay.rate。 |
品种的 timezone 不再被读取
旧字段已完全不再读取。只给出 timezone 的品种，无论来自你的 symbols、 resolveSymbol、数据源（feed）还是适配器，现在都没有自己的时区：
setTimeZone('exchange')和日线的日期会退回到市场的时区，或退回到 UTC；- 品种自己的
sessions不再着色（设置了市场时，仍按市场的交易时段着色）； - 品种的状态会显示为全天候交易的市场，品种信息面板也不显示时区。
仍然传入的 timezone 会原样保留在 getSymbolInfo() 中，但不会被读取。
// 1.x
chart.setSymbolInfo({ symbol: 'AAPL', timezone: 'America/New_York' })
// 2.0
chart.setSymbolInfo({ symbol: 'AAPL', timeZone: 'America/New_York' })没有改动的名称
这些名称彼此很像，查找替换时请留意。组件的设置项仍然写作 timezone：
widget.setSettings({ timezone: 'exchange' })
widget.getSettings().timezone // 'exchange'组件的字符串键 settings.timezone 和 menu.chart.timezone 也保持原名。
如何查找
在代码中搜索 Timezone( 和 EXCHANGE_TIMEZONE，以及品种对象中的 timezone:。
每一个已移除的名称，TypeScript 都会报错。
发生变化的行为
以下变化不涉及任何名称的改动。
- 窗格边缘的价格轴标签。会被所在窗格的上边缘或下边缘截断的标签不再绘制，它的网格线仍然保留。
- 多个窗格中的价格窗格。无论打开多少个指标窗格，价格窗格至少保有图表高度的 38.2%， 其余高度由打开的窗格按各自的大小成比例分配。为窗格设置的大小会被保留，图表变高后会重新按该大小显示。 此前各窗格保持自己的高度，可能让价格窗格一点高度都不剩。
- 介于整数像素之间的线宽。这样的线取不超过该宽度的整数个设备像素：100% 缩放下，1.5 px 是一个设备像素，以前是两个。
setBarLayout()与setDensity()。运行时用chart.setBarLayout()设置的 K 线布局，在之后调用setDensity()时会被保留。
没有变化的部分
- 数据：
DataAdapter、DataFeed、setData、appendBar和updateLastBar。 - 1.x 保存的布局和设置可以照常加载。
- 指标、画线、交易、主题和样式键的名称都没有变。