Khi theo dõi các thị trường tài chính và biến động giá tài sản theo thời gian, thìBiểu đồ nến là công cụ trực quan hóa tiêu chuẩn ngành. Bằng cách kết hợp bốn điểm giá quan trọng—Mở cửa, Cao nhất, Thấp nhất và Đóng cửa (OHLC)—vào một thanh trực quan duy nhất, biểu đồ nến cho thấyđộ biến động giá, phạm vi giao dịch và tâm lý thị trường chỉ trong một cái nhìn, làm cho chúng trở nên thiết yếu cho bảng điều khiển hiệu suất cổ phiếu, công cụ theo dõi tiền mã hóa và các góc nhìn giao dịch hàng hóa.
Cơ chế của biểu đồ nến
Trong Apache ECharts, các chuỗi biểu đồ nến được hiển thị bằng cách sử dụngtype: 'candlestick' (hoặc biệt danh'k'). Mỗi điểm dữ liệu yêu cầu một mảng 4 giá trị được sắp xếp rõ ràng theo thứ tự[Mở cửa, Đóng cửa, Thấp nhất, Cao nhất]. Bộ xử lý biểu đồ sẽ vẽ một thân rắn hoặc rỗng giữa Mở cửa và Đóng cửa, với các đường “cánh” mỏng kéo dài đến các mức giá Thấp nhất và Cao nhất.
1. Cài đặt cơ bản
Để xây dựng biểu đồ nến cơ bản, hãy ánh xạ các giá trị thời gian dọc theo trục X liên tục và truyền[Mở cửa, Đóng cửa, Thấp nhất, Cao nhất]các mảng vào dữ liệu chuỗi của bạn:
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'cross' }
},
xAxis: {
type: 'category',
data: ['2026-05-01', '2026-05-02', '2026-05-03', '2026-05-04', '2026-05-05']
},
yAxis: {
type: 'value',
scale: true
},
series: [
{
type: 'candlestick',
data: [
[20, 34, 10, 38], // [Mở cửa, Đóng cửa, Thấp nhất, Cao nhất] -> Tăng trưởng (Đóng cửa > Mở cửa)
[40, 35, 30, 50], // Giảm giá (Đóng cửa < Mở cửa)
[31, 38, 33, 44],
[38, 15, 5, 42],
[15, 28, 10, 32]
]
}
]
};
Các kỹ thuật cấu trúc nâng cao
Biểu đồ nến có thể được tùy chỉnh theo các quy ước màu sắc quốc tế, phạm vi thời gian phóng to, hoặc kết hợp với các đường trung bình động.
1. Màu sắc tùy chỉnh và đường trung bình động
Tùy chỉnh màu sắc thanh tăng trưởng (lên) và giảm giá (xuống) bằng cách sử dụngitemStyle, và chồng lên các đường trung bình động bằng cách kết hợp chuỗi đường với chuỗi biểu đồ nến:
option = {
tooltip: {
trigger: 'trục',
axisPointer: { type: 'chéo' }
},
legend: {
data: ['K Hàng ngày', 'MA5']
},
xAxis: {
type: 'danh mục',
data: ['Thứ Hai', 'Thứ Ba', 'Thứ Tư', 'Thứ Năm', 'Thứ Sáu', 'Thứ Bảy', 'Chủ Nhật']
},
yAxis: {
type: 'giá trị',
scale: true
},
series: [
{
name: 'K Hàng ngày',
type: 'candlestick',
data: [
[2320, 2320, 2287, 2362],
[2300, 2291, 2288, 2341],
[2295, 2312, 2290, 2380],
[2315, 2330, 2310, 2360],
[2330, 2325, 2312, 2355],
[2325, 2350, 2320, 2370],
[2350, 2340, 2330, 2385]
],
itemStyle: {
color: '#eb4d4b', // Màu cho tăng trưởng (Đóng > Mở)
color0: '#6ab04c', // Màu cho giảm giá (Đóng < Mở)
borderColor: '#eb4d4b',
borderColor0: '#6ab04c'
}
},
{
name: 'MA5',
type: 'đường',
smooth: true,
data: [null, null, null, null, 2310, 2321, 2329],
lineStyle: { opacity: 0.8, width: 2 }
}
]
};
Tinh chỉnh bố cục và thu phóng tương tác
Việc thêm các điều khiển thu phóng chuỗi thời gian mang lại cho người dùng sự linh hoạt khi duyệt qua các hồ sơ giao dịch lịch sử dày đặc.
1. Điều khiển thu phóng dữ liệu và con trỏ trục
Tích hợp thanh trượt ngang và thu phóng bằng bánh xe chuột bằng cách sử dụng khối cấu hìnhdataZoom khối cấu hình:
option = {
grid: {
left: '10%',
right: '10%',
bottom: '15%'
},
xAxis: {
type: 'danh mục',
data: ['Ngày 1', 'Ngày 2', 'Ngày 3', 'Ngày 4', 'Ngày 5', 'Ngày 6', 'Ngày 7', 'Ngày 8']
},
yAxis: {
type: 'giá trị',
scale: true
},
dataZoom: [
{
type: 'bên trong', // Bật thu phóng bằng bánh xe chuột
start: 20,
end: 100
},
{
type: 'thanh trượt', // Thanh trượt thu phóng ở phía dưới
show: true,
top: '90%'
}
],
series: [
{
type: 'candlestick',
data: [
[100, 110, 95, 115],
[110, 105, 100, 112],
[105, 120, 104, 125],
[120, 118, 112, 122],
[118, 125, 115, 128],
[125, 122, 120, 130],
[122, 135, 121, 138],
[135, 130, 128, 140]
]
}
]
};
Các thực hành tốt chiến lược
- Sắp xếp dữ liệu đúng cách: Kiểm tra lại cấu trúc mảng! ECharts mong đợi
[Mở, Đóng, Thấp nhất, Cao nhất]—việc hoán đổi Đóng và Thấp nhất là nguyên nhân phổ biến gây lỗi hiển thị. - Bật
scale: truetrên trục Y: Luôn bao gồmscale: truetrên các trục giá số để biểu đồ tự động điều chỉnh phạm vi giá hiện tại thay vì buộc gốc tọa độ về không. - Sử dụng con trỏ trục hình chữ thập: Đặt
tooltip.axisPointer.type = 'chéo'để hiển thị các đường tham chiếu liên tục theo chiều dọc và ngang, giúp căn chỉnh giá và thời điểm dễ dàng.