Обзор
Интерактивный график свечей.
Свечной график используется для отображения значений открытия и закрытия, наложенных поверх общей дисперсии. Свечные графики часто используются, чтобы показать поведение стоимости акций. На этой диаграмме элементы, в которых значение открытия меньше значения закрытия (прибыль), отображаются в виде заполненных прямоугольников, а элементы, в которых значение открытия больше значения закрытия (убыток), отображаются в виде пустых прямоугольников.
Пример
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Mon', 20, 28, 38, 45], ['Tue', 31, 38, 55, 66], ['Wed', 50, 55, 77, 80], ['Thu', 77, 77, 66, 50], ['Fri', 68, 66, 22, 15] // Treat first row as data as well. ], true); var options = { legend:'none' }; var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
Диаграммы водопада
При правильном наборе параметров свечные графики можно сделать похожими на простые каскадные графики.
В приведенном ниже коде мы исключаем верхние фитили, имея одинаковые значения в первом и втором столбцах, и нижние фитили, имея одинаковые значения в третьем и четвертом столбцах. Мы устанавливаем для bar.groupWidth
значение '100%'
чтобы удалить пространство между полосами.
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Mon', 28, 28, 38, 38], ['Tue', 38, 38, 55, 55], ['Wed', 55, 55, 77, 77], ['Thu', 77, 77, 66, 66], ['Fri', 66, 66, 22, 22] // Treat the first row as data. ], true); var options = { legend: 'none', bar: { groupWidth: '100%' }, // Remove space between bars. candlestick: { fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red risingColor: { strokeWidth: 0, fill: '#0f9d58' } // green } }; var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
В настоящее время нет простого способа пометить столбцы. Лучший вариант — использовать накладки .
Загрузка
Имя пакета google.charts.load
— "corechart"
.
google.charts.load('current', {packages: ['corechart']});
Имя класса визуализации — google.visualization. CandlestickChart .
var visualization = new google.visualization.CandlestickChart(container);
Формат данных
Пять или более столбцов, где первый столбец определяет значения оси X или метки групп, а каждый кратный четырем столбцам данных после этого определяет другой ряд.
- Колонка 0: строка ( дискретная ), используемая в качестве метки группы на оси X, или число, дата, дата и время или время дня ( непрерывное ), используемые в качестве значения на оси X.
- Колонка 1: число, указывающее минимальное/минимальное значение этого маркера. Это основание центральной линии свечи. Метка столбца используется в качестве метки ряда в легенде (в то время как метки других столбцов игнорируются).
- Колонка 2: число, указывающее открывающее/начальное значение этого маркера. Это одна вертикальная граница свечи. Если меньше значения столбца 3, то свеча будет заполнена; иначе будет пустота.
- Колонка 3: число, указывающее закрывающее/финальное значение этого маркера. Это вторая вертикальная граница свечи. Если меньше значения столбца 2, свеча будет полой; иначе он будет заполнен.
- Колонка 4: число, определяющее максимальное/высокое значение этого маркера. Это вершина центральной линии свечи.
- Колонка 5 [ Необязательный ]: всплывающая подсказка или столбец стиля для свечи.
Варианты конфигурации
Имя | |
---|---|
агрегацияЦель | Как множественный выбор данных сводится во всплывающие подсказки:
aggregationTarget часто используется в тандеме с selectionMode и tooltip.trigger , например:var options = { // Allow multiple // simultaneous selections. selectionMode: 'multiple', // Trigger tooltips // on selections. tooltip: {trigger: 'selection'}, // Group selections // by x-value. aggregationTarget: 'category', }; Тип: строка По умолчанию: «авто» |
анимация.длительность | Продолжительность анимации в миллисекундах. Подробности смотрите в документации по анимации . Тип: номер По умолчанию: 0 |
анимация.ослабление | Функция замедления применяется к анимации. Доступны следующие варианты:
Тип: строка По умолчанию: «линейный» |
анимация.стартап | Определяет, будет ли диаграмма анимироваться при начальном отрисовке. Если Тип: логический По умолчанию ложь |
осьTitlesPosition | Где размещать заголовки осей по сравнению с областью диаграммы. Поддерживаемые значения:
Тип: строка По умолчанию: «вне» |
фоновый цвет | Цвет фона для основной области диаграммы. Может быть либо простой строкой цвета HTML, например: Тип: строка или объект По умолчанию: «белый» |
backgroundColor.stroke | Цвет границы диаграммы в виде строки цвета HTML. Тип: строка По умолчанию: '#666' |
backgroundColor.strokeWidth | Ширина границы в пикселях. Тип: номер По умолчанию: 0 |
backgroundColor.fill | Цвет заливки диаграммы в виде строки цвета HTML. Тип: строка По умолчанию: «белый» |
bar.groupШирина | Ширина группы свечей, указанная в любом из этих форматов:
Тип: число или строка По умолчанию: золотое сечение , примерно «61,8%». |
подсвечник.hollowIsRising | Если это правда, восходящие свечи будут казаться полыми, а падающие свечи будут казаться сплошными, в противном случае наоборот. Тип: логический По умолчанию: false (позже будет изменено на true) |
подсвечник.fallingColor.fill | Цвет заливки падающих свечей в виде строки цвета HTML. Тип: строка По умолчанию: авто (зависит от цвета серии и HollowIsRising) |
подсвечник.fallingColor.stroke | Цвет обводки падающих свечей в виде строки цвета HTML. Тип: строка По умолчанию: авто (цвет серии) |
подсвечник.fallingColor.strokeWidth | Ширина штриха падающих свечей в виде строки цвета HTML. Тип: 2 По умолчанию: число |
подсвечник.risingColor.fill | Цвет заливки восходящих свечей в виде строки цвета HTML. Тип: строка По умолчанию: авто (белый или цвет серии, в зависимости от HollowIsRising) |
свеча.risingColor.stroke | Цвет обводки восходящих свечей в виде строки цвета HTML. Тип: строка По умолчанию: авто (цвет серии или белый, в зависимости от HollowIsRising) |
свеча.risingColor.strokeWidth | Ширина штриха восходящих свечей в виде строки цвета HTML. Тип: номер По умолчанию: 2 |
диаграммаОбласть | Объект с элементами для настройки размещения и размера области диаграммы (там, где рисуется сама диаграмма, за исключением осей и условных обозначений). Поддерживаются два формата: число или число, за которым следует %. Простое число — это значение в пикселях; число, за которым следует %, представляет собой процент. Пример: Тип: объект По умолчанию: ноль |
chartArea.backgroundColor | Цвет фона области диаграммы. Когда используется строка, это может быть либо шестнадцатеричная строка (например, '#fdc'), либо название цвета на английском языке. При использовании объекта могут быть предоставлены следующие свойства:
Тип: строка или объект По умолчанию: «белый» |
chartArea.left | Как далеко рисовать график от левой границы. Тип: число или строка По умолчанию: авто |
chartArea.top | Как далеко рисовать диаграмму от верхней границы. Тип: число или строка По умолчанию: авто |
ChartArea.width | Ширина области диаграммы. Тип: число или строка По умолчанию: авто |
chartArea.height | Высота области диаграммы. Тип: число или строка По умолчанию: авто |
цвета | Цвета, используемые для элементов диаграммы. Массив строк, где каждый элемент представляет собой строку цвета HTML, например: Тип: массив строк По умолчанию: цвета по умолчанию |
включитьИнтерактивность | Отправляет ли диаграмма пользовательские события или реагирует на действия пользователя. Если задано значение false, диаграмма не будет выдавать «выбор» или другие события, основанные на взаимодействии (но будет выдавать события готовности или ошибки), и не будет отображать текст при наведении курсора или иным образом изменяться в зависимости от ввода пользователя. Тип: логический По умолчанию: правда |
focusTarget | Тип объекта, который получает фокус при наведении курсора мыши. Также влияет на то, какой объект выбирается щелчком мыши и какой элемент таблицы данных связан с событиями. Может быть одним из следующих:
В focusTarget 'category' всплывающая подсказка отображает все значения категории. Это может быть полезно для сравнения значений разных рядов. Тип: строка По умолчанию: «Датум» |
размер шрифта | Размер шрифта по умолчанию в пикселях для всего текста на диаграмме. Вы можете переопределить это, используя свойства определенных элементов диаграммы. Тип: номер По умолчанию: автоматически |
имя_шрифта | Начертание шрифта по умолчанию для всего текста на диаграмме. Вы можете переопределить это, используя свойства определенных элементов диаграммы. Тип: строка По умолчанию: «Arial». |
ForceIFrame | Рисует диаграмму внутри встроенного фрейма. (Обратите внимание, что в IE8 этот параметр игнорируется; все диаграммы IE8 отображаются в i-фреймах.) Тип: логический По умолчанию: ложь |
hось | Объект с членами для настройки различных элементов горизонтальной оси. Чтобы указать свойства этого объекта, вы можете использовать литеральную нотацию объекта, как показано здесь: { title: 'Hello', titleTextStyle: { color: '#FF0000' } } Тип: объект По умолчанию: ноль |
hAxis.baseline | Базовая линия для горизонтальной оси. Этот параметр поддерживается только для Тип: номер По умолчанию: автоматически |
hAxis.baselineColor | Цвет базовой линии горизонтальной оси. Может быть любой строкой цвета HTML, например: Этот параметр поддерживается только для Тип: номер По умолчанию: «черный» |
hAxis.direction | Направление, в котором растут значения по горизонтальной оси. Укажите Тип: 1 или -1 По умолчанию: 1 |
hAxis.format | Строка формата для числовых меток или меток оси дат. Для меток числовой оси это подмножество набора шаблонов десятичного форматирования ICU . Например,
Для меток оси дат это подмножество набора шаблонов форматирования даты ICU . Например, Фактическое форматирование, применяемое к метке, зависит от языкового стандарта, с которым был загружен API. Дополнительные сведения см. в разделе Загрузка диаграмм с определенной локалью . При вычислении значений делений и линий сетки будут рассмотрены несколько альтернативных комбинаций всех соответствующих параметров линий сетки, и альтернативы будут отклонены, если отформатированные метки делений будут дублироваться или перекрываться. Таким образом, вы можете указать Этот параметр поддерживается только для Тип: строка По умолчанию: авто |
hAxis.gridlines | Объект со свойствами для настройки линий сетки на горизонтальной оси. Обратите внимание, что линии сетки горизонтальной оси рисуются вертикально. Чтобы указать свойства этого объекта, вы можете использовать литеральную нотацию объекта, как показано здесь: {color: '#333', minSpacing: 20} Этот параметр поддерживается только для Тип: объект По умолчанию: ноль |
hAxis.gridlines.color | Цвет горизонтальных линий сетки внутри области диаграммы. Укажите допустимую строку цвета HTML. Тип: строка По умолчанию: '#CCC' |
hAxis.gridlines.count | Приблизительное количество горизонтальных линий сетки внутри области диаграммы. Если вы укажете положительное число для Тип: номер По умолчанию: -1 |
hAxis.gridlines.interval | Массив размеров (в виде значений данных, а не пикселей) между соседними линиями сетки. В настоящее время этот параметр предназначен только для числовых осей, но он аналогичен параметрам Тип: число от 1 до 10, не включая 10. По умолчанию: вычислено |
hAxis.gridlines.minSpacing | Минимальное пространство экрана в пикселях между основными линиями сетки hAxis. Значение по умолчанию для основных линий сетки равно Тип: номер По умолчанию: вычислено |
hAxis.gridlines.multiple | Все значения линий сетки и делений должны быть кратны значению этого параметра. Обратите внимание, что, в отличие от интервалов, степени, умноженные на 10, не учитываются. Таким образом, вы можете заставить тики быть целыми числами, указав Тип: номер По умолчанию: 1 |
hAxis.gridlines.units | Переопределяет формат по умолчанию для различных аспектов типов данных даты/даты/времени/времени дня при использовании с вычисляемыми линиями сетки диаграммы. Позволяет форматировать годы, месяцы, дни, часы, минуты, секунды и миллисекунды. Общий формат: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]} hours: {format: [/*format strings here*/]} minutes: {format: [/*format strings here*/]} seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]}, } } Дополнительную информацию можно найти в разделе «Даты и время» . Тип: объект По умолчанию: ноль |
hAxis.minorGridlines | Объект с членами для настройки второстепенных линий сетки на горизонтальной оси, аналогичный параметру hAxis.gridlines. Этот параметр поддерживается только для Тип: объект По умолчанию: ноль |
hAxis.minorGridlines.color | Цвет горизонтальных второстепенных линий сетки внутри области диаграммы. Укажите допустимую строку цвета HTML. Тип: строка По умолчанию: сочетание цветов сетки и фона. |
hAxis.minorGridlines.interval | Параметр minorGridlines.interval аналогичен параметру интервала основных линий сетки, но выбранный интервал всегда будет четным делителем интервала основных линий сетки. Интервал по умолчанию для линейных масштабов — Тип: номер По умолчанию: 1 |
hAxis.minorGridlines.minSpacing | Минимальное необходимое пространство в пикселях между соседними второстепенными линиями сетки и между второстепенными и основными линиями сетки. Значение по умолчанию — 1/2 minSpacing основных линий сетки для линейных масштабов и 1/5 minSpacing для логарифмических масштабов. Тип: номер По умолчанию: вычислено |
hAxis.minorGridlines.multiple | То же, что и для основных Тип: номер По умолчанию: 1 |
hAxis.minorGridlines.count | Параметр Тип: номер По умолчанию: 1 |
hAxis.minorGridlines.units | Переопределяет формат по умолчанию для различных аспектов типов данных date/datetime/timeofday при использовании с вычисляемыми диаграммами MinorGridlines. Позволяет форматировать годы, месяцы, дни, часы, минуты, секунды и миллисекунды. Общий формат: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]} hours: {format: [/*format strings here*/]} minutes: {format: [/*format strings here*/]} seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]}, } } Дополнительную информацию можно найти в разделе «Даты и время» . Тип: объект По умолчанию: ноль |
hAxis.logScale | Этот параметр поддерживается только для Тип: логический По умолчанию: ложь |
hAxis.scaleType |
Этот параметр поддерживается только для Тип: строка По умолчанию: ноль |
hAxis.textPosition | Положение текста по горизонтальной оси относительно области диаграммы. Поддерживаемые значения: 'out', 'in', 'none'. Тип: строка По умолчанию: «вне» |
hAxis.textStyle | Объект, определяющий стиль текста по горизонтальной оси. Объект имеет следующий формат: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } Тип: объект По умолчанию: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} |
hAxis.ticks | Заменяет автоматически сгенерированные метки оси X указанным массивом. Каждый элемент массива должен быть либо допустимым значением тика (например, числом, датой, датой и временем или временем дня), либо объектом. Если это объект, он должен иметь свойство ViewWindow будет автоматически расширен, чтобы включить минимальные и максимальные отметки, если вы не укажете Примеры:
Этот параметр поддерживается только для Тип: Массив элементов По умолчанию: авто |
hAxis.title | Тип: строка По умолчанию: ноль |
hAxis.titleTextStyle | Объект, определяющий стиль текста заголовка по горизонтальной оси. Объект имеет следующий формат: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } Тип: объект По умолчанию: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} |
hAxis.allowContainerBoundaryTextCutoff | Если задано значение false, крайние метки будут скрыты, а не будут обрезаны контейнером диаграммы. Если true, будет разрешена обрезка метки. Этот параметр поддерживается только для Тип: логический По умолчанию: ложь |
hAxis.slantedText | Если установлено значение true, нарисуйте текст по горизонтальной оси под углом, чтобы разместить больше текста вдоль оси; если false, нарисуйте текст по горизонтальной оси вертикально. Поведение по умолчанию — наклон текста, если он не может полностью уместиться при вертикальном рисовании. Обратите внимание, что этот параметр доступен только в том случае, если для Тип: логический По умолчанию: автоматически |
hAxis.slantedTextAngle | Угол текста по горизонтальной оси, если он нарисован под наклоном. Игнорируется, если Тип: число, -90—90 По умолчанию: 30 |
hAxis.maxAlternation | Максимальное количество уровней текста по горизонтальной оси. Если текстовые метки оси становятся слишком тесными, сервер может сдвигать соседние метки вверх или вниз, чтобы метки располагались ближе друг к другу. Это значение указывает максимальное количество используемых уровней; сервер может использовать меньше уровней, если метки могут помещаться без перекрытия. Для даты и времени по умолчанию используется значение 1. Тип: номер По умолчанию: 2 |
hAxis.maxTextLines | Максимально допустимое количество строк для текстовых меток. Метки могут занимать несколько строк, если они слишком длинные, а количество строк по умолчанию ограничено высотой доступного пространства. Тип: номер По умолчанию: авто |
hAxis.minTextSpacing | Минимальный интервал по горизонтали в пикселях, допустимый между двумя соседними текстовыми метками. Если метки расположены слишком плотно или слишком длинные, интервал может упасть ниже этого порога, и в этом случае будет применена одна из мер по упорядочению меток (например, усечение меток или удаление некоторых из них). Тип: номер По умолчанию: значение hAxis.textStyle.fontSize |
hAxis.showTextEvery | Сколько меток по горизонтальной оси отображать, где 1 означает показывать все метки, 2 означает показывать все остальные метки и так далее. По умолчанию стараются показать как можно больше меток без перекрытия. Тип: номер По умолчанию: автоматически |
hAxis.maxValue | Перемещает максимальное значение горизонтальной оси на указанное значение; это будет вправо в большинстве графиков. Игнорируется, если установлено значение, меньшее, чем максимальное значение x данных. Этот параметр поддерживается только для Тип: номер По умолчанию: автоматически |
hAxis.minValue | Перемещает минимальное значение горизонтальной оси на указанное значение; это будет слева на большинстве диаграмм. Игнорируется, если установлено значение, превышающее минимальное значение x данных. Этот параметр поддерживается только для Тип: номер По умолчанию: автоматически |
hAxis.viewWindowMode | Указывает, как масштабировать горизонтальную ось для отображения значений в области диаграммы. Поддерживаются следующие строковые значения:
Этот параметр поддерживается только для Тип: строка По умолчанию: Эквивалентно «красивому», но haxis.viewWindow.min и haxis.viewWindow.max имеют приоритет, если они используются. |
hAxis.viewWindow | Указывает диапазон обрезки по горизонтальной оси. Тип: объект По умолчанию: ноль |
hAxis.viewWindow.max |
Игнорируется, когда Тип: номер По умолчанию: авто |
hAxis.viewWindow.мин |
Игнорируется, когда Тип: номер По умолчанию: авто |
высота | Высота диаграммы в пикселях. Тип: номер По умолчанию: высота содержащего элемента |
легенда | Объект с членами для настройки различных аспектов легенды. Чтобы указать свойства этого объекта, вы можете использовать литеральную нотацию объекта, как показано здесь: {position: 'top', textStyle: {color: 'blue', fontSize: 16}} Тип: объект По умолчанию: ноль |
легенда.выравнивание | Выравнивание легенды. Может быть одним из следующих:
Начало, центр и конец относятся к стилю — вертикальному или горизонтальному — легенды. Например, в «правильной» легенде «начало» и «конец» находятся вверху и внизу соответственно; для «верхней» легенды «начало» и «конец» будут слева и справа от области соответственно. Значение по умолчанию зависит от положения легенды. Для «нижних» легенд по умолчанию используется «центр»; другие легенды по умолчанию имеют значение «начало». Тип: строка По умолчанию: автоматически |
легенда.maxLines | Максимальное количество строк в легенде. Установите это значение больше единицы, чтобы добавить строки в легенду. Примечание. Точная логика, используемая для определения фактического количества отображаемых строк, все еще находится в процессе изменения. В настоящее время эта опция работает только в том случае, если legend.position имеет значение «top». Тип: номер По умолчанию: 1 |
legend.pageIndex | Начальный выбранный нулевой индекс страницы легенды. Тип: номер По умолчанию: 0 |
легенда.позиция | Положение легенды. Может быть одним из следующих:
Тип: строка По умолчанию: «право» |
легенда.textStyle | Объект, определяющий стиль текста легенды. Объект имеет следующий формат: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } Тип: объект По умолчанию: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} |
ориентация | Ориентация диаграммы. При значении Тип: строка По умолчанию: «горизонтальный» |
реверсКатегории | Если установлено значение true, серия будет отображаться справа налево. По умолчанию рисование слева направо. Этот параметр поддерживается только для Тип: логический По умолчанию: ложь |
выбор режима | Когда Тип: строка По умолчанию: «одиночный» |
серии | Массив объектов, каждый из которых описывает формат соответствующего ряда на диаграмме. Чтобы использовать для серии значения по умолчанию, укажите пустой объект {}. Если серия или значение не указаны, будет использоваться глобальное значение. Каждый объект поддерживает следующие свойства:
Вы можете указать либо массив объектов, каждый из которых применяется к серии в указанном порядке, либо вы можете указать объект, в котором каждый дочерний элемент имеет числовой ключ, указывающий, к какой серии он относится. Например, следующие два объявления идентичны и объявляют первую серию черной и отсутствующей в легенде, а четвертую - красной и отсутствующей в легенде: series: [ {color: 'black', visibleInLegend: false}, {}, {}, {color: 'red', visibleInLegend: false} ] series: { 0:{color: 'black', visibleInLegend: false}, 3:{color: 'red', visibleInLegend: false} } Тип: массив объектов или объект с вложенными объектами. По умолчанию: {} |
тема | Тема — это набор предопределенных значений параметров, которые работают вместе для достижения определенного поведения диаграммы или визуального эффекта. На данный момент доступна только одна тема:
Тип: строка По умолчанию: ноль |
заглавие | Текст для отображения над диаграммой. Тип: строка По умолчанию: без названия |
titlePosition | Где разместить заголовок диаграммы по сравнению с областью диаграммы. Поддерживаемые значения:
Тип: строка По умолчанию: «вне» |
titleTextStyle | Объект, определяющий стиль текста заголовка. Объект имеет следующий формат: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } Тип: объект По умолчанию: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} |
подсказка | Объект с членами для настройки различных элементов всплывающей подсказки. Чтобы указать свойства этого объекта, вы можете использовать литеральную нотацию объекта, как показано здесь: {textStyle: {color: '#FF0000'}, showColorCode: true} Тип: объект По умолчанию: ноль |
tooltip.ignoreBounds | Если установлено значение Примечание. Это относится только к всплывающим подсказкам в формате HTML. Если это включено с помощью всплывающих подсказок SVG, любое переполнение за пределами границ диаграммы будет обрезано. Дополнительные сведения см. в разделе Настройка содержимого всплывающей подсказки . Тип: логический По умолчанию: ложь |
tooltip.isHtml | Если установлено значение true, используйте всплывающие подсказки в формате HTML (а не в формате SVG). Дополнительные сведения см. в разделе Настройка содержимого всплывающей подсказки . Примечание. Настройка содержимого всплывающей подсказки HTML с помощью роли данных столбца всплывающей подсказки не поддерживается визуализацией пузырьковой диаграммы . Тип: логический По умолчанию: ложь |
tooltip.showColorCode | Если это правда, показывать цветные квадраты рядом с информацией о серии во всплывающей подсказке. Значение по умолчанию — true, если Тип: логический По умолчанию: автоматически |
tooltip.textStyle | Объект, определяющий стиль текста всплывающей подсказки. Объект имеет следующий формат: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } Тип: объект По умолчанию: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} |
всплывающая подсказка.триггер | Взаимодействие с пользователем, вызывающее отображение всплывающей подсказки:
Тип: строка По умолчанию: «фокус». |
vAxes | Указывает свойства для отдельных вертикальных осей, если диаграмма имеет несколько вертикальных осей. Каждый дочерний объект является объектом Чтобы задать диаграмму с несколькими вертикальными осями, сначала определите новую ось с помощью { series: { 2: { targetAxisIndex:1 } }, vAxes: { 1: { title:'Losses', textStyle: {color: 'red'} } } } Это свойство может быть либо объектом, либо массивом: объект представляет собой набор объектов, каждый из которых имеет числовую метку, указывающую определяемую им ось — это формат, показанный выше; массив представляет собой массив объектов, по одному на ось. Например, следующая нотация в стиле массива идентична показанному выше объекту vAxes: [ {}, // Nothing specified for axis 0 { title:'Losses', textStyle: {color: 'red'} // Axis 1 } ] Тип: массив объектов или объект с дочерними объектами. По умолчанию: ноль |
vось | Объект с членами для настройки различных элементов вертикальной оси. Чтобы указать свойства этого объекта, вы можете использовать литеральную нотацию объекта, как показано здесь: {title: 'Hello', titleTextStyle: {color: '#FF0000'}} Тип: объект По умолчанию: ноль |
vAxis.baseline | Тип: номер По умолчанию: автоматически |
vAxis.baselineColor | Указывает цвет базовой линии для вертикальной оси. Может быть любой строкой цвета HTML, например: Тип: номер По умолчанию: «черный» |
vAxis.direction | Направление, в котором растут значения по вертикальной оси. По умолчанию низкие значения находятся внизу диаграммы. Укажите Тип: 1 или -1 По умолчанию: 1 |
vAxis.format | Строка формата для меток числовых осей. Это подмножество набора шаблонов ICU . Например,
Фактическое форматирование, применяемое к метке, зависит от языкового стандарта, с которым был загружен API. Дополнительные сведения см. в разделе Загрузка диаграмм с определенной локалью . При вычислении значений делений и линий сетки будут рассмотрены несколько альтернативных комбинаций всех соответствующих параметров линий сетки, и альтернативы будут отклонены, если отформатированные метки делений будут дублироваться или перекрываться. Таким образом, вы можете указать Тип: строка По умолчанию: авто |
vAxis.gridlines | Объект с элементами для настройки линий сетки по вертикальной оси. Обратите внимание, что линии сетки вертикальной оси рисуются горизонтально. Чтобы указать свойства этого объекта, вы можете использовать литеральную нотацию объекта, как показано здесь: {color: '#333', minSpacing: 20} Тип: объект По умолчанию: ноль |
vAxis.gridlines.color | The color of the vertical gridlines inside the chart area. Specify a valid HTML color string. Тип: строка Default: '#CCC' |
vAxis.gridlines.count | The approximate number of horizontal gridlines inside the chart area. If you specify a positive number for Тип: номер Default: -1 |
vAxis.gridlines.interval | An array of sizes (as data values, not pixels) between adjacent gridlines. This option is only for numeric axes at this time, but it is analogous to the Type: number between 1 and 10, not including 10. Default: computed |
vAxis.gridlines.minSpacing | The minimum screen space, in pixels, between hAxis major gridlines. The default for major gridlines is Тип: номер Default: computed |
vAxis.gridlines.multiple | All gridline and tick values must be a multiple of this option's value. Note that, unlike for intervals, powers of 10 times the multiple are not considered. So you can force ticks to be integers by specifying Тип: номер Default: 1 |
vAxis.gridlines.units | Overrides the default format for various aspects of date/datetime/timeofday data types when used with chart computed gridlines. Allows formatting for years, months, days, hours, minutes, seconds, and milliseconds. General format is: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]}, hours: {format: [/*format strings here*/]}, minutes: {format: [/*format strings here*/]}, seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]} } } Additional information can be found in Dates and Times . Type: object По умолчанию: ноль |
vAxis.minorGridlines | An object with members to configure the minor gridlines on the vertical axis, similar to the vAxis.gridlines option. Type: object По умолчанию: ноль |
vAxis.minorGridlines.color | The color of the vertical minor gridlines inside the chart area. Specify a valid HTML color string. Тип: строка Default: A blend of the gridline and background colors |
vAxis.minorGridlines.count | The minorGridlines.count option is mostly deprecated, except for disabling minor gridlines by setting the count to 0. The number of minor gridlines depends on the interval between major gridlines (see vAxis.gridlines.interval) and the minimum required space (see vAxis.minorGridlines.minSpacing). Тип: номер Default: 1 |
vAxis.minorGridlines.interval | The minorGridlines.interval option is like the major gridlines interval option, but the interval that is chosen will always be an even divisor of the major gridline interval. The default interval for linear scales is Тип: номер Default: 1 |
vAxis.minorGridlines.minSpacing | The minimum required space, in pixels, between adjacent minor gridlines, and between minor and major gridlines. The default value is 1/2 the minSpacing of major gridlines for linear scales, and 1/5 the minSpacing for log scales. Тип: номер Default: computed |
vAxis.minorGridlines.multiple | Same as for major Тип: номер Default: 1 |
vAxis.minorGridlines.units | Overrides the default format for various aspects of date/datetime/timeofday data types when used with chart computed minorGridlines. Allows formatting for years, months, days, hours, minutes, seconds, and milliseconds. General format is: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]} hours: {format: [/*format strings here*/]} minutes: {format: [/*format strings here*/]} seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]}, } } Additional information can be found in Dates and Times . Type: object По умолчанию: ноль |
vAxis.logScale | If true, makes the vertical axis a logarithmic scale. Note: All values must be positive. Тип: логический По умолчанию: ложь |
vAxis.scaleType |
This option is only supported for a Тип: строка По умолчанию: ноль |
vAxis.textPosition | Position of the vertical axis text, relative to the chart area. Supported values: 'out', 'in', 'none'. Тип: строка Default: 'out' |
vAxis.textStyle | An object that specifies the vertical axis text style. The object has this format: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } The Type: object Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} |
vAxis.ticks | Replaces the automatically generated Y-axis ticks with the specified array. Each element of the array should be either a valid tick value (such as a number, date, datetime, or timeofday), or an object. If it's an object, it should have a The viewWindow will be automatically expanded to include the min and max ticks unless you specify a Examples:
Type: Array of elements Default: auto |
vAxis.title | Тип: строка Default: no title |
vAxis.titleTextStyle | An object that specifies the vertical axis title text style. The object has this format: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } The Type: object Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} |
vAxis.maxValue | Moves the max value of the vertical axis to the specified value; this will be upward in most charts. Ignored if this is set to a value smaller than the maximum y-value of the data. Тип: номер Default: automatic |
vAxis.minValue | Moves the min value of the vertical axis to the specified value; this will be downward in most charts. Ignored if this is set to a value greater than the minimum y-value of the data. Тип: номер По умолчанию: ноль |
vAxis.viewWindowMode | Specifies how to scale the vertical axis to render the values within the chart area. The following string values are supported:
Тип: строка Default: Equivalent to 'pretty', but vaxis.viewWindow.min and vaxis.viewWindow.max take precedence if used. |
vAxis.viewWindow | Specifies the cropping range of the vertical axis. Type: object По умолчанию: ноль |
vAxis.viewWindow.max | The maximum vertical data value to render. Ignored when Тип: номер Default: auto |
vAxis.viewWindow.min | The minimum vertical data value to render. Ignored when Тип: номер Default: auto |
ширина | Ширина диаграммы в пикселях. Тип: номер По умолчанию: ширина содержащего элемента |
Методы
Метод | |
---|---|
draw(data, options) | Рисует график. Диаграмма принимает дальнейшие вызовы методов только после запуска события Тип возврата: нет |
getAction(actionID) | Returns the tooltip action object with the requested Return Type: object |
getBoundingBox(id) | Returns an object containing the left, top, width, and height of chart element
Values are relative to the container of the chart. Call this after the chart is drawn. Return Type: object |
getChartAreaBoundingBox() | Returns an object containing the left, top, width, and height of the chart content (ie, excluding labels and legend):
Values are relative to the container of the chart. Call this after the chart is drawn. Return Type: object |
getChartLayoutInterface() | Returns an object containing information about the onscreen placement of the chart and its elements. The following methods can be called on the returned object:
Call this after the chart is drawn. Return Type: object |
getHAxisValue(xPosition, optional_axis_index) | Returns the horizontal data value at Example: Call this after the chart is drawn. Return Type: number |
getImageURI() | Returns the chart serialized as an image URI. Call this after the chart is drawn. See Printing PNG Charts . Return Type: string |
getSelection() | Returns an array of the selected chart entities. Selectable entities are candlesticks, legend entries and categories. For this chart, only one entity can be selected at any given moment. Return Type: Array of selection elements |
getVAxisValue(yPosition, optional_axis_index) | Returns the vertical data value at Example: Call this after the chart is drawn. Return Type: number |
getXLocation(dataValue, optional_axis_index) | Returns the pixel x-coordinate of Example: Call this after the chart is drawn. Return Type: number |
getYLocation(dataValue, optional_axis_index) | Returns the pixel y-coordinate of Example: Call this after the chart is drawn. Return Type: number |
removeAction(actionID) | Removes the tooltip action with the requested Return Type: none |
setAction(action) | Sets a tooltip action to be executed when the user clicks on the action text. The Any and all tooltip actions should be set prior to calling the chart's Return Type: none |
setSelection() | Selects the specified chart entities. Cancels any previous selection. Selectable entities are candlesticks, legend entries and categories. For this chart, only one entity can be selected at a time. Тип возврата: нет |
clearChart() | Очищает диаграмму и освобождает все выделенные ей ресурсы. Тип возврата: нет |
События
For more information on how to use these events, see Basic Interactivity , Handling Events , and Firing Events .
Имя | |
---|---|
animationfinish | Fired when transition animation is complete. Свойства: нет |
click | Fired when the user clicks inside the chart. Can be used to identify when the title, data elements, legend entries, axes, gridlines, or labels are clicked. Properties: targetID |
error | Fired when an error occurs when attempting to render the chart. Properties: id, message |
legendpagination | Fired when the user clicks legend pagination arrows. Passes back the current legend zero-based page index and the total number of pages. Properties: currentPageIndex, totalPages |
onmouseover | Fired when the user mouses over a visual entity. Passes back the row and column indices of the corresponding data table element. A candlestick correlates to a cell in the data table, a legend entry to a column (row index is null), and a category to a row (column index is null). Properties: row, column |
onmouseout | Fired when the user mouses away from a visual entity. Passes back the row and column indices of the corresponding data table element. A candlestick correlates to a cell in the data table, a legend entry to a column (row index is null), and a category to a row (column index is null). Properties: row, column |
ready | Диаграмма готова к вызову внешних методов. Если вы хотите взаимодействовать с диаграммой и вызывать методы после ее рисования, вы должны настроить прослушиватель для этого события до вызова метода Свойства: нет |
select | Fired when the user clicks a visual entity. To learn what has been selected, call Свойства: нет |
Политика данных
Весь код и данные обрабатываются и отображаются в браузере. Никакие данные не отправляются ни на один сервер.