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.
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.
[[["Dễ hiểu","easyToUnderstand","thumb-up"],["Giúp tôi giải quyết được vấn đề","solvedMyProblem","thumb-up"],["Khác","otherUp","thumb-up"]],[["Thiếu thông tin tôi cần","missingTheInformationINeed","thumb-down"],["Quá phức tạp/quá nhiều bước","tooComplicatedTooManySteps","thumb-down"],["Đã lỗi thời","outOfDate","thumb-down"],["Vấn đề về bản dịch","translationIssue","thumb-down"],["Vấn đề về mẫu/mã","samplesCodeIssue","thumb-down"],["Khác","otherDown","thumb-down"]],["Cập nhật lần gần đây nhất: 2024-07-10 UTC."],[],[],null,["# Candlestick Image Chart\n\n**Important:** The Image Charts portion of Google Chart Tools has been [officially deprecated](http://googledevelopers.blogspot.com/2012/04/changes-to-deprecation-policies-and-api.html) as of April 20, 2012. It will continue to work as per our [deprecation policy](/chart/terms). \n1. [Overview](#Overview)\n2. [Example](#Example)\n3. [Loading](#Loading)\n4. [Data Format](#Data_Format)\n5. [Configuration Options](#Configuration_Options)\n6. [Methods](#Methods)\n7. [Events](#Events)\n8. [Data Policy](#Data_Policy)\n\nOverview\n--------\n\n\nA candlestick chart that is rendered as an image using the [Google Charts API](/chart/image/docs/gallery/compound_charts#candlestick_charts).\n\nA candlestick chart is used to show an opening and closing value overlaid on top of a total variance. Candlestick charts are often used to show stock value behavior. In this chart, items where the opening value is less than the closing value are drawn in green, and items where the opening value is more than the closing value are drawn in red. See the [candlestick documentation in the Google Charts API](/chart/image/docs/gallery/compound_charts#candlestick_charts) for more information.\n\nExample\n-------\n\n\u003cbr /\u003e\n\n\\\u003cscript type=\"text/javascript\" src=\"https://www.gstatic.com/charts/loader.js\"\\\u003e\\\u003c/script\\\u003e \\\u003cscript type=\"text/javascript\"\\\u003e google.charts.load('current', {'packages':\\['imagechart'\\]}); \\\u003c/script\\\u003e \\\u003cdiv id=\"chart_div\" style=\"width: 400px; height: 240px;\"\\\u003e\\\u003c/div\\\u003e 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); } \n\n```html\n\u003chtml\u003e\n \u003chead\u003e\n \u003cscript type=\"text/javascript\" src=\"https://www.gstatic.com/charts/loader.js\"\u003e\u003c/script\u003e\n \u003cscript type=\"text/javascript\"\u003e\n google.charts.load(\"current\", {packages:[\"imagechart\"]});\n google.charts.setOnLoadCallback(drawChart);\n\n function drawChart() {\n\n var options = {};\n dataTable = google.visualization.arrayToDataTable([\n ['Gainers',10,30,45,60],\n ['Losers',20,35,25,45],\n ], true);\n\n var chart = new google.visualization.ImageCandlestickChart(document.getElementById('chart_div'));\n chart.draw(dataTable, options);\n }\n \u003c/script\u003e\n \u003c/head\u003e\n \u003cbody\u003e\n \u003cdiv id=\"chart_div\" style=\"width: 400px; height: 240px;\"\u003e\u003c/div\u003e\n \u003c/body\u003e\n\u003c/html\u003e\n```\n\nLoading\n-------\n\n\nThe `google.charts.load` package name is `\"imagechart\"`. \n\n```transact-sql\n google.charts.load('current', {packages: [imagechart]});\n```\n\n\nThe visualization's class name is `google.visualization.`ImageCandlestickChart. \n\n```gdscript\n var visualization = new google.visualization.ImageCandlestickChart(container);\n```\n\nData Format\n-----------\n\nFive columns, where each row describes a single candlestick marker:\n\n- **Col 0:** String used as a label for this marker on the X axis.\n- **Col 1:** Number specifying the low/minimum value of this marker. This is the base of the black line.\n- **Col 2:** Number specifying the opening/initial value of this marker. This is one vertical border of the candle. If less than the column 3 value, the candle will be green; otherwise it will be red.\n- **Col 3:** Number specifying the closing/final value of this marker. This is the second vertical border of the candle. If less than the column 2 value, the candle will be red; otherwise it will be green.\n- **Col 4:** Number specifying the high/maximum value of this marker. This is the top of the black line.\n\nConfiguration Options\n---------------------\n\nIn addition to the options supported by the [Generic Image Chart](/chart/interactive/docs/gallery/genericimagechart#Configuration_Options),\nthe Candlestick Chart supports the following options:\n\n| Name | Type | Default | Description |\n|-------------------------|---------|----------------------------------|-------------------------------------------------------------------------------------------------------------------|\n| backgroundColor | string | '#FFFFFF' (white) | The background color for the chart. This is a #RRGGBB string, including the # mark. |\n| showAxisLines | boolean | true | Whether to show the axis lines. If set to false, then the axis labels will also not be shown. |\n| height | number | Height of the containing element | Height of the chart, in pixels. If 30 \\\u003c *height* or *height* \\\u003e 1,000 then this value will default to 200. |\n| max | number | Maximum data value | The maximum Y axis value. |\n| min | number | Minimum data value | The minimum Y axis value. |\n| showCategoryLabels | boolean | true | If false, hides the X axis labels. |\n| showValueLabels | boolean | true | If false, hides the Y axis labels. |\n| showValueLabelsInternal | number | auto | The spacing between the Y axis labels, in pixels. |\n| title | string | '' | Text to display above the chart. |\n| width | number | Width of the containing element | Width of the chart, in pixels. If *width* is less than 30 or greater than 1,000, then *width* will be set to 300. |\n\nMethods\n-------\n\n| Method | Return Type | Description |\n|-----------------------|-------------|------------------|\n| `draw(data, options)` | none | Draws the chart. |\n\nEvents\n------\n\nYou can register to hear the events described on the [Generic\nImage Chart](/chart/interactive/docs/gallery/genericimagechart#Events) page.\n\nData Policy\n-----------\n\n\nPlease refer to the [Chart API logging policy](/chart/interactive/faq#logging)."]]
