Обзор
Столбчатая диаграмма — это вертикальная гистограмма, отображаемая в браузере с использованием 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 . Мы будем предоставлять «Материальные» версии всех наших основных диаграмм; вы можете использовать их, если вам нравится, как они выглядят.
Создание гистограммы материала похоже на создание того, что мы теперь назовем «классической» гистограммой. Вы загружаете Google Visualization API (хотя и с пакетом '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>
Таблицы материалов находятся в стадии бета-тестирования . Внешний вид и интерактивность во многом окончательные, но многие опции, доступные в Classic Charts, в них пока недоступны. Вы можете найти список опций, которые еще не поддерживаются в этом выпуске .
Кроме того, способ объявления параметров не доработан, поэтому, если вы используете какой-либо из классических параметров, вы должны преобразовать свои параметры в материальные, заменив эту строку:
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 в этой группе | ... | Значения бара N в этой группе |
Тип данных: |
| количество | ... | количество |
Роль: | домен | данные | ... | данные |
Необязательные роли столбцов : | ... |
Варианты конфигурации
Имя | |
---|---|
анимация.длительность | Продолжительность анимации в миллисекундах. Подробности смотрите в документации по анимации . Тип: номер По умолчанию: 0 |
анимация.ослабление | Функция замедления применяется к анимации. Доступны следующие варианты:
Тип: строка По умолчанию: «линейный» |
анимация.стартап | Определяет, будет ли диаграмма анимироваться при начальном отрисовке. Если Тип: логический По умолчанию ложь |
annotations.alwaysOutside | В линейчатых и столбчатых диаграммах, если установлено значение Тип: логический По умолчанию: ложь |
аннотации.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 | Для диаграмм, поддерживающих аннотации , объект 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 | Для диаграмм, поддерживающих аннотации , объект 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 } } }; В настоящее время этот параметр поддерживается для диаграмм с областями, гистограмм, столбцов, комбинированных, линейных и точечных диаграмм. Аннотационной диаграммой это не поддерживается. Тип: объект По умолчанию: ноль |
осьTitlesPosition | Где размещать заголовки осей по сравнению с областью диаграммы. Поддерживаемые значения:
Тип: строка По умолчанию: «вне» |
фоновый цвет | Цвет фона для основной области диаграммы. Может быть либо простой строкой цвета HTML, например: Тип: строка или объект По умолчанию: «белый» |
backgroundColor.stroke | Цвет границы диаграммы в виде строки цвета HTML. Тип: строка По умолчанию: '#666' |
backgroundColor.strokeWidth | Ширина границы в пикселях. Тип: номер По умолчанию: 0 |
backgroundColor.fill | Цвет заливки диаграммы в виде строки цвета HTML. Тип: строка По умолчанию: «белый» |
bar.groupШирина | Ширина группы полос, указанная в любом из этих форматов:
Тип: число или строка По умолчанию: золотое сечение , примерно «61,8%». |
бары | Вертикальные или горизонтальные столбцы на линейчатой диаграмме материалов . Этот параметр не влияет на классические гистограммы или классические гистограммы. Тип: «горизонтальный» или «вертикальный» По умолчанию: «вертикальный» |
диаграммаОбласть | Объект с элементами для настройки размещения и размера области диаграммы (там, где рисуется сама диаграмма, за исключением осей и условных обозначений). Поддерживаются два формата: число или число, за которым следует %. Простое число — это значение в пикселях; число, за которым следует %, представляет собой процент. Пример: Тип: объект По умолчанию: ноль |
chartArea.backgroundColor | Цвет фона области диаграммы. Когда используется строка, это может быть либо шестнадцатеричная строка (например, '#fdc'), либо название цвета на английском языке. При использовании объекта могут быть предоставлены следующие свойства:
Тип: строка или объект По умолчанию: «белый» |
chartArea.left | Как далеко рисовать график от левой границы. Тип: число или строка По умолчанию: авто |
chartArea.top | Как далеко рисовать диаграмму от верхней границы. Тип: число или строка По умолчанию: авто |
ChartArea.width | Ширина области диаграммы. Тип: число или строка По умолчанию: авто |
chartArea.height | Высота области диаграммы. Тип: число или строка По умолчанию: авто |
диаграмма.подзаголовок | Для диаграмм материалов этот параметр определяет подзаголовок. Только таблицы материалов поддерживают субтитры. Тип: строка По умолчанию: ноль |
название диаграммы | Для диаграмм материалов этот параметр указывает заголовок. Тип: строка По умолчанию: ноль |
цвета | Цвета, используемые для элементов диаграммы. Массив строк, где каждый элемент представляет собой строку цвета HTML, например: Тип: массив строк По умолчанию: цвета по умолчанию |
непрозрачность данных | Прозрачность точек данных, где 1.0 означает полную непрозрачность, а 0.0 — полную прозрачность. В точечных диаграммах, гистограммах, гистограммах и столбцах это относится к видимым данным: точкам в точечной диаграмме и прямоугольникам в остальных. На диаграммах, где при выборе данных создается точка, например, на линейных диаграммах и диаграммах с областями, это относится к кругам, которые появляются при наведении или выборе. Комбинированная диаграмма демонстрирует оба поведения, и этот параметр не влияет на другие диаграммы. (Чтобы изменить непрозрачность линии тренда, см. раздел непрозрачность линии тренда.) Тип: номер По умолчанию: 1,0 |
включитьИнтерактивность | Отправляет ли диаграмма пользовательские события или реагирует на действия пользователя. Если задано значение false, диаграмма не будет выдавать «выбор» или другие события, основанные на взаимодействии (но будет выдавать события готовности или ошибки), и не будет отображать текст при наведении курсора или иным образом изменяться в зависимости от ввода пользователя. Тип: логический По умолчанию: правда |
исследователь | Опция Эта функция является экспериментальной и может измениться в будущих выпусках. Примечание . Проводник работает только с непрерывными осями (такими как числа или даты). Тип: объект По умолчанию: ноль |
explorer.actions | Проводник Google Charts поддерживает три действия:
Тип: массив строк По умолчанию: ['dragToPan', 'rightClickToReset'] |
проводник.ось | По умолчанию пользователи могут перемещаться как по горизонтали, так и по вертикали, когда используется опция Тип: строка По умолчанию: как горизонтальное, так и вертикальное панорамирование |
проводник.keepInBounds | По умолчанию пользователи могут панорамировать все вокруг, независимо от того, где находятся данные. Чтобы пользователи не перемещались за пределы исходной диаграммы, используйте Тип: логический По умолчанию: ложь |
explorer.maxZoomIn | Максимальное увеличение, которое может увеличить проводник. По умолчанию пользователи смогут увеличить масштаб настолько, что будут видеть только 25% исходного изображения. Настройка Тип: номер По умолчанию: 0,25 |
проводник.maxZoomOut | Максимум, что может уменьшить проводник. По умолчанию пользователи смогут уменьшить масштаб настолько, что диаграмма будет занимать только 1/4 доступного пространства. Настройка Тип: номер По умолчанию: 4 |
explorer.zoomDelta | Когда пользователи увеличивают или уменьшают масштаб, Тип: номер По умолчанию: 1,5 |
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.count | Параметр Тип: номер По умолчанию: 1 |
hAxis.minorGridlines.interval | Параметр minorGridlines.interval аналогичен параметру интервала основных линий сетки, но выбранный интервал всегда будет четным делителем интервала основных линий сетки. Интервал по умолчанию для линейных масштабов — Тип: номер По умолчанию: 1 |
hAxis.minorGridlines.minSpacing | Минимальное необходимое пространство в пикселях между соседними второстепенными линиями сетки и между второстепенными и основными линиями сетки. Значение по умолчанию — 1/2 minSpacing основных линий сетки для линейных масштабов и 1/5 minSpacing для логарифмических масштабов. Тип: номер По умолчанию: вычислено |
hAxis.minorGridlines.multiple | То же, что и для основных Тип: номер По умолчанию: 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.мин |
Ignored when Type: number Default: auto |
height | Height of the chart, in pixels. Type: number Default: height of the containing element |
isStacked | If set to true, stacks the elements for all series at each domain value. Note: In Column , Area , and SteppedArea charts, Google Charts reverses the order of legend items to better correspond with the stacking of the series elements (Eg series 0 will be the bottom-most legend item). This does not apply to Bar Charts. The The options for
For 100% stacking, the calculated value for each element will appear in the tooltip after its actual value. The target axis will default to tick values based on the relative 0-1 scale as fractions of 1 for 100% stacking only supports data values of type Type: boolean/string Default: false |
legend | An object with members to configure various aspects of the legend. Чтобы указать свойства этого объекта, вы можете использовать литеральную нотацию объекта, как показано здесь: {position: 'top', textStyle: {color: 'blue', fontSize: 16}} Тип: объект Default: null |
legend.pageIndex | Initial selected zero-based page index of the legend. Тип: номер Default: 0 |
legend.position | Position of the legend. Can be one of the following:
Тип: строка Default: 'right' |
legend.alignment | Alignment of the legend. Can be one of the following:
Start, center, and end are relative to the style -- vertical or horizontal -- of the legend. For example, in a 'right' legend, 'start' and 'end' are at the top and bottom, respectively; for a 'top' legend, 'start' and 'end' would be at the left and right of the area, respectively. The default value depends on the legend's position. For 'bottom' legends, the default is 'center'; other legends default to 'start'. Тип: строка Default: automatic |
legend.textStyle | An object that specifies the legend text style. Объект имеет следующий формат: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } Тип: объект По умолчанию: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} |
orientation | The orientation of the chart. When set to Тип: строка Default: 'horizontal' |
reverseCategories | If set to true, will draw series from right to left. The default is to draw left-to-right. This option is only supported for a Тип: логический По умолчанию: ложь |
series | An array of objects, each describing the format of the corresponding series in the chart. To use default values for a series, specify an empty object {}. If a series or a value is not specified, the global value will be used. Each object supports the following properties:
You can specify either an array of objects, each of which applies to the series in the order given, or you can specify an object where each child has a numeric key indicating which series it applies to. For example, the following two declarations are identical, and declare the first series as black and absent from the legend, and the fourth as red and absent from the legend: series: [ {color: 'black', visibleInLegend: false}, {}, {}, {color: 'red', visibleInLegend: false} ] series: { 0:{color: 'black', visibleInLegend: false}, 3:{color: 'red', visibleInLegend: false} } Type: Array of objects, or object with nested objects Default: {} |
theme | A theme is a set of predefined option values that work together to achieve a specific chart behavior or visual effect. Currently only one theme is available:
Тип: строка По умолчанию: ноль |
title | Text to display above the chart. Тип: строка Default: no title |
titlePosition | Where to place the chart title, compared to the chart area. Supported values:
Тип: строка Default: 'out' |
titleTextStyle | An object that specifies the title text style. Объект имеет следующий формат: { 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 | If set to Note: This only applies to HTML tooltips. If this is enabled with SVG tooltips, any overflow outside of the chart bounds will be cropped. Дополнительные сведения см. в разделе Настройка содержимого всплывающей подсказки . Тип: логический По умолчанию: ложь |
tooltip.isHtml | Если установлено значение true, используйте всплывающие подсказки в формате HTML (а не в формате SVG). Дополнительные сведения см. в разделе Настройка содержимого всплывающей подсказки . Примечание. Настройка содержимого всплывающей подсказки HTML с помощью роли данных столбца всплывающей подсказки не поддерживается визуализацией пузырьковой диаграммы . Тип: логический По умолчанию: ложь |
tooltip.showColorCode | If true, show colored squares next to the series information in the tooltip. The default is true when Тип: логический Default: automatic |
tooltip.textStyle | Объект, определяющий стиль текста всплывающей подсказки. Объект имеет следующий формат: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } Тип: объект По умолчанию: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} |
tooltip.trigger | The user interaction that causes the tooltip to be displayed:
Тип: строка Default: 'focus' |
trendlines | Displays trendlines on the charts that support them. By default, linear trendlines are used, but this can be customized with the Trendlines are specified on a per-series basis, so most of the time your options will look like this: var options = { trendlines: { 0: { type: 'linear', color: 'green', lineWidth: 3, opacity: 0.3, showR2: true, visibleInLegend: true } } } Тип: объект По умолчанию: ноль |
trendlines.n.color | The color of the trendline , expressed as either an English color name or a hex string. Тип: строка Default: default series color |
trendlines.n.degree | For trendlines of Тип: номер Default: 3 |
trendlines.n.labelInLegend | If set, the trendline will appear in the legend as this string. Тип: строка По умолчанию: ноль |
trendlines.n.lineWidth | The line width of the trendline , in pixels. Тип: номер Default: 2 |
trendlines.n.opacity | The transparency of the trendline , from 0.0 (transparent) to 1.0 (opaque). Тип: номер Default: 1.0 |
trendlines.n.pointSize | Trendlines are constucted by stamping a bunch of dots on the chart; this rarely-needed option lets you customize the size of the dots. The trendline's Тип: номер Default: 1 |
trendlines.n.pointsVisible | Trendlines are constucted by stamping a bunch of dots on the chart. The trendline's Тип: логический Default: true |
trendlines.n.showR2 | Whether to show the coefficient of determination in the legend or trendline tooltip. Тип: логический По умолчанию: ложь |
trendlines.n.type | Whether the trendlines is Тип: строка Default: linear |
trendlines.n.visibleInLegend | Whether the trendline equation appears in the legend. (It will appear in the trendline tooltip.) Тип: логический По умолчанию: ложь |
vAxes | Specifies properties for individual vertical axes, if the chart has multiple vertical axes. Each child object is a To specify a chart with multiple vertical axes, first define a new axis using { series: { 2: { targetAxisIndex:1 } }, vAxes: { 1: { title:'Losses', textStyle: {color: 'red'} } } } This property can be either an object or an array: the object is a collection of objects, each with a numeric label that specifies the axis that it defines--this is the format shown above; the array is an array of objects, one per axis. For example, the following array-style notation is identical to the vAxes: [ {}, // Nothing specified for axis 0 { title:'Losses', textStyle: {color: 'red'} // Axis 1 } ] Type: Array of object, or object with child objects По умолчанию: ноль |
vAxis | An object with members to configure various vertical axis elements. Чтобы указать свойства этого объекта, вы можете использовать литеральную нотацию объекта, как показано здесь: {title: 'Hello', titleTextStyle: {color: '#FF0000'}} Тип: объект По умолчанию: ноль |
vAxis.baseline | Тип: номер Default: automatic |
vAxis.baselineColor | Specifies the color of the baseline for the vertical axis. Can be any HTML color string, for example: Тип: номер Default: 'black' |
vAxis.direction | The direction in which the values along the vertical axis grow. By default, low values are on the bottom of the chart. Specify Type: 1 or -1 Default: 1 |
vAxis.format | A format string for numeric axis labels. This is a subset of the ICU pattern set . For instance,
The actual formatting applied to the label is derived from the locale the API has been loaded with. For more details, see loading charts with a specific locale . In computing tick values and gridlines, several alternative combinations of all the relevant gridline options will be considered and alternatives will be rejected if the formatted tick labels would be duplicated or overlap. So you can specify Тип: строка Default: auto |
vAxis.gridlines | An object with members to configure the gridlines on the vertical axis. Note that vertical axis gridlines are drawn horizontally. Чтобы указать свойства этого объекта, вы можете использовать литеральную нотацию объекта, как показано здесь: {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 . Тип: объект По умолчанию: ноль |
vAxis.minorGridlines | An object with members to configure the minor gridlines on the vertical axis, similar to the vAxis.gridlines option. Тип: объект По умолчанию: ноль |
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 . Тип: объект По умолчанию: ноль |
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. Объект имеет следующий формат: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } Тип: объект По умолчанию: {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. Объект имеет следующий формат: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } Тип: объект По умолчанию: {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. Тип: объект По умолчанию: ноль |
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) | Рисует график. The chart accepts further method calls only after the Тип возврата: нет |
getAction(actionID) | Returns the tooltip action object with the requested Тип возвращаемого значения: объект |
getBoundingBox(id) | Возвращает объект, содержащий левый, верхний, ширину и высоту
Значения относятся к контейнеру диаграммы. Вызовите это после того, как диаграмма будет нарисована. Тип возвращаемого значения: объект |
getChartAreaBoundingBox() | Returns an object containing the left, top, width, and height of the chart content (ie, excluding labels and legend):
Значения относятся к контейнеру диаграммы. Вызовите это после того, как диаграмма будет нарисована. Тип возвращаемого значения: объект |
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:
Вызовите это после того, как диаграмма будет нарисована. Тип возвращаемого значения: объект |
getHAxisValue(xPosition, optional_axis_index) | Returns the horizontal data value at Example: Вызовите это после того, как диаграмма будет нарисована. Return Type: number |
getImageURI() | Returns the chart serialized as an image URI. Вызовите это после того, как диаграмма будет нарисована. See Printing PNG Charts . Return Type: string |
getSelection() | Возвращает массив выбранных объектов диаграммы. Доступными для выбора объектами являются столбцы, записи легенды и категории. A bar corresponds 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). Для этой диаграммы в любой момент можно выбрать только один объект. Тип возвращаемого значения: Массив элементов выбора |
getVAxisValue(yPosition, optional_axis_index) | Returns the vertical data value at Example: Вызовите это после того, как диаграмма будет нарисована. Return Type: number |
getXLocation(dataValue, optional_axis_index) | Returns the pixel x-coordinate of Example: Вызовите это после того, как диаграмма будет нарисована. Return Type: number |
getYLocation(dataValue, optional_axis_index) | Returns the pixel y-coordinate of Example: Вызовите это после того, как диаграмма будет нарисована. 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() | Выбирает указанные объекты диаграммы. Отменяет любой предыдущий выбор. Доступными для выбора объектами являются столбцы, записи легенды и категории. A bar corresponds 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). Для этой диаграммы одновременно может быть выбран только один объект. Тип возврата: нет |
clearChart() | Очищает диаграмму и освобождает все выделенные ей ресурсы. Тип возврата: нет |
Events
For more information on how to use these events, see Basic Interactivity , Handling Events , and Firing Events .
Имя | |
---|---|
animationfinish | Fired when transition animation is complete. Properties: none |
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. 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. Properties: row, column |
ready | Диаграмма готова к вызову внешних методов. If you want to interact with the chart, and call methods after you draw it, you should set up a listener for this event before you call the Properties: none |
select | Fired when the user clicks a visual entity. To learn what has been selected, call Свойства: нет |
Data policy
All code and data are processed and rendered in the browser. No data is sent to any server.