Обзор
Гистограммы Google отображаются в браузере с использованием 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"> 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.BarChart(document.getElementById("barchart_values")); chart.draw(view, options); } </script> <div id="barchart_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}, hAxis: {minValue: 0} };
var options_fullStacked = { isStacked: 'percent', height: 300, legend: {position: 'top', maxLines: 3}, hAxis: { minValue: 0, ticks: [0, .3, .6, .9, 1] } };
Создание гистограмм материалов
В 2014 году компания Google объявила о руководящих принципах, направленных на поддержку единого внешнего вида своих свойств и приложений (например, приложений для Android), работающих на платформах Google. Мы называем эту работу Material Design . Мы будем предоставлять «Материальные» версии всех наших основных диаграмм; вы можете использовать их, если вам нравится, как они выглядят.
Создание гистограммы материала похоже на создание того, что мы сейчас назовем «классической» гистограммой. Вы загружаете Google Visualization API (хотя и с пакетом 'bar'
вместо пакета 'corechart'
), определяете свои данные, а затем создаете объект (но класса google.charts.Bar
вместо google.visualization.BarChart
).
Примечание. Диаграммы материалов не будут работать в старых версиях 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', }, bars: 'horizontal' // Required for Material Bar Charts. }; var chart = new google.charts.Bar(document.getElementById('barchart_material')); chart.draw(data, google.charts.Bar.convertOptions(options)); } </script> </head> <body> <div id="barchart_material" style="width: 900px; 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-X
Примечание. Оси Dual-X доступны только для диаграмм материалов (т. е. с bar
упаковки).
Иногда вам может понадобиться отобразить два ряда на гистограмме с двумя независимыми осями x: верхняя ось для одного ряда и нижняя ось для другого:
Обратите внимание, что две наши оси X не только помечены по-разному («парсекы» в сравнении с «кажущейся величиной»), но каждая из них имеет свои собственные независимые масштабы и линии сетки. Если вы хотите настроить это поведение, используйте параметры hAxis.gridlines
.
В приведенном ниже коде параметры axes
и series
вместе определяют внешний вид диаграммы с двумя X. Параметр series
указывает, какую ось использовать для каждого ( 'distance'
и 'brightness'
; они не должны иметь никакого отношения к именам столбцов в таблице данных). Затем опция axes
делает эту диаграмму двойной диаграммой X, помещая ось 'apparent magnitude'
вверху, а ось 'parsecs'
внизу.
<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([ ['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 options = { width: 800, chart: { title: 'Nearby galaxies', subtitle: 'distance on the left, brightness on the right' }, bars: 'horizontal', // Required for Material Bar Charts. series: { 0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'. 1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'. }, axes: { x: { distance: {label: 'parsecs'}, // Bottom x-axis. brightness: {side: 'top', label: 'apparent magnitude'} // Top x-axis. } } }; var chart = new google.charts.Bar(document.getElementById('dual_x_div')); chart.draw(data, options); }; </script> </head> <body> <div id="dual_x_div" style="width: 900px; 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([ ['Opening 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 = { title: 'Chess opening moves', width: 900, legend: { position: 'none' }, chart: { title: 'Chess opening moves', subtitle: 'popularity by percentage' }, bars: 'horizontal', // Required for Material Bar Charts. axes: { x: { 0: { side: 'top', label: 'Percentage'} // Top x-axis. } }, bar: { groupWidth: "90%" } }; var chart = new google.charts.Bar(document.getElementById('top_x_div')); chart.draw(data, options); }; </script> </head> <body> <div id="top_x_div" style="width: 900px; height: 500px;"></div> </body> </html>
Загрузка
Имя пакета google.charts.load
— "corechart"
. Имя класса визуализации — google.visualization.BarChart
.
google.charts.load("current", {packages: ["corechart"]});
var visualization = new google.visualization.BarChart(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 | В линейчатых и столбчатых диаграммах, если установлено значение Тип: логический По умолчанию: ложь |
аннотации.датум | Для диаграмм, поддерживающих аннотации , объект 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; стиль "точка". |
аннотации.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 } } } }; В настоящее время этот параметр поддерживается для диаграмм с областями, гистограмм, столбцов, комбинированных, линейных и точечных диаграмм. Аннотационной диаграммой это не поддерживается. Тип: объект По умолчанию: ноль |
аннотации.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-фреймах.) Тип: логический По умолчанию: ложь |
оси | Указывает свойства для отдельных горизонтальных осей, если диаграмма имеет несколько горизонтальных осей. Каждый дочерний объект является объектом Чтобы задать диаграмму с несколькими горизонтальными осями, сначала определите новую ось с помощью Это свойство может быть либо объектом, либо массивом: объект представляет собой набор объектов, каждый из которых имеет числовую метку, указывающую определяемую им ось — это формат, показанный выше; массив представляет собой массив объектов, по одному на ось. Например, следующая нотация в стиле массива идентична показанному выше объекту hAxes: { {}, // Nothing specified for axis 0 { title:'Losses', textStyle: { color: 'red' } } // Axis 1 Тип: массив объектов или объект с дочерними объектами. По умолчанию: ноль |
hось | Объект с членами для настройки различных элементов горизонтальной оси. Чтобы указать свойства этого объекта, вы можете использовать литеральную нотацию объекта, как показано здесь: { title: 'Hello', titleTextStyle: { color: '#FF0000' } } Тип: объект По умолчанию: ноль |
hAxis.baseline | Базовая линия для горизонтальной оси. Тип: номер По умолчанию: автоматически |
hAxis.baselineColor | Цвет базовой линии горизонтальной оси. Может быть любой строкой цвета HTML, например: Тип: номер По умолчанию: «черный» |
hAxis.direction | Направление, в котором растут значения по горизонтальной оси. Укажите Тип: 1 или -1 По умолчанию: 1 |
hAxis.format | Строка формата для меток числовых осей. Это подмножество набора шаблонов ICU . Например,
Фактическое форматирование, применяемое к метке, зависит от языкового стандарта, с которым был загружен API. Дополнительные сведения см. в разделе Загрузка диаграмм с определенной локалью . При вычислении значений делений и линий сетки будут рассмотрены несколько альтернативных комбинаций всех соответствующих параметров линий сетки, и альтернативы будут отклонены, если отформатированные метки делений будут дублироваться или перекрываться. Таким образом, вы можете указать Тип: строка По умолчанию: авто |
hAxis.gridlines | Объект со свойствами для настройки линий сетки на горизонтальной оси. Обратите внимание, что линии сетки горизонтальной оси рисуются вертикально. Чтобы указать свойства этого объекта, вы можете использовать литеральную нотацию объекта, как показано здесь: {color: '#333', minSpacing: 20} Тип: объект По умолчанию: ноль |
hAxis.gridlines.color | Цвет горизонтальных линий сетки внутри области диаграммы. Укажите допустимую строку цвета HTML. Тип: строка По умолчанию: '#CCC' |
hAxis.gridlines.count | Приблизительное количество горизонтальных линий сетки внутри области диаграммы. Если вы укажете положительное число для Тип: номер По умолчанию: -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.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.textStyle | Объект, определяющий стиль текста по горизонтальной оси. Объект имеет следующий формат: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } Тип: объект По умолчанию: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} |
hAxis.textPosition | Положение текста по горизонтальной оси относительно области диаграммы. Поддерживаемые значения: 'out', 'in', 'none'. Тип: строка По умолчанию: «вне» |
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.maxValue | Перемещает максимальное значение горизонтальной оси на указанное значение; это будет вправо в большинстве графиков. Игнорируется, если установлено значение, меньшее, чем максимальное значение x данных. Тип: номер По умолчанию: автоматически |
hAxis.minValue | Перемещает минимальное значение горизонтальной оси на указанное значение; это будет слева на большинстве диаграмм. Игнорируется, если установлено значение, превышающее минимальное значение x данных. Тип: номер По умолчанию: автоматически |
hAxis.viewWindowMode | Указывает, как масштабировать горизонтальную ось для отображения значений в области диаграммы. Поддерживаются следующие строковые значения:
Тип: строка По умолчанию: Эквивалентно «красивому», но haxis.viewWindow.min и haxis.viewWindow.max имеют приоритет, если они используются. |
hAxis.viewWindow | Указывает диапазон обрезки по горизонтальной оси. Тип: объект По умолчанию: ноль |
hAxis.viewWindow.max | Максимальное значение горизонтальных данных для визуализации. Игнорируется, когда Тип: номер По умолчанию: авто |
hAxis.viewWindow.мин | Минимальное значение горизонтальных данных для отображения. Игнорируется, когда Тип: номер По умолчанию: авто |
высота | Высота диаграммы в пикселях. Тип: номер По умолчанию: высота содержащего элемента |
isStacked | Если установлено значение true, элементы для всех рядов складываются в стопки для каждого значения домена. Примечание. В диаграммах Column , Area и SteppedArea Google Charts меняет порядок элементов легенды на противоположный, чтобы лучше соответствовать расположению элементов серии (например, серия 0 будет самым нижним элементом легенды). Это не относится к линейчатым диаграммам. Параметр Варианты
При 100%-ном стекинге расчетное значение для каждого элемента будет отображаться в подсказке после фактического значения. Целевая ось будет по умолчанию использовать значения деления на основе относительной шкалы 0-1 как доли от 1 для Наложение 100% поддерживает только значения данных типа Тип: логический/строковый По умолчанию: ложь |
легенда | Объект с членами для настройки различных аспектов легенды. Чтобы указать свойства этого объекта, вы можете использовать литеральную нотацию объекта, как показано здесь: {position: 'top', textStyle: {color: 'blue', fontSize: 16}} Тип: объект По умолчанию: ноль |
legend.pageIndex | Начальный выбранный нулевой индекс страницы легенды. Тип: номер По умолчанию: 0 |
легенда.позиция | Положение легенды. Может быть одним из следующих:
Тип: строка По умолчанию: «право» |
легенда.выравнивание | Выравнивание легенды. Может быть одним из следующих:
Начало, центр и конец относятся к стилю — вертикальному или горизонтальному — легенды. Например, в «правильной» легенде «начало» и «конец» находятся вверху и внизу соответственно; для «верхней» легенды «начало» и «конец» будут слева и справа от области соответственно. Значение по умолчанию зависит от положения легенды. Для «нижних» легенд по умолчанию используется «центр»; другие легенды по умолчанию имеют значение «начало». Тип: строка По умолчанию: автоматически |
легенда.textStyle | Объект, определяющий стиль текста легенды. Объект имеет следующий формат: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } Тип: объект По умолчанию: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} |
реверсКатегории | Если установлено значение true, серия будет отображаться снизу вверх. По умолчанию рисуется сверху вниз. Тип: логический По умолчанию: ложь |
ориентация | Ориентация диаграммы. При значении Тип: строка По умолчанию: «горизонтальный» |
серии | Массив объектов, каждый из которых описывает формат соответствующего ряда на диаграмме. Чтобы использовать для серии значения по умолчанию, укажите пустой объект {}. Если серия или значение не указаны, будет использоваться глобальное значение. Каждый объект поддерживает следующие свойства:
Вы можете указать либо массив объектов, каждый из которых применяется к серии в указанном порядке, либо вы можете указать объект, в котором каждый дочерний элемент имеет числовой ключ, указывающий, к какой серии он относится. Например, следующие два объявления идентичны и объявляют первую серию черной и отсутствующей в легенде, а четвертую - красной и отсутствующей в легенде: series: [ {color: 'black', visibleInLegend: false}, {}, {}, {color: 'red', visibleInLegend: false} ] series: { 0:{color: 'black', visibleInLegend: false}, 3:{color: 'red', visibleInLegend: false} } Тип: массив объектов или объект с вложенными объектами. По умолчанию: {} |
тема | Тема — это набор предопределенных значений параметров, которые работают вместе для достижения определенного поведения диаграммы или визуального эффекта. На данный момент доступна только одна тема:
Тип: строка По умолчанию: ноль |
заглавие | Текст для отображения над диаграммой. Тип: строка По умолчанию: без заголовка |
titlePosition | Где разместить заголовок диаграммы по сравнению с областью диаграммы. Поддерживаемые значения:
Тип: строка По умолчанию: «вне» |
titleTextStyle | Объект, определяющий стиль текста заголовка. Объект имеет следующий формат: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } Тип: объект По умолчанию: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} |
подсказка | Объект с членами для настройки различных элементов всплывающей подсказки. Чтобы указать свойства этого объекта, вы можете использовать литеральную нотацию объекта, как показано здесь: {textStyle: {color: '#FF0000'}, showColorCode: true} Тип: объект По умолчанию: ноль |
tooltip.ignoreBounds | Если установлено значение Примечание. Это относится только к всплывающим подсказкам в формате HTML. Если это включено с помощью всплывающих подсказок SVG, любое переполнение за пределами границ диаграммы будет обрезано. Дополнительные сведения см. в разделе Настройка содержимого всплывающей подсказки . Тип: логический По умолчанию: ложь |
tooltip.isHtml | Если установлено значение true, используйте всплывающие подсказки в формате HTML (а не в формате SVG). Дополнительные сведения см. в разделе Настройка содержимого всплывающей подсказки . Примечание. Настройка содержимого всплывающей подсказки HTML с помощью роли данных столбца всплывающей подсказки не поддерживается визуализацией пузырьковой диаграммы . Тип: логический По умолчанию: ложь |
tooltip.showColorCode | Если это правда, показывать цветные квадраты рядом с информацией о серии во всплывающей подсказке. Значение по умолчанию — true, если Тип: логический По умолчанию: автоматически |
tooltip.textStyle | Объект, определяющий стиль текста всплывающей подсказки. Объект имеет следующий формат: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } Тип: объект По умолчанию: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} |
всплывающая подсказка.триггер | Взаимодействие с пользователем, вызывающее отображение всплывающей подсказки:
Тип: строка По умолчанию: «фокус». |
линии тренда | Отображает линии тренда на диаграммах, которые их поддерживают. По умолчанию используются линейные линии тренда, но это можно настроить с помощью Линии тренда указываются для каждой серии, поэтому в большинстве случаев ваши параметры будут выглядеть так: 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.непрозрачность | Прозрачность линии тренда от 0,0 (прозрачная) до 1,0 (непрозрачная). Тип: номер По умолчанию: 1,0 |
Trendlines.n.pointSize | Линии тренда строятся путем нанесения на график множества точек; эта редко необходимая опция позволяет настроить размер точек. Параметр Тип: номер По умолчанию: 1 |
Trendlines.n.pointsВидимый | Линии тренда строятся путем нанесения на график множества точек. Параметр Тип: логический По умолчанию: правда |
линии тренда.n.showR2 | Показывать ли коэффициент детерминации в легенде или во всплывающей подсказке линии тренда. Тип: логический По умолчанию: ложь |
линии тренда.n.тип | Является ли линия тренда Тип: строка По умолчанию: линейный |
Trendlines.n.visibleInLegend | Появляется ли уравнение линии тренда в легенде. (Он появится во всплывающей подсказке линии тренда.) Тип: логический По умолчанию: ложь |
vось | Объект с членами для настройки различных элементов вертикальной оси. Чтобы указать свойства этого объекта, вы можете использовать литеральную нотацию объекта, как показано здесь: {title: 'Hello', titleTextStyle: {color: '#FF0000'}} Тип: объект По умолчанию: ноль |
vAxis.baseline | Этот параметр поддерживается только для Тип: номер По умолчанию: автоматически |
vAxis.baselineColor | Указывает цвет базовой линии для вертикальной оси. Может быть любой строкой цвета HTML, например: Этот параметр поддерживается только для Тип: номер По умолчанию: «черный» |
vAxis.direction | Направление, в котором растут значения по вертикальной оси. По умолчанию низкие значения находятся внизу диаграммы. Укажите Тип: 1 или -1 По умолчанию: 1 |
vAxis.format | Строка формата для числовых меток или меток оси дат. Для меток числовой оси это подмножество набора шаблонов десятичного форматирования ICU . Например,
Для меток оси дат это подмножество набора шаблонов форматирования даты ICU . Например, Фактическое форматирование, применяемое к метке, зависит от языкового стандарта, с которым был загружен API. Дополнительные сведения см. в разделе Загрузка диаграмм с определенной локалью . При вычислении значений делений и линий сетки будут рассмотрены несколько альтернативных комбинаций всех соответствующих параметров линий сетки, и альтернативы будут отклонены, если отформатированные метки делений будут дублироваться или перекрываться. Таким образом, вы можете указать Этот параметр поддерживается только для Тип: строка По умолчанию: авто |
vAxis.gridlines | Объект с элементами для настройки линий сетки по вертикальной оси. Обратите внимание, что линии сетки вертикальной оси рисуются горизонтально. Чтобы указать свойства этого объекта, вы можете использовать литеральную нотацию объекта, как показано здесь: {color: '#333', minSpacing: 20} Этот параметр поддерживается только для Тип: объект По умолчанию: ноль |
vAxis.gridlines.color | Цвет вертикальных линий сетки внутри области диаграммы. Укажите допустимую строку цвета HTML. Тип: строка По умолчанию: '#CCC' |
vAxis.gridlines.count | Приблизительное количество горизонтальных линий сетки внутри области диаграммы. Если вы укажете положительное число для Тип: номер По умолчанию: -1 |
vAxis.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*/]} } } Дополнительную информацию можно найти в разделе «Даты и время» . Тип: объект По умолчанию: ноль |
vAxis.minorGridlines | Объект с членами для настройки второстепенных линий сетки на вертикальной оси, аналогичный параметру vAxis.gridlines. Этот параметр поддерживается только для Тип: объект По умолчанию: ноль |
vAxis.minorGridlines.color | Цвет вертикальных второстепенных линий сетки внутри области диаграммы. Укажите допустимую строку цвета HTML. Тип: строка По умолчанию: сочетание цветов сетки и фона. |
vAxis.minorGridlines.count | Параметр minorGridlines.count в основном устарел, за исключением отключения второстепенных линий сетки путем установки счетчика на 0. Количество второстепенных линий сетки зависит от интервала между основными линиями сетки (см. vAxis.gridlines.interval) и минимально необходимого пространства (см. vAxis. minorGridlines.minSpacing). Тип: номер По умолчанию: 1 |
vAxis.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*/]}, } } Дополнительную информацию можно найти в разделе «Даты и время» . Тип: объект По умолчанию: ноль |
vAxis.logScale | Если true, вертикальная ось отображается в логарифмическом масштабе. Примечание. Все значения должны быть положительными. Этот параметр поддерживается только для Тип: логический По умолчанию: ложь |
vAxis.scaleType |
Тип: строка По умолчанию: ноль |
vAxis.textPosition | Положение текста по вертикальной оси относительно области диаграммы. Поддерживаемые значения: 'out', 'in', 'none'. Тип: строка По умолчанию: «вне» |
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 будет автоматически расширен, чтобы включить минимальные и максимальные отметки, если вы не укажете Примеры:
Этот параметр поддерживается только для Тип: Массив элементов По умолчанию: авто |
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 | Указывает, как масштабировать вертикальную ось для отображения значений в области диаграммы. Поддерживаются следующие строковые значения:
Этот параметр поддерживается только для Тип: строка По умолчанию: Эквивалентно «красивому», но vaxis.viewWindow.min и vaxis.viewWindow.max имеют приоритет, если они используются. |
vAxis.viewWindow | Указывает диапазон обрезки по вертикальной оси. Тип: объект По умолчанию: ноль |
vAxis.viewWindow.max |
Игнорируется, когда Тип: номер По умолчанию: авто |
vAxis.viewWindow.мин |
Игнорируется, когда Тип: номер По умолчанию: авто |
ширина | Ширина диаграммы в пикселях. Тип: номер По умолчанию: ширина содержащего элемента |
Методы
Метод | |
---|---|
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() | Выбирает указанные объекты диаграммы. Отменяет любой предыдущий выбор. Доступными для выбора объектами являются столбцы, записи легенды и категории. Для этой диаграммы одновременно может быть выбран только один объект. Тип возврата: нет |
clearChart() | Очищает диаграмму и освобождает все выделенные ей ресурсы. Тип возврата: нет |
События
Дополнительные сведения о том, как использовать эти события, см. в разделах Базовая интерактивность , Обработка событий и Активация событий .
Имя | |
---|---|
animationfinish | Запускается, когда анимация перехода завершена. Свойства: нет |
click | Запускается, когда пользователь щелкает внутри диаграммы. Может использоваться для определения момента щелчка по заголовку, элементам данных, записям легенды, осям, линиям сетки или меткам. Свойства: targetID |
error | Запускается, когда возникает ошибка при попытке отобразить диаграмму. Свойства: идентификатор, сообщение |
legendpagination | Запускается, когда пользователь нажимает стрелки пагинации легенды. Возвращает индекс страниц текущей легенды, отсчитываемый от нуля, и общее количество страниц. Свойства: currentPageIndex, totalPages |
onmouseover | Запускается, когда пользователь наводит курсор мыши на визуальный объект. Возвращает обратно индексы строк и столбцов соответствующего элемента таблицы данных. Гистограмма соотносится с ячейкой в таблице данных, запись легенды — со столбцом (индекс строки равен нулю), а категория — со строкой (индекс столбца равен нулю). Свойства: строка, столбец |
onmouseout | Запускается, когда пользователь уводит мышь от визуального объекта. Возвращает обратно индексы строк и столбцов соответствующего элемента таблицы данных. Гистограмма соотносится с ячейкой в таблице данных, запись легенды — со столбцом (индекс строки равен нулю), а категория — со строкой (индекс столбца равен нулю). Свойства: строка, столбец |
ready | Диаграмма готова к вызову внешних методов. Если вы хотите взаимодействовать с диаграммой и вызывать методы после ее рисования, вы должны настроить прослушиватель для этого события до вызова метода Свойства: нет |
select | Запускается, когда пользователь щелкает визуальный объект. Чтобы узнать, что было выбрано, вызовите Свойства: нет |
Политика данных
Весь код и данные обрабатываются и отображаются в браузере. Никакие данные не отправляются ни на один сервер.