Важно! С 20 апреля 2012 года функция графических диаграмм в Google Charts Tools официально объявлена устаревшей . Она продолжит работать в соответствии с нашей политикой прекращения поддержки .
Обзор
Свечной график, отображаемый в виде изображения с помощью Google Charts API .
Свечной график используется для отображения значений открытия и закрытия, наложенных поверх общей дисперсии. Свечные графики часто используются, чтобы показать поведение стоимости акций. На этой диаграмме элементы, у которых значение открытия меньше значения закрытия, отображаются зеленым цветом, а элементы, у которых значение открытия больше значения закрытия, отображаются красным. Дополнительную информацию см. в документации по свечам в Google Charts API .
Пример
<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>
Загрузка
Имя пакета google.charts.load
— "imagechart"
.
google.charts.load('current', {packages: [imagechart]});
Имя класса визуализации — google.visualization. ImageCandlestickChart
.
var visualization = new google.visualization.ImageCandlestickChart(container);
Формат данных
Пять столбцов, где каждая строка описывает маркер одной свечи:
- Col 0: Строка, используемая в качестве метки для этого маркера на оси X.
- Колонка 1: число, указывающее минимальное/минимальное значение этого маркера. Это основание черной линии.
- Колонка 2: число, указывающее открывающее/начальное значение этого маркера. Это одна вертикальная граница свечи. Если меньше значения столбца 3, свеча будет зеленой; иначе будет красный.
- Колонка 3: число, указывающее закрывающее/финальное значение этого маркера. Это вторая вертикальная граница свечи. Если меньше значения столбца 2, свеча будет красной; иначе он будет зеленым.
- Колонка 4: число, определяющее максимальное/высокое значение этого маркера. Это вершина черной линии.
Параметры конфигурации
В дополнение к параметрам, поддерживаемым диаграммой Generic Image , график Candlestick Chart поддерживает следующие параметры:
Имя | Тип | По умолчанию | Описание |
---|---|---|---|
фоновый цвет | нить | '#FFFFFF' (белый) | Цвет фона диаграммы. Это строка #RRGGBB, включая знак #. |
показатьAxisLines | логический | истинный | Показывать ли линии осей. Если установлено значение false, то метки осей также не будут отображаться. |
высота | количество | Высота содержащего элемента | Высота диаграммы в пикселях. Если 30 < высота или высота > 1000, то это значение по умолчанию равно 200. |
Максимум | количество | Максимальное значение данных | Максимальное значение оси Y. |
мин | количество | Минимальное значение данных | Минимальное значение оси Y. |
showCategoryLabels | логический | истинный | Если false, скрывает метки оси X. |
показатьвалуелейблс | логический | истинный | Если false, скрывает метки оси Y. |
showValueLabelsInternal | количество | авто | Расстояние между метками оси Y в пикселях. |
заглавие | нить | '' | Текст для отображения над диаграммой. |
ширина | количество | Ширина содержащего элемента | Ширина диаграммы в пикселях. Если ширина меньше 30 или больше 1000, то для ширины будет установлено значение 300. |
Методы
Метод | Тип возврата | Описание |
---|---|---|
draw(data, options) | никто | Рисует график. |
События
Вы можете зарегистрироваться, чтобы услышать события, описанные на странице Generic Image Chart .