Важно! С 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 .