Важно! Часть «Диаграммы изображений» в Google Chart Tools официально объявлена устаревшей с 20 апреля 2012 г. Она продолжит работать в соответствии с нашей политикой прекращения поддержки .
Обзор
Свечная диаграмма, отображаемая в виде изображения с помощью API Google Charts .
Свечной график используется для отображения значений открытия и закрытия, наложенных на общую дисперсию. Свечные графики часто используются для отображения поведения стоимости акций. На этой диаграмме элементы, у которых значение открытия меньше значения закрытия, нарисованы зеленым цветом, а элементы, у которых значение открытия больше значения закрытия, нарисованы красным. Дополнительную информацию см. в документации по свечам в API Google Charts .
Пример
<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);
Формат данных
Пять столбцов, где каждая строка описывает один свечной маркер:
- Столбец 0: строка, используемая в качестве метки для этого маркера на оси X.
- Столбец 1: Число, указывающее нижнее/минимальное значение этого маркера. Это основа черной линии.
- Столбец 2: Число, определяющее начальное/начальное значение этого маркера. Это одна вертикальная граница свечи. Если значение меньше значения в столбце 3, свеча будет зеленой; в противном случае он будет красным.
- Столбец 3: Число, определяющее закрывающее/окончательное значение этого маркера. Это вторая вертикальная граница свечи. Если значение меньше значения в столбце 2, свеча будет красной; в противном случае он будет зеленым.
- Столбец 4: Число, определяющее верхнее/максимальное значение этого маркера. Это вершина черной линии.
Параметры конфигурации
В дополнение к опциям, поддерживаемым графиком общего изображения , свечной график поддерживает следующие параметры:
| Имя | Тип | По умолчанию | Описание |
|---|---|---|---|
| фоновый цвет | нить | '#FFFFFF' (белый) | Цвет фона диаграммы. Это строка #RRGGBB, включая знак #. |
| showAxisLines | логическое значение | истинный | Показывать ли оси. Если установлено значение false, метки осей также не будут отображаться. |
| высота | число | Высота содержащего элемента | Высота диаграммы в пикселях. Если 30 < высота или высота > 1000, то это значение по умолчанию будет равно 200. |
| Макс | число | Максимальное значение данных | Максимальное значение оси Y. |
| мин | число | Минимальное значение данных | Минимальное значение оси Y. |
| showCategoryLabels | логическое значение | истинный | Если false, метки оси X скрываются. |
| showValueLabels | логическое значение | истинный | Если false, метки оси Y скрываются. |
| showValueLabelsInternal | число | авто | Расстояние между метками оси Y в пикселях. |
| заголовок | нить | '' | Текст для отображения над диаграммой. |
| ширина | число | Ширина содержащего элемента | Ширина диаграммы в пикселях. Если ширина меньше 30 или больше 1000, то для ширины будет установлено значение 300. |
Методы
| Метод | Тип возврата | Описание |
|---|---|---|
draw(data, options) | никто | Рисует диаграмму. |
События
Вы можете зарегистрироваться, чтобы услышать события, описанные на странице «Общая диаграмма изображений» .