Quan trọng: Kể từ ngày 20 tháng 4 năm 2012, phần Biểu đồ hình ảnh của Công cụ biểu đồ của Google đã chính thức không còn được dùng nữa. Ứng dụng này sẽ tiếp tục hoạt động theo chính sách về việc ngừng cung cấp của chúng tôi.
Tổng quan
Một biểu đồ hình nến được hiển thị dưới dạng hình ảnh bằng cách sử dụng API Google Biểu đồ.
Biểu đồ hình nến được dùng để thể hiện giá trị mở và đóng phủ lên trên tổng phương sai. Biểu đồ hình nến thường được dùng để thể hiện hành vi của giá trị cổ phiếu. Trong biểu đồ này, các mục có giá trị mở nhỏ hơn giá trị đóng sẽ được vẽ màu xanh lục và các mục có giá trị mở lớn hơn giá trị đóng sẽ được vẽ màu đỏ. Xem tài liệu về hình nến trong API Google Biểu đồ để biết thêm thông tin.
Ví dụ
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["imagechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var options = {};
dataTable = google.visualization.arrayToDataTable([
['Gainers',10,30,45,60],
['Losers',20,35,25,45],
], true);
var chart = new google.visualization.ImageCandlestickChart(document.getElementById('chart_div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 400px; height: 240px;"></div>
</body>
</html>
Đang tải
Tên gói google.charts.load là "imagechart".
google.charts.load('current', {packages: [imagechart]});
Tên lớp của hình ảnh trực quan là google.visualization.ImageCandlestickChart.
var visualization = new google.visualization.ImageCandlestickChart(container);
Định dạng dữ liệu
Năm cột, trong đó mỗi hàng mô tả một điểm đánh dấu cho biểu đồ hình nến:
- Col 0: Chuỗi được dùng làm nhãn cho điểm đánh dấu này trên trục X.
- Col 1: Số chỉ định giá trị thấp/tối thiểu của điểm đánh dấu này. Đây là đáy của đường màu đen.
- Col 2: Số chỉ định giá trị mở/đầu của điểm đánh dấu này. Đây là một đường viền dọc của hình nến. Nếu giá trị nhỏ hơn giá trị của cột 3, hình nến sẽ có màu xanh lục; nếu không thì hình nến sẽ có màu đỏ.
- Col 3: Số chỉ định giá trị đóng/cuối cùng của điểm đánh dấu này. Đây là đường viền dọc thứ hai của hình nến. Nếu giá trị nhỏ hơn giá trị của cột 2, hình nến sẽ có màu đỏ; nếu không thì hình nến sẽ có màu xanh lục.
- Col 4: Số chỉ định giá trị cao/tối đa của điểm đánh dấu này. Đây là phần đầu của đường màu đen.
Các lựa chọn cấu hình
Ngoài các tuỳ chọn mà Biểu đồ hình ảnh chung hỗ trợ, Biểu đồ hình nến hỗ trợ các tuỳ chọn sau:
| Tên | Loại | Mặc định | Nội dung mô tả |
|---|---|---|---|
| backgroundColor | string | "#FFFFFF" (màu trắng) | Màu nền cho biểu đồ. Đây là chuỗi #RRGGBB, bao gồm cả dấu #. |
| showAxisLines | boolean | đúng | Liệu có hiển thị các đường trục hay không. Nếu bạn đặt chính sách này thành false, thì các nhãn trục cũng sẽ không hiển thị. |
| độ cao | number | Chiều cao của phần tử chứa | Chiều cao của biểu đồ, tính bằng pixel. Nếu 30 < height (chiều cao) hoặc height > 1.000 (chiều cao), thì giá trị này sẽ được mặc định là 200. |
| tối đa | number | Giá trị dữ liệu tối đa | Giá trị trục Y lớn nhất. |
| phút | number | Giá trị dữ liệu nhỏ nhất | Giá trị trục Y nhỏ nhất. |
| showCategoryLabels | boolean | đúng | Nếu sai, sẽ ẩn các nhãn trục X. |
| showValueLabels | boolean | đúng | Nếu là false, hãy ẩn các nhãn trục Y. |
| showValueLabelsInternal | number | tự động | Khoảng cách giữa các nhãn trục Y, tính bằng pixel. |
| title | string | '' | Văn bản để hiển thị phía trên biểu đồ. |
| chiều rộng | number | Chiều rộng của phần tử chứa | Chiều rộng của biểu đồ, tính bằng pixel. Nếu width nhỏ hơn 30 hoặc lớn hơn 1.000, thì width sẽ được thiết lập thành 300. |
Phương thức
| Phương thức | Loại dữ liệu trả về | Nội dung mô tả |
|---|---|---|
draw(data, options) |
không có | Vẽ biểu đồ. |
Sự kiện
Bạn có thể đăng ký để nghe các sự kiện được mô tả trên trang Biểu đồ hình ảnh chung.
Chính sách về dữ liệu
Vui lòng tham khảo Chính sách ghi lại của API biểu đồ.