Обзор
Гистограмма — это вертикальная гистограмма, отображаемая в браузере с использованием SVG или VML , в зависимости от того, что подходит для браузера пользователя. Как и все диаграммы Google, гистограммы отображают всплывающие подсказки, когда пользователь наводит курсор на данные. Горизонтальную версию этой диаграммы см. на гистограмме .
Примеры
Колонки раскраски
Построим график плотности четырех драгоценных металлов:
Выше все цвета — синий по умолчанию. Это потому, что все они являются частью одной серии; если бы была вторая серия, она была бы окрашена в красный цвет. Мы можем настроить эти цвета с помощью роли стиля :
Существует три различных способа выбора цветов, и наша таблица данных демонстрирует их все: значения RGB, английские названия цветов и объявление в стиле CSS:
var data = google.visualization.arrayToDataTable([ ['Element', 'Density', { role: 'style' }], ['Copper', 8.94, '#b87333'], // RGB value ['Silver', 10.49, 'silver'], // English color name ['Gold', 19.30, 'gold'], ['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration ]);
Стили столбцов
Роль стиля позволяет вам контролировать несколько аспектов внешнего вида столбцов с помощью объявлений в стиле CSS:
-
color
-
opacity
-
fill-color
-
fill-opacity
-
stroke-color
-
stroke-opacity
-
stroke-width
Мы не рекомендуем слишком свободно смешивать стили внутри диаграммы — выберите стиль и придерживайтесь его, — но чтобы продемонстрировать все атрибуты стиля, вот образец:
В первых двух столбцах используется определенный color
(первый — с английским названием, второй — со значением RGB). opacity
не выбрана, поэтому используется значение по умолчанию 1,0 (полностью непрозрачный); вот почему второй столбец закрывает линию сетки позади него. В третьем столбце используется opacity
0,2, обнажающая линию сетки. В четвертом используются три атрибута стиля: stroke-color
и stroke-width
для рисования границы и fill-color
для указания цвета прямоугольника внутри. Самый правый столбец дополнительно использует stroke-opacity
и fill-opacity
чтобы выбрать непрозрачность границы и заливки:
function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Visitations', { role: 'style' } ], ['2010', 10, 'color: gray'], ['2020', 14, 'color: #76A7FA'], ['2030', 16, 'opacity: 0.2'], ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'], ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2'] ]);
Маркировка столбцов
Диаграммы имеют несколько типов меток, например метки делений, метки легенд и метки во всплывающих подсказках. В этом разделе мы увидим, как размещать метки внутри (или рядом) столбцов гистограммы.
Допустим, мы хотели пометить каждый столбец соответствующим химическим символом. Мы можем сделать это с помощью роли аннотации :
В нашей таблице данных мы определяем новый столбец с { role: 'annotation' }
для хранения меток наших столбцов:
var data = google.visualization.arrayToDataTable([ ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ], ['Copper', 8.94, '#b87333', 'Cu' ], ['Silver', 10.49, 'silver', 'Ag' ], ['Gold', 19.30, 'gold', 'Au' ], ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ] ]);
Хотя пользователи могут наводить курсор на столбцы, чтобы увидеть значения данных, вы можете включить их в сами столбцы:
Это немного сложнее, чем должно быть, поскольку мы создаем DataView
для указания аннотации для каждого столбца.
<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([ ["Element", "Density", { role: "style" } ], ["Copper", 8.94, "#b87333"], ["Silver", 10.49, "silver"], ["Gold", 19.30, "gold"], ["Platinum", 21.45, "color: #e5e4e2"] ]); var view = new google.visualization.DataView(data); view.setColumns([0, 1, { calc: "stringify", sourceColumn: 1, type: "string", role: "annotation" }, 2]); var options = { title: "Density of Precious Metals, in g/cm^3", width: 600, height: 400, bar: {groupWidth: "95%"}, legend: { position: "none" }, }; var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values")); chart.draw(view, options); } </script> <div id="columnchart_values" style="width: 900px; height: 300px;"></div>
Если бы мы хотели отформатировать значение по-другому, мы могли бы определить форматировщик и обернуть его в такую функцию:
function getValueAt(column, dataTable, row) { return dataTable.getFormattedValue(row, column); }
Тогда мы могли бы вызвать его с помощью calc: getValueAt.bind(undefined, 1)
.
Если метка слишком велика и не помещается целиком внутри столбца, она отображается снаружи:
Гистограммы с накоплением
Столбчатая диаграмма с накоплением — это столбчатая диаграмма, в которой связанные значения размещаются друг над другом. Если есть отрицательные значения, они располагаются в обратном порядке ниже базовой линии диаграммы. Обычно он используется, когда категория естественным образом делится на компоненты. Например, рассмотрим некоторые гипотетические продажи книг, разделенные по жанрам и сравненные во времени:
Вы создаете гистограмму с накоплением, устанавливая для параметра isStacked
значение true
:
var data = google.visualization.arrayToDataTable([ ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General', 'Western', 'Literature', { role: 'annotation' } ], ['2010', 10, 24, 20, 32, 18, 5, ''], ['2020', 16, 22, 23, 30, 16, 9, ''], ['2030', 28, 19, 29, 30, 12, 13, ''] ]); var options = { width: 600, height: 400, legend: { position: 'top', maxLines: 3 }, bar: { groupWidth: '75%' }, isStacked: true, };
Столбчатые диаграммы с накоплением также поддерживают 100%-ное наложение, при котором стеки элементов в каждом значении домена масштабируются таким образом, что их сумма составляет 100%. Для этого доступны следующие параметры isStacked: 'percent'
, который форматирует каждое значение как процент от 100 %, и isStacked: 'relative'
, который форматирует каждое значение как дробь от 1. Существует также опция isStacked: 'absolute'
, что функционально эквивалентно isStacked: true
.
Обратите внимание, что на диаграмме с накоплением 100% справа значения делений основаны на относительной шкале от 0 до 1 как доли от 1, но значения оси отображаются в процентах. Это связано с тем, что деления процентной оси являются результатом применения формата «#.##%» к относительным значениям шкалы 0–1. При использовании isStacked: 'percent'
обязательно указывайте любые значения делений/осей, используя относительную шкалу 0–1.
var options_stacked = { isStacked: true, height: 300, legend: {position: 'top', maxLines: 3}, vAxis: {minValue: 0} };
var options_fullStacked = { isStacked: 'percent', height: 300, legend: {position: 'top', maxLines: 3}, vAxis: { minValue: 0, ticks: [0, .3, .6, .9, 1] } };
Создание столбчатых диаграмм материалов
В 2014 году Google объявила о рекомендациях, направленных на поддержку единого внешнего вида своих свойств и приложений (например, приложений Android), работающих на платформах Google. Мы называем это проектом Material Design . Мы будем предоставлять «материальные» версии всех наших основных диаграмм; вы можете использовать их, если вам нравится, как они выглядят.
Создание столбчатой диаграммы материалов аналогично созданию того, что мы теперь будем называть «классической» столбчатой диаграммой. Вы загружаете API визуализации Google (хотя и с пакетом 'bar'
вместо пакета 'corechart'
), определяете свою таблицу данных, а затем создаете объект (но класса google.charts.Bar
вместо google.visualization.ColumnChart
).
Поскольку гистограммы и гистограммы по сути идентичны, за исключением ориентации, мы называем обе гистограммы материала, независимо от того, являются ли гистограммы вертикальными (классически гистограмма) или горизонтальными (гистограмма). В «Материале» единственная разница заключается в опции bars
. Если установлено значение 'horizontal'
, ориентация будет напоминать традиционную классическую гистограмму; в противном случае полосы будут вертикальными.
Примечание. Диаграммы материалов не будут работать в старых версиях Internet Explorer. (IE8 и более ранние версии не поддерживают SVG, который требуется для диаграмм материалов.)
Столбчатые диаграммы материалов имеют множество небольших улучшений по сравнению с классическими столбчатыми диаграммами, включая улучшенную цветовую палитру, закругленные углы, более четкое форматирование меток, более узкие интервалы по умолчанию между сериями, более мягкие линии сетки и заголовки (а также добавление субтитров).
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['bar']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses', 'Profit'], ['2014', 1000, 400, 200], ['2015', 1170, 460, 250], ['2016', 660, 1120, 300], ['2017', 1030, 540, 350] ]); var options = { chart: { title: 'Company Performance', subtitle: 'Sales, Expenses, and Profit: 2014-2017', } }; var chart = new google.charts.Bar(document.getElementById('columnchart_material')); chart.draw(data, google.charts.Bar.convertOptions(options)); } </script> </head> <body> <div id="columnchart_material" style="width: 800px; height: 500px;"></div> </body> </html>
Таблицы материалов находятся в стадии бета-тестирования . Внешний вид и интерактивность в значительной степени являются окончательными, но многие опции, доступные в классических диаграммах, еще в них недоступны. Список опций, которые еще не поддерживаются, вы можете найти в этом выпуске .
Кроме того, способ объявления параметров не доработан, поэтому, если вы используете какой-либо из классических параметров, вам необходимо преобразовать их в параметры материала, заменив эту строку:
chart.draw(data, options);
...с этим:
chart.draw(data, google.charts.Bar.convertOptions(options));
Использование google.charts.Bar.convertOptions()
позволяет вам воспользоваться определенными функциями, такими как предустановленные параметры hAxis/vAxis.format
.
Диаграммы Dual-Y
Иногда вам может понадобиться отобразить два ряда в гистограмме с двумя независимыми осями Y: левая ось для одного ряда и правая ось для другого:
Обратите внимание, что наши две оси Y не только помечены по-разному («парсеки» и «кажущаяся величина»), но и каждая из них имеет свои собственные независимые масштабы и линии сетки. Если вы хотите настроить это поведение, используйте параметры vAxis.gridlines
.
В приведенном ниже коде параметры axes
и series
вместе определяют внешний вид диаграммы в виде двойного Y. Параметр series
указывает, какую ось использовать для каждой из них ( 'distance'
и 'brightness'
; они не обязательно должны иметь какое-либо отношение к именам столбцов в таблице данных). Опция axes
затем превращает эту диаграмму в двойную диаграмму Y, помещая ось 'distance'
слева (с надписью «парсек») и ось 'brightness'
справа (с надписью «видимая величина»).
<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', 'bar']}); google.charts.setOnLoadCallback(drawStuff); function drawStuff() { var button = document.getElementById('change-chart'); var chartDiv = document.getElementById('chart_div'); var data = google.visualization.arrayToDataTable([ ['Galaxy', 'Distance', 'Brightness'], ['Canis Major Dwarf', 8000, 23.3], ['Sagittarius Dwarf', 24000, 4.5], ['Ursa Major II Dwarf', 30000, 14.3], ['Lg. Magellanic Cloud', 50000, 0.9], ['Bootes I', 60000, 13.1] ]); var materialOptions = { width: 900, chart: { title: 'Nearby galaxies', subtitle: 'distance on the left, brightness on the right' }, series: { 0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'. 1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'. }, axes: { y: { distance: {label: 'parsecs'}, // Left y-axis. brightness: {side: 'right', label: 'apparent magnitude'} // Right y-axis. } } }; var classicOptions = { width: 900, series: { 0: {targetAxisIndex: 0}, 1: {targetAxisIndex: 1} }, title: 'Nearby galaxies - distance on the left, brightness on the right', vAxes: { // Adds titles to each axis. 0: {title: 'parsecs'}, 1: {title: 'apparent magnitude'} } }; function drawMaterialChart() { var materialChart = new google.charts.Bar(chartDiv); materialChart.draw(data, google.charts.Bar.convertOptions(materialOptions)); button.innerText = 'Change to Classic'; button.onclick = drawClassicChart; } function drawClassicChart() { var classicChart = new google.visualization.ColumnChart(chartDiv); classicChart.draw(data, classicOptions); button.innerText = 'Change to Material'; button.onclick = drawMaterialChart; } drawMaterialChart(); }; </script> </head> <body> <button id="change-chart">Change to Classic</button> <br><br> <div id="chart_div" style="width: 800px; height: 500px;"></div> </body> </html>
Чарты Top-X
Примечание. Оси Top-X доступны только для диаграмм материалов (т. е. для диаграмм с пакетной bar
).
Если вы хотите разместить метки и заголовок оси X вверху диаграммы, а не внизу, вы можете сделать это в диаграммах материалов с помощью опции axes.x
:
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['bar']}); google.charts.setOnLoadCallback(drawStuff); function drawStuff() { var data = new google.visualization.arrayToDataTable([ ['Move', 'Percentage'], ["King's pawn (e4)", 44], ["Queen's pawn (d4)", 31], ["Knight to King 3 (Nf3)", 12], ["Queen's bishop pawn (c4)", 10], ['Other', 3] ]); var options = { width: 800, legend: { position: 'none' }, chart: { title: 'Chess opening moves', subtitle: 'popularity by percentage' }, axes: { x: { 0: { side: 'top', label: 'White to move'} // Top x-axis. } }, bar: { groupWidth: "90%" } }; var chart = new google.charts.Bar(document.getElementById('top_x_div')); // Convert the Classic options to Material options. chart.draw(data, google.charts.Bar.convertOptions(options)); }; </script> </head> <body> <div id="top_x_div" style="width: 800px; height: 600px;"></div> </body> </html>
Загрузка
Имя пакета google.charts.load
— "corechart"
. Имя класса визуализации — google.visualization.ColumnChart
.
google.charts.load("current", {packages: ["corechart"]});
var visualization = new google.visualization.ColumnChart(container);
Для столбчатых диаграмм материалов имя пакета google.charts.load
— "bar"
. (Это не опечатка: гистограмма материала поддерживает обе ориентации.) Имя класса визуализации — google.charts.Bar
. (Это не опечатка: гистограмма материалов поддерживает обе ориентации.)
google.charts.load("current", {packages: ["bar"]});
var chart = new google.charts.Bar(container);
Формат данных
Каждая строка таблицы представляет собой группу соседних столбцов.
Строки: каждая строка в таблице представляет группу столбцов.
Столбцы:
Столбец 0 | Столбец 1 | ... | Столбец N | |
---|---|---|---|---|
Цель: |
| Значения бара 1 в этой группе | ... | Значения Bar N в этой группе |
Тип данных: |
| число | ... | число |
Роль: | домен | данные | ... | данные |
Дополнительные роли столбцов : | ... |
Варианты конфигурации
Имя | |
---|---|
анимация.длительность | Продолжительность анимации в миллисекундах. Подробности смотрите в документации по анимации . Тип: номер По умолчанию: 0 |
анимация.easing | Функция замедления, примененная к анимации. Доступны следующие варианты:
Тип: строка По умолчанию: «линейный» |
анимация.стартап | Определяет, будет ли диаграмма анимироваться при первоначальном рисовании. Если Тип: логический По умолчанию ложь |
аннотации.всегдавне | В гистограммах и столбчатых диаграммах, если установлено значение Тип: логический По умолчанию: ложь |
annotations.boxStyle | Для диаграмм, поддерживающих аннотации , объект var options = { annotations: { boxStyle: { // Color of the box outline. stroke: '#888', // Thickness of the box outline. strokeWidth: 1, // x-radius of the corner curvature. rx: 10, // y-radius of the corner curvature. ry: 10, // Attributes for linear gradient fill. gradient: { // Start color for gradient. color1: '#fbf6a7', // Finish color for gradient. color2: '#33b679', // Where on the boundary to start and // end the color1/color2 gradient, // relative to the upper left corner // of the boundary. x1: '0%', y1: '0%', x2: '100%', y2: '100%', // If true, the boundary for x1, // y1, x2, and y2 is the box. If // false, it's the entire chart. useObjectBoundingBoxUnits: true } } } }; В настоящее время этот параметр поддерживается для диаграмм с областями, гистограммами, столбцами, комбинированными, линейными и точечными диаграммами. Это не поддерживается аннотационной диаграммой . Тип: объект По умолчанию: ноль |
аннотации.данные | Для диаграмм, поддерживающих аннотации , объект annotations.datum позволяет переопределить выбор Google Charts для аннотаций, предоставляемых для отдельных элементов данных (например, значений, отображаемых на каждой полосе гистограммы). Вы можете управлять цветом с помощью annotations.datum.stem.color , длиной стебля с помощью annotations.datum.stem.length и стилем с помощью annotations.datum.style . Тип: объект По умолчанию: цвет «черный»; длина 12; стиль — «точка». |
аннотации.домен | Для диаграмм, поддерживающих аннотации , объект annotations.domain позволяет переопределить выбор Google Charts для аннотаций, предоставленных для домена (основная ось диаграммы, например ось X на типичной линейной диаграмме). Вы можете управлять цветом с помощью annotations.domain.stem.color , длиной основы с помощью annotations.domain.stem.length и стилем с помощью annotations.domain.style . Тип: объект По умолчанию: цвет «черный»; длина 5; стиль — «точка». |
аннотации.highContrast | Для диаграмм, поддерживающих аннотации , логическое значение annotations.highContrast позволяет переопределить выбор цвета аннотации в Google Charts. По умолчанию annotations.highContrast имеет значение true, что заставляет диаграммы выбирать цвет аннотации с хорошей контрастностью: светлые цвета на темном фоне и темные на светлом. Если вы установите для annotations.highContrast значение false и не укажете собственный цвет аннотации, Google Charts будет использовать для аннотации цвет серии по умолчанию: Тип: логический По умолчанию: правда |
аннотации.стержень | Для диаграмм, поддерживающих аннотации , объект annotations.stem позволяет переопределить выбор Google Charts для стиля основы. Вы можете управлять цветом с помощью annotations.stem.color и длиной стебля с помощью annotations.stem.length . Обратите внимание, что параметр длины основы не влияет на аннотации со стилем 'line' : для аннотаций к базе 'line' длина основы всегда такая же, как и текст, а для аннотаций домена 'line' основа распространяется на всю диаграмму. . Тип: объект По умолчанию: цвет «черный»; длина равна 5 для аннотаций домена и 12 для аннотаций данных. |
аннотации.стиль | Для диаграмм, поддерживающих аннотации , параметр annotations.style позволяет переопределить выбор типа аннотации в Google Charts. Это может быть либо 'line' , либо 'point' . Тип: строка По умолчанию: «точка» |
аннотации.textStyle | Для диаграмм, поддерживающих аннотации , объект annotations.textStyle управляет внешним видом текста аннотации:var options = { annotations: { textStyle: { fontName: 'Times-Roman', fontSize: 18, bold: true, italic: true, // The color of the text. color: '#871b47', // The color of the text outline. auraColor: '#d799ae', // The transparency of the text. opacity: 0.8 } } }; В настоящее время этот параметр поддерживается для диаграмм с областями, гистограммами, столбцами, комбинированными, линейными и точечными диаграммами. Это не поддерживается аннотационной диаграммой . Тип: объект По умолчанию: ноль |
осьНазванияПозиция | Где разместить заголовки осей по сравнению с областью диаграммы. Поддерживаемые значения:
Тип: строка По умолчанию: «выход» |
фоновый цвет | Цвет фона основной области диаграммы. Это может быть либо простая цветовая строка HTML, например: Тип: строка или объект По умолчанию: «белый» |
фонЦвет.обводка | Цвет границы диаграммы в виде цветовой строки HTML. Тип: строка По умолчанию: '#666' |
backgroundColor.strokeWidth | Ширина границы в пикселях. Тип: номер По умолчанию: 0 |
фонЦвет.заливка | Цвет заливки диаграммы в виде цветовой строки HTML. Тип: строка По умолчанию: «белый» |
bar.groupWidth | Ширина группы столбцов, указанная в любом из этих форматов:
Тип: число или строка. По умолчанию: Золотое сечение , примерно «61,8%». |
бары | Являются ли столбцы на гистограмме материала вертикальными или горизонтальными. Этот параметр не влияет на классические гистограммы и классические столбчатые диаграммы. Тип: «горизонтальный» или «вертикальный». По умолчанию: «вертикальный» |
область диаграммы | Объект с элементами для настройки размещения и размера области диаграммы (где рисуется сама диаграмма, исключая оси и легенды). Поддерживаются два формата: число или число, за которым следует %. Простое число — это значение в пикселях; число, за которым следует %, представляет собой процент. Пример: Тип: объект По умолчанию: ноль |
chartArea.backgroundColor | Цвет фона области диаграммы. Когда используется строка, это может быть либо шестнадцатеричная строка (например, «#fdc»), либо название цвета на английском языке. При использовании объекта могут быть предоставлены следующие свойства:
Тип: строка или объект По умолчанию: «белый» |
диаграммаArea.left | Насколько далеко рисовать диаграмму от левой границы. Тип: число или строка. По умолчанию: авто |
диаграммаArea.top | На каком расстоянии рисовать диаграмму от верхней границы. Тип: число или строка. По умолчанию: авто |
ChartArea.width | Ширина области диаграммы. Тип: число или строка. По умолчанию: авто |
диаграммаArea.height | Высота области диаграммы. Тип: число или строка. По умолчанию: авто |
диаграмма.подзаголовок | Для диаграмм материалов этот параметр определяет подзаголовок. Только диаграммы материалов поддерживают субтитры. Тип: строка По умолчанию: ноль |
диаграмма.название | Для диаграмм материалов этот параметр определяет заголовок. Тип: строка По умолчанию: ноль |
цвета | Цвета, используемые для элементов диаграммы. Массив строк, где каждый элемент представляет собой строку цвета HTML, например: Тип: Массив строк. По умолчанию: цвета по умолчанию |
непрозрачность данных | Прозрачность точек данных: 1,0 означает полную непрозрачность, а 0,0 — полную прозрачность. В точечных, гистограммах, гистограммах и столбчатых диаграммах это относится к видимым данным: точкам на точечной диаграмме и прямоугольникам на остальных. В диаграммах, где выбор данных создает точку, например в линейных диаграммах и диаграммах с областями, это относится к кругам, которые появляются при наведении курсора или выборе. Комбинированная диаграмма демонстрирует оба поведения, и этот параметр не влияет на другие диаграммы. (Чтобы изменить непрозрачность линии тренда, см. раздел Непрозрачность линии тренда .) Тип: номер По умолчанию: 1,0 |
включитьИнтерактивность | Определяет ли диаграмма события, связанные с пользователем, или реагирует на взаимодействие с пользователем. Если установлено значение false, диаграмма не будет генерировать события «выбор» или другие события, основанные на взаимодействии (но будет генерировать события готовности или ошибки), а также не будет отображать наводящий текст или иным образом изменяться в зависимости от ввода пользователя. Тип: логический По умолчанию: правда |
исследователь | Опция Эта функция является экспериментальной и может измениться в будущих выпусках. Примечание. Проводник работает только с непрерывными осями (например, числами или датами). Тип: объект По умолчанию: ноль |
explorer.actions | Обозреватель Google Charts поддерживает три действия:
Тип: Массив строк. По умолчанию: ['dragToPan', 'rightClickToReset'] |
explorer.axis | По умолчанию пользователи могут панорамировать как по горизонтали, так и по вертикали, когда используется опция Тип: строка По умолчанию: горизонтальное и вертикальное панорамирование. |
explorer.keepInBounds | По умолчанию пользователи могут панорамировать все вокруг, независимо от того, где находятся данные. Чтобы гарантировать, что пользователи не выходят за пределы исходной диаграммы, используйте Тип: логический По умолчанию: ложь |
explorer.maxZoomIn | Максимальное увеличение, которое может увеличить проводник. По умолчанию пользователи смогут увеличить масштаб настолько, что смогут видеть только 25 % исходного изображения. Настройка Тип: номер По умолчанию: 0,25 |
explorer.maxZoomOut | Максимум, на который может уменьшить масштаб проводник. По умолчанию пользователи смогут уменьшить масштаб настолько, что диаграмма будет занимать только 1/4 доступного пространства. Настройка Тип: номер По умолчанию: 4 |
explorer.zoomDelta | Когда пользователи увеличивают или уменьшают масштаб, Тип: номер По умолчанию: 1,5 |
фокусЦель | Тип объекта, который получает фокус при наведении курсора мыши. Также влияет на то, какой объект выбирается щелчком мыши и какой элемент таблицы данных связан с событиями. Может быть одним из следующих:
В focusTarget «категория» всплывающая подсказка отображает все значения категории. Это может быть полезно для сравнения значений разных рядов. Тип: строка По умолчанию: «база данных» |
размер шрифта | Размер шрифта по умолчанию (в пикселях) для всего текста на диаграмме. Вы можете переопределить это, используя свойства для определенных элементов диаграммы. Тип: номер По умолчанию: автоматический |
имя шрифта | Шрифт по умолчанию для всего текста на диаграмме. Вы можете переопределить это, используя свойства для определенных элементов диаграммы. Тип: строка По умолчанию: «Ариал» |
сила IFrame | Рисует диаграмму внутри встроенного фрейма. (Обратите внимание, что в IE8 этот параметр игнорируется; все диаграммы IE8 рисуются в i-кадрах.) Тип: логический По умолчанию: ложь |
ось | Объект с элементами для настройки различных элементов горизонтальной оси. Чтобы указать свойства этого объекта, вы можете использовать буквальную запись объекта, как показано здесь: { 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 | Переопределяет формат по умолчанию для различных аспектов типов данных date/datetime/timeofday при использовании с вычисляемыми линиями сетки диаграммы. Позволяет форматировать годы, месяцы, дни, часы, минуты, секунды и миллисекунды. Общий формат: 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.count | Параметр Тип: номер По умолчанию: 1 |
hAxis.minorGridlines.interval | Параметр majorGridlines.interval аналогичен параметру интервала основных линий сетки, но выбранный интервал всегда будет четным делителем интервала основных линий сетки. Интервал по умолчанию для линейных масштабов — Тип: номер По умолчанию: 1 |
hAxis.minorGridlines.minSpacing | Минимально необходимое пространство в пикселях между соседними второстепенными линиями сетки, а также между второстепенными и основными линиями сетки. Значение по умолчанию составляет 1/2 minSpacing основных линий сетки для линейных масштабов и 1/5 minSpacing для логарифмических масштабов. Тип: номер По умолчанию: вычисляется |
hAxis.minorGridlines.multiple | То же, что и для основных Тип: номер По умолчанию: 1 |
hAxis.minorGridlines.units | Переопределяет формат по умолчанию для различных аспектов типов данных date/datetime/timeofday при использовании с вычисляемыми диаграммами majorGridlines. Позволяет форматировать годы, месяцы, дни, часы, минуты, секунды и миллисекунды. Общий формат: 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 | Положение текста по горизонтальной оси относительно области диаграммы. Поддерживаемые значения: «вне», «вход», «нет». Тип: строка По умолчанию: «выход» |
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 будет автоматически расширен, чтобы включить отметки min и max, если вы не укажете Примеры:
Эта опция поддерживается только для Тип: Массив элементов По умолчанию: авто |
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.maxАльтернация | Максимальное количество уровней текста по горизонтальной оси. Если текстовые метки осей становятся слишком перегруженными, сервер может сдвинуть соседние метки вверх или вниз, чтобы расположить метки ближе друг к другу. Это значение определяет наибольшее количество используемых уровней; сервер может использовать меньшее количество уровней, если метки могут помещаться без перекрытия. Для даты и времени значение по умолчанию — 1. Тип: номер По умолчанию: 2 |
hAxis.maxTextLines | Максимальное количество строк, разрешенное для текстовых меток. Метки могут занимать несколько строк, если они слишком длинные, а количество строк по умолчанию ограничено высотой доступного пространства. Тип: номер По умолчанию: авто |
hAxis.minTextSpacing | Минимальное горизонтальное расстояние в пикселях, допустимое между двумя соседними текстовыми метками. Если метки расположены слишком плотно или слишком длинные, интервал может упасть ниже этого порога, и в этом случае будет применена одна из мер по устранению беспорядка в метках (например, усечение меток или удаление некоторых из них). Тип: номер По умолчанию: значение hAxis.textStyle.fontSize |
hAxis.showTextEvery | Сколько меток по горизонтальной оси отображать, где 1 означает отображение каждой метки, 2 означает отображение каждой второй метки и т. д. По умолчанию мы пытаемся отобразить как можно больше меток без перекрытия. Тип: номер По умолчанию: автоматический |
hAxis.maxValue | Перемещает максимальное значение горизонтальной оси на указанное значение; на большинстве графиков это будет вправо. Игнорируется, если для этого параметра установлено значение меньше максимального значения x данных. Эта опция поддерживается только для Тип: номер По умолчанию: автоматический |
hAxis.minValue | Перемещает минимальное значение горизонтальной оси на указанное значение; на большинстве графиков это будет левое положение. Игнорируется, если для этого параметра установлено значение, превышающее минимальное значение x данных. Эта опция поддерживается только для Тип: номер По умолчанию: автоматический |
hAxis.viewWindowMode | Указывает, как масштабировать горизонтальную ось для отображения значений в области диаграммы. Поддерживаются следующие строковые значения:
Эта опция поддерживается только для Тип: строка По умолчанию: эквивалент «pretty», но haxis.viewWindow.min и haxis.viewWindow.max имеют приоритет, если они используются. |
hAxis.viewWindow | Указывает диапазон обрезки горизонтальной оси. Тип: объект По умолчанию: ноль |
hAxis.viewWindow.max |
Игнорируется, когда Тип: номер По умолчанию: авто |
hAxis.viewWindow.min |
Игнорируется, когда Тип: номер По умолчанию: авто |
высота | Высота диаграммы в пикселях. Тип: номер По умолчанию: высота содержащего элемента. |
isStacked | Если установлено значение true, элементы для всех серий складываются в каждое значение домена. Примечание. В диаграммах «Столбец» , «Область» и «Ступенчатая область» Google Charts меняет порядок элементов легенды на обратный, чтобы лучше соответствовать расположению элементов серии (например, серия 0 будет самым нижним элементом легенды). Это не относится к гистограммам . Параметр Параметры
При 100% суммировании расчетное значение для каждого элемента появится во всплывающей подсказке после его фактического значения. Целевая ось по умолчанию будет отображать значения деления на основе относительной шкалы 0–1 в виде долей от 1 для 100-процентное стекирование поддерживает только значения данных типа Тип: логическое значение/строка По умолчанию: ложь |
легенда | Объект с членами для настройки различных аспектов легенды. Чтобы указать свойства этого объекта, вы можете использовать буквальную запись объекта, как показано здесь: {position: 'top', textStyle: {color: 'blue', fontSize: 16}} Тип: объект По умолчанию: ноль |
легенда.pageIndex | Начальный выбранный индекс страницы легенды, отсчитываемый от нуля. Тип: номер По умолчанию: 0 |
легенда.позиция | Позиция легенды. Может быть одним из следующих:
Тип: строка По умолчанию: «право» |
легенда.выравнивание | Согласование легенды. Может быть одним из следующих:
Начало, центр и конец зависят от стиля легенды (вертикального или горизонтального). Например, в «правой» легенде «начало» и «конец» находятся вверху и внизу соответственно; для «верхней» легенды «начало» и «конец» будут находиться слева и справа от области соответственно. Значение по умолчанию зависит от положения легенды. Для «нижних» легенд по умолчанию используется «центр»; другие легенды по умолчанию имеют значение «старт». Тип: строка По умолчанию: автоматический |
Legend.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} } Тип: Массив объектов или объект со вложенными объектами. По умолчанию: {} |
тема | Тема — это набор предопределенных значений параметров, которые вместе обеспечивают достижение определенного поведения диаграммы или визуального эффекта. На данный момент доступна только одна тема:
Тип: строка По умолчанию: ноль |
заголовок | Текст для отображения над диаграммой. Тип: строка По умолчанию: без названия |
НазваниеПозиция | Где разместить заголовок диаграммы по сравнению с областью диаграммы. Поддерживаемые значения:
Тип: строка По умолчанию: «выход» |
заголовокTextStyle | Объект, определяющий стиль текста заголовка. Объект имеет такой формат: { 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, любое переполнение за пределами границ диаграммы будет обрезано. Дополнительные сведения см. в разделе «Настройка содержимого всплывающей подсказки» . Тип: логический По умолчанию: ложь |
подсказка.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>} |
подсказка.триггер | Взаимодействие пользователя, вызывающее отображение всплывающей подсказки:
Тип: строка По умолчанию: «фокус» |
линии тренда | Отображает линии тренда на диаграммах, которые их поддерживают. По умолчанию используются линейные линии тренда, но их можно настроить с помощью Линии тренда указываются для каждой серии, поэтому в большинстве случаев ваши варианты будут выглядеть следующим образом: var options = { trendlines: { 0: { type: 'linear', color: 'green', lineWidth: 3, opacity: 0.3, showR2: true, visibleInLegend: true } } } Тип: объект По умолчанию: ноль |
линии тренда.n.color | Цвет линии тренда , выраженный либо в виде английского названия цвета, либо в виде шестнадцатеричной строки. Тип: строка По умолчанию: цвет серии по умолчанию. |
линии тренда.n.степень | Для линий тренда Тип: номер По умолчанию: 3 |
Trendlines.n.labelInLegend | Если установлено, линия тренда будет отображаться в легенде в виде этой строки. Тип: строка По умолчанию: ноль |
Trendlines.n.lineWidth | Толщина линии тренда в пикселях. Тип: номер По умолчанию: 2 |
линии тренда.n.opacity | Прозрачность линии тренда от 0,0 (прозрачная) до 1,0 (непрозрачная). Тип: номер По умолчанию: 1,0 |
Trendlines.n.pointSize | Линии тренда создаются путем нанесения на график множества точек; эта редко используемая опция позволяет настроить размер точек. Опция Тип: номер По умолчанию: 1 |
линии тренда.n.pointsVisible | Линии тренда строятся путем нанесения на график множества точек. Опция Тип: логический По умолчанию: правда |
линии тренда.n.showR2 | Показывать ли коэффициент детерминации в легенде или во всплывающей подсказке линии тренда. Тип: логический По умолчанию: ложь |
линии тренда.n.type | Является ли линия тренда Тип: строка По умолчанию: линейный |
Trendlines.n.visibleInLegend | Появляется ли уравнение линии тренда в легенде. (Оно появится во всплывающей подсказке линии тренда.) Тип: логический По умолчанию: ложь |
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 } ] Тип: Массив объектов или объект с дочерними объектами. По умолчанию: ноль |
вАксис | Объект с элементами для настройки различных элементов вертикальной оси. Чтобы указать свойства этого объекта, вы можете использовать буквальную запись объекта, как показано здесь: {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 | Цвет вертикальных линий сетки внутри области диаграммы. Укажите допустимую цветовую строку HTML. Тип: строка По умолчанию: '#CCC' |
vAxis.gridlines.count | Примерное количество горизонтальных линий сетки внутри области диаграммы. Если вы укажете положительное число для Тип: номер По умолчанию: -1 |
vAxis.gridlines.interval | Массив размеров (в виде значений данных, а не пикселей) между соседними линиями сетки. В настоящее время эта опция предназначена только для числовых осей, но она аналогична опциям Тип: число от 1 до 10, не включая 10. По умолчанию: вычисляется |
vAxis.gridlines.minSpacing | Минимальное пространство экрана в пикселях между основными линиями сетки hAxis. По умолчанию для основных линий сетки установлено значение Тип: номер По умолчанию: вычисляется |
vAxis.gridlines.multiple | Все значения линий сетки и делений должны быть кратны значению этого параметра. Обратите внимание, что, в отличие от интервалов, степени, кратные 10, не учитываются. Таким образом, вы можете заставить такты быть целыми числами, указав Тип: номер По умолчанию: 1 |
vAxis.gridlines.units | Переопределяет формат по умолчанию для различных аспектов типов данных date/datetime/timeofday при использовании с вычисляемыми линиями сетки диаграммы. Позволяет форматировать годы, месяцы, дни, часы, минуты, секунды и миллисекунды. Общий формат: 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*/]} } } Дополнительную информацию можно найти в разделе Даты и время . Тип: объект По умолчанию: ноль |
vAxis.minorGridlines | Объект с элементами для настройки второстепенных линий сетки на вертикальной оси, аналогично параметру vAxis.gridlines. Тип: объект По умолчанию: ноль |
vAxis.minorGridlines.color | Цвет второстепенных вертикальных линий сетки внутри области диаграммы. Укажите допустимую цветовую строку HTML. Тип: строка По умолчанию: сочетание цветов линии сетки и фона. |
vAxis.minorGridlines.count | Параметр majorGridlines.count по большей части устарел, за исключением отключения второстепенных линий сетки путем установки счетчика равным 0. Количество второстепенных линий сетки зависит от интервала между основными линиями сетки (см. vAxis.gridlines.interval) и минимально необходимого пространства (см. vAxis. minorGridlines.minSpacing). Тип: номер По умолчанию: 1 |
vAxis.minorGridlines.interval | Параметр majorGridlines.interval аналогичен параметру интервала основных линий сетки, но выбранный интервал всегда будет четным делителем интервала основных линий сетки. Интервал по умолчанию для линейных масштабов — Тип: номер По умолчанию: 1 |
vAxis.minorGridlines.minSpacing | Минимально необходимое пространство в пикселях между соседними второстепенными линиями сетки, а также между второстепенными и основными линиями сетки. Значение по умолчанию составляет 1/2 minSpacing основных линий сетки для линейных масштабов и 1/5 minSpacing для логарифмических масштабов. Тип: номер По умолчанию: вычисляется |
vAxis.minorGridlines.multiple | То же, что и для основных Тип: номер По умолчанию: 1 |
vAxis.minorGridlines.units | Переопределяет формат по умолчанию для различных аспектов типов данных date/datetime/timeofday при использовании с вычисляемыми диаграммами majorGridlines. Позволяет форматировать годы, месяцы, дни, часы, минуты, секунды и миллисекунды. Общий формат: 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*/]}, } } Дополнительную информацию можно найти в разделе Даты и время . Тип: объект По умолчанию: ноль |
vAxis.logScale | Если это правда, вертикальная ось принимает логарифмический масштаб. Примечание. Все значения должны быть положительными. Тип: логический По умолчанию: ложь |
vAxis.scaleType | Свойство
Эта опция поддерживается только для Тип: строка По умолчанию: ноль |
vAxis.textPosition | Положение текста вертикальной оси относительно области диаграммы. Поддерживаемые значения: «вне», «вход», «нет». Тип: строка По умолчанию: «выход» |
vAxis.textStyle | Объект, задающий стиль текста по вертикальной оси. Объект имеет такой формат: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } Тип: объект По умолчанию: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} |
vAxis.ticks | Заменяет автоматически сгенерированные отметки оси Y указанным массивом. Каждый элемент массива должен быть либо допустимым значением тика (например, числом, датой, датой и временем или днем), либо объектом. Если это объект, он должен иметь свойство ViewWindow будет автоматически расширен, чтобы включить отметки min и max, если вы не укажете Примеры:
Тип: Массив элементов По умолчанию: авто |
vAxis.title | Свойство Тип: строка По умолчанию: без названия |
vAxis.titleTextStyle | Объект, определяющий стиль текста заголовка вертикальной оси. Объект имеет такой формат: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } Тип: объект По умолчанию: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} |
vAxis.maxValue | Перемещает максимальное значение вертикальной оси на указанное значение; на большинстве графиков это будет вверх. Игнорируется, если для этого параметра установлено значение меньше максимального значения y данных. Тип: номер По умолчанию: автоматический |
vAxis.minValue | Перемещает минимальное значение вертикальной оси на указанное значение; на большинстве графиков это будет снижение. Игнорируется, если для этого параметра установлено значение, превышающее минимальное значение y данных. Тип: номер По умолчанию: ноль |
vAxis.viewWindowMode | Указывает, как масштабировать вертикальную ось для отображения значений в области диаграммы. Поддерживаются следующие строковые значения:
Тип: строка По умолчанию: эквивалентно «pretty», но vaxis.viewWindow.min и vaxis.viewWindow.max имеют приоритет, если они используются. |
vAxis.viewWindow | Указывает диапазон обрезки вертикальной оси. Тип: объект По умолчанию: ноль |
vAxis.viewWindow.max | Максимальное значение вертикальных данных для визуализации. Игнорируется, когда Тип: номер По умолчанию: авто |
vAxis.viewWindow.min | Минимальное значение вертикальных данных для визуализации. Игнорируется, когда Тип: номер По умолчанию: авто |
ширина | Ширина диаграммы в пикселях. Тип: номер По умолчанию: ширина содержащего элемента. |
Методы
Метод | |
---|---|
draw(data, options) | Рисует диаграмму. Диаграмма принимает дальнейшие вызовы методов только после запуска события Тип возврата: нет |
getAction(actionID) | Возвращает объект действия всплывающей подсказки с запрошенным Тип возвращаемого значения: объект |
getBoundingBox(id) | Возвращает объект, содержащий
Значения относятся к контейнеру диаграммы. Вызовите это после того, как диаграмма будет нарисована. Тип возвращаемого значения: объект |
getChartAreaBoundingBox() | Возвращает объект, содержащий левую, верхнюю, ширину и высоту содержимого диаграммы (т. е. исключая метки и легенду):
Значения относятся к контейнеру диаграммы. Вызовите это после того, как диаграмма будет нарисована. Тип возвращаемого значения: объект |
getChartLayoutInterface() | Возвращает объект, содержащий информацию о расположении диаграммы и ее элементов на экране. К возвращаемому объекту можно вызвать следующие методы:
Вызовите это после того, как диаграмма будет нарисована. Тип возвращаемого значения: объект |
getHAxisValue(xPosition, optional_axis_index) | Возвращает значение горизонтальных данных в Пример: Вызовите это после того, как диаграмма будет нарисована. Тип возврата: число |
getImageURI() | Возвращает диаграмму, сериализованную как URI изображения. Вызовите это после того, как диаграмма будет нарисована. См. Печать диаграмм PNG . Тип возвращаемого значения: строка |
getSelection() | Возвращает массив выбранных объектов диаграммы. Выбираемыми объектами являются полосы, записи легенды и категории. Полоса соответствует ячейке в таблице данных, запись легенды — столбцу (индекс строки равен нулю), а категория — строке (индекс столбца равен нулю). Для этой диаграммы в любой момент времени можно выбрать только одну сущность. Тип возвращаемого значения: Массив элементов выбора. |
getVAxisValue(yPosition, optional_axis_index) | Возвращает значение вертикальных данных в Пример: Вызовите это после того, как диаграмма будет нарисована. Тип возврата: число |
getXLocation(dataValue, optional_axis_index) | Возвращает координату x в пикселях Пример: Вызовите это после того, как диаграмма будет нарисована. Тип возврата: число |
getYLocation(dataValue, optional_axis_index) | Возвращает координату y в пикселях Пример: Вызовите это после того, как диаграмма будет нарисована. Тип возврата: число |
removeAction(actionID) | Удаляет действие всплывающей подсказки с запрошенным Тип возврата: none |
setAction(action) | Устанавливает действие всплывающей подсказки, которое будет выполняться, когда пользователь нажимает на текст действия. Метод Любые действия подсказки должны быть установлены до вызова метода Тип возврата: none |
setSelection() | Выбирает указанные объекты диаграммы. Отменяет любой предыдущий выбор. Выбираемыми объектами являются полосы, записи легенды и категории. Полоса соответствует ячейке в таблице данных, запись легенды — столбцу (индекс строки имеет значение NULL), а категория — строке (индекс столбца имеет значение NULL). Для этой диаграммы одновременно можно выбрать только одну сущность. Тип возврата: нет |
clearChart() | Очищает диаграмму и освобождает все выделенные ей ресурсы. Тип возврата: нет |
События
Дополнительные сведения о том, как использовать эти события, см. в разделах «Базовая интерактивность» , «Обработка событий» и «Инициирование событий» .
Имя | |
---|---|
animationfinish | Запускается, когда анимация перехода завершена. Свойства: нет |
click | Запускается, когда пользователь щелкает внутри диаграммы. Может использоваться для определения момента щелчка по заголовку, элементам данных, записям легенды, осям, линиям сетки или меткам. Свойства: targetID |
error | Вызывается, когда возникает ошибка при попытке отобразить диаграмму. Свойства: идентификатор, сообщение |
legendpagination | Вызывается, когда пользователь нажимает стрелки нумерации страниц легенды. Возвращает текущий индекс страницы легенды, отсчитываемый от нуля, и общее количество страниц. Свойства: currentPageIndex, totalPages. |
onmouseover | Вызывается, когда пользователь наводит указатель мыши на визуальный объект. Возвращает индексы строк и столбцов соответствующего элемента таблицы данных. Свойства: строка, столбец |
onmouseout | Вызывается, когда пользователь уводит указатель мыши от визуального объекта. Возвращает индексы строк и столбцов соответствующего элемента таблицы данных. Свойства: строка, столбец |
ready | Диаграмма готова для вызовов внешних методов. Если вы хотите взаимодействовать с диаграммой и вызывать методы после ее рисования, вам следует настроить прослушиватель этого события до вызова метода Свойства: нет |
select | Запускается, когда пользователь щелкает визуальный объект. Чтобы узнать, что было выбрано, вызовите Свойства: нет |
Политика данных
Весь код и данные обрабатываются и отображаются в браузере. Никакие данные не отправляются ни на один сервер.