Chuyển sang 2.0
2.0 đổi giao diện mặc định của chart và widget, gỡ các tên mà 1.x đã đánh dấu deprecated, và đổi bốn hành vi. Dữ liệu, bố cục đã lưu, chỉ báo, hình vẽ, giao dịch và chủ đề màu giữ nguyên. Trang này liệt kê từng thay đổi và việc bạn cần làm.
Cài đặt
2.0 là bản phát hành hiện tại: mọi gói đều là 2.0.0 dưới tag latest của npm. Bản 1.x vẫn còn đó, cài bằng @tradecanvas/chart@1, cho trang chưa sẵn sàng chuyển.
npm install @tradecanvas/chart
# nếu dùng component của framework thì cài thêm gói của nó
npm install @tradecanvas/react
npm install @tradecanvas/vue
npm install @tradecanvas/svelteGiao diện mặc định
Chart và widget mở ra với nhiều khoảng thoáng hơn quanh những gì chúng vẽ. Một tuỳ chọn giữ lại giao diện của 1.x:
// Widget như ở 1.x
new ChartWidget(host, { ui: { density: 'classic' } })
widget.setUI({ density: 'classic' })
// Chart của riêng bạn như ở 1.x
new Chart(host, { density: 'compact' })ui: { density: 'compact' } (nút điều khiển nhỏ hơn) không đổi.
Những điểm khác đi theo mặc định:
| Phần | 1.x | 2.0 |
|---|---|---|
| Khoảng trống sau nến mới nhất | 5 ô | 8 ô |
| Khoảng trống phía trên và phía dưới giá | 9% chiều cao | 11,5% chiều cao |
Nến của một Chart dùng riêng | Classic | Golden, thân nến bằng 62% ô, như widget vốn đã vẽ |
| Legend, tính từ góc vùng vẽ | lùi vào 8 px | lùi vào 12 px |
Các con số của Chart trần (trục, nhãn, legend) | Font đơn cách | Font sans của hệ thống, như widget và các financial chart; font: { family: MONO_FONT_FAMILY } giữ font cũ |
Khoảng cách của widget, --tcw-space-1 … -7 | 2 · 3 · 5 · 8 · 13 · 21 · 34 px | 2 · 4 · 6 · 8 · 12 · 20 · 32 px |
| Nút của Print | 33 px | 34 px |
| Đệm hai bên nhãn của nút | 8 px | 12 px |
Mọi kích thước và khoảng cách trong widget nay là số pixel chẵn, và các đường mảnh rộng đúng một pixel thiết bị ở tỉ lệ màn hình 125% và 150%.
Những chỗ cần kiểm tra trong code của bạn:
- CSS ghi đè
--tcw-space-*, hoặc mặc định một nút điều khiển cao 33 px. - Code có truyền
rightMargin. Khi đã đặt, giá trị này vẫn được ưu tiên. - Các component React, Vue và Svelte không còn tự đặt
rightMargin: 5. Muốn giữ, hãy truyềndensity: 'compact'hoặcrightMargin: 5trongoptions. - Code đọc
PRICE_SCALE_MARGINtừ@tradecanvas/corehoặcDEFAULT_CHART_OPTIONS.rightMargin: cả hai đã đổi giá trị.
// React; component Vue và Svelte nhận cùng options
<TradeCanvas options={{ density: 'compact' }} />
<TradeCanvas options={{ rightMargin: 5 }} />Mỗi mức density đặt những gì, xem đầy đủ ở Giao diện → Mật độ.
Các tên đã gỡ
Mỗi tên dưới đây đã bị đánh dấu deprecated ở 1.x và không còn trong 2.0.
| Đã gỡ | Dùng thay |
|---|---|
chart.setTimezone(tz) | chart.setTimeZone(tz) |
chart.getTimezone() | chart.getTimeZone() |
chart.getEffectiveTimezone() | chart.getEffectiveTimeZone() |
chart.getExchangeTimezone() | chart.getExchangeTimeZone() |
chart.setTimezoneOffset(minutes) | chart.setTimeZone(minutes): số phút về phía đông UTC, hoặc null để dùng múi giờ của trình duyệt |
EXCHANGE_TIMEZONE | EXCHANGE_TIME_ZONE |
DEFAULT_FONT_FAMILY | MONO_FONT_FAMILY: font đơn cách, nay không còn là mặc định |
SymbolInfo.timezone | SymbolInfo.timeZone |
TimeFormatContext.kind === 'date' trong một timeFormatter | Trục thời gian đưa 'year', 'month' hoặc 'day'. Từ 1.x nó đã không còn đưa 'date', và nay kiểu cũng không còn giá trị này. |
SessionBreaks.setLocale() và SessionBreaks.renderLabels() (@tradecanvas/core) | Bỏ các lời gọi: cả hai vốn không làm gì. |
Khoá chuỗi replay.barsPerSecond của widget | Bỏ nó khỏi phần ghi đè messages: khoá này không được dùng. Chữ hiển thị tốc độ replay là replay.rate. |
timezone của một mã không còn được đọc
Trường cũ không còn được đọc nữa. Một mã chỉ ghi timezone, dù đến từ symbols của bạn, resolveSymbol, một feed hay một adapter, nay không có múi giờ riêng:
setTimeZone('exchange')và ngày của nến ngày lùi về múi giờ của thị trường, hoặc về UTC;sessionscủa chính mã đó không được tô màu (giờ của thị trường thì có, khi đã đặt thị trường);- trạng thái của mã hiện như một thị trường giao dịch suốt ngày đêm, và bảng thông tin mã không hiện múi giờ.
Nếu bạn vẫn truyền timezone, nó được giữ nguyên trong getSymbolInfo() nhưng không gì đọc nó.
// 1.x
chart.setSymbolInfo({ symbol: 'AAPL', timezone: 'America/New_York' })
// 2.0
chart.setSymbolInfo({ symbol: 'AAPL', timeZone: 'America/New_York' })Những tên không đổi
Các tên này rất giống nhau, nên hãy cẩn thận khi tìm và thay hàng loạt. Thiết lập của widget vẫn viết là timezone:
widget.setSettings({ timezone: 'exchange' })
widget.getSettings().timezone // 'exchange'Hai khoá chuỗi của widget, settings.timezone và menu.chart.timezone, cũng giữ nguyên tên.
Cách tìm
Tìm trong code của bạn Timezone( và EXCHANGE_TIMEZONE, cùng với timezone: bên trong các object mô tả mã. TypeScript báo lỗi ở từng tên đã gỡ.
Hành vi đã đổi
Các thay đổi sau không kèm theo việc đổi tên nào.
- Nhãn trục giá ở mép pane. Nhãn nào sẽ bị mép trên hoặc mép dưới của pane cắt mất thì không được vẽ. Đường lưới của nó vẫn còn.
- Pane giá giữa nhiều pane. Dù mở bao nhiêu pane chỉ báo, pane giá vẫn giữ ít nhất 38,2% chiều cao của chart, và các pane đang mở chia phần còn lại theo tỉ lệ kích thước của chúng. Kích thước đã đặt cho một pane được giữ lại, và hiện đúng trở lại khi chart cao hơn. Trước đây các pane giữ nguyên chiều cao và có thể không chừa lại gì cho pane giá.
- Độ rộng nét nằm giữa hai số pixel nguyên. Một nét có độ rộng như vậy lấy số pixel thiết bị nguyên ngay bên dưới: 1,5 px là một pixel thiết bị ở tỉ lệ 100%, trước đây là hai.
setBarLayout()vàsetDensity(). Kiểu nến đặt bằngchart.setBarLayout()khi chart đang chạy được giữ lại qua một lầnsetDensity()sau đó.
Không thay đổi
- Dữ liệu:
DataAdapter,DataFeed,setData,appendBarvàupdateLastBar. - Bố cục và thiết lập đã lưu từ 1.x vẫn tải được như trước.
- Chỉ báo, hình vẽ, giao dịch, chủ đề màu và các khoá style giữ nguyên tên.