Построитель линейных графиков. Более подробную информацию можно найти в документации Google Charts .
Вот пример, показывающий, как построить линейный график. Данные импортируются из электронной таблицы Google .
// Get sample data from a spreadsheet. const dataSourceUrl = 'https://docs.google.com/spreadsheet/tq?range=A1%3AG5' + '&key=0Aq4s9w_HxMs7dHpfX05JdmVSb1FpT21sbXd4NVE3UEE&gid=2&headers=-1'; const chartBuilder = Charts.newLineChart() .setTitle('Yearly Rainfall') .setXAxisTitle('Month') .setYAxisTitle('Rainfall (in)') .setDimensions(600, 500) .setCurveStyle(Charts.CurveStyle.SMOOTH) .setPointStyle(Charts.PointStyle.MEDIUM) .setDataSourceUrl(dataSourceUrl); const chart = chartBuilder.build();
Методы
Метод | Тип возврата | Краткое описание |
---|---|---|
build() | Chart | Строит диаграмму. |
reverse Categories() | Line Chart Builder | Отменяет отрисовку рядов на оси домена. |
set Background Color(cssValue) | Line Chart Builder | Устанавливает цвет фона диаграммы. |
set Colors(cssValues) | Line Chart Builder | Устанавливает цвета линий на диаграмме. |
set Curve Style(style) | Line Chart Builder | Устанавливает стиль, используемый для кривых на диаграмме. |
set Data Source Url(url) | Line Chart Builder | Устанавливает URL-адрес источника данных, который используется для получения данных из внешнего источника, например Google Таблиц. |
set Data Table(tableBuilder) | Line Chart Builder | Устанавливает таблицу данных, которая будет использоваться для диаграммы, с помощью DataTableBuilder. |
set Data Table(table) | Line Chart Builder | Устанавливает таблицу данных, содержащую линии диаграммы, а также метки оси X. |
set Data View Definition(dataViewDefinition) | Line Chart Builder | Задает определение представления данных, которое будет использоваться для диаграммы. |
set Dimensions(width, height) | Line Chart Builder | Устанавливает размеры диаграммы. |
set Legend Position(position) | Line Chart Builder | Устанавливает положение легенды относительно диаграммы. |
set Legend Text Style(textStyle) | Line Chart Builder | Задает стиль текста легенды диаграммы. |
set Option(option, value) | Line Chart Builder | Устанавливает дополнительные параметры для этой диаграммы. |
set Point Style(style) | Line Chart Builder | Устанавливает стиль точек на линии. |
set Range(start, end) | Line Chart Builder | Устанавливает диапазон диаграммы. |
set Title(chartTitle) | Line Chart Builder | Устанавливает заголовок диаграммы. |
set Title Text Style(textStyle) | Line Chart Builder | Устанавливает текстовый стиль заголовка диаграммы. |
set XAxis Text Style(textStyle) | Line Chart Builder | Устанавливает стиль текста по горизонтальной оси. |
set XAxis Title(title) | Line Chart Builder | Добавляет заголовок на горизонтальную ось. |
set XAxis Title Text Style(textStyle) | Line Chart Builder | Устанавливает стиль текста заголовка по горизонтальной оси. |
set YAxis Text Style(textStyle) | Line Chart Builder | Устанавливает стиль текста по вертикальной оси. |
set YAxis Title(title) | Line Chart Builder | Добавляет заголовок к вертикальной оси. |
set YAxis Title Text Style(textStyle) | Line Chart Builder | Устанавливает стиль текста заголовка вертикальной оси. |
use Log Scale() | Line Chart Builder | Преобразует ось диапазона в логарифмическую шкалу (требуется, чтобы все значения были положительными). |
Подробная документация
build()
Строит диаграмму.
Возвращаться
Chart
— объект Chart, который можно внедрить в документы, элементы пользовательского интерфейса или использовать в качестве статического изображения.
reverse Categories()
Отменяет отрисовку рядов на оси домена. Для диаграмм с вертикальным диапазоном (например, линейных, площадных или столбчатых диаграмм) это означает, что горизонтальная ось рисуется справа налево. Для диаграмм с горизонтальным диапазоном (например, гистограмм) это означает, что вертикальная ось рисуется сверху вниз. Для круговых диаграмм это означает, что срезы рисуются против часовой стрелки.
// Creates a pie chart builder and sets drawing of the slices in a // counter-clockwise manner. const builder = Charts.newPieChart(); builder.reverseCategories();
Возвращаться
Line Chart Builder
— этот построитель полезен для создания цепочек.
set Background Color(cssValue)
Устанавливает цвет фона диаграммы.
// Creates a line chart builder and sets the background color to gray const builder = Charts.newLineChart(); builder.setBackgroundColor('gray');
Параметры
Имя | Тип | Описание |
---|---|---|
css Value | String | Значение CSS для цвета (например, "blue" или "#00f" ). |
Возвращаться
Line Chart Builder
— этот построитель полезен для создания цепочек.
set Colors(cssValues)
Устанавливает цвета линий на диаграмме.
// Creates a line chart builder and sets the first two lines to be drawn in // green and red, respectively. const builder = Charts.newLineChart(); builder.setColors(['green', 'red']);
Параметры
Имя | Тип | Описание |
---|---|---|
css Values | String[] | Массив значений CSS цвета, например ["red", "#acf"] . N-й элемент массива представляет цвет n-й линии диаграммы. |
Возвращаться
Line Chart Builder
— этот построитель полезен для создания цепочек.
set Curve Style(style)
Устанавливает стиль, используемый для кривых на диаграмме. См. Curve Style
для получения информации о разрешенных стилях кривой.
// Creates a line chart builder and curves the lines in the chart. const builder = Charts.newLineChart(); builder.setCurveStyle(Charts.CurveStyle.SMOOTH);
Параметры
Имя | Тип | Описание |
---|---|---|
style | Curve Style | Стиль кривых на диаграмме. |
Возвращаться
Line Chart Builder
— этот построитель полезен для создания цепочек.
См. также
set Data Source Url(url)
Устанавливает URL-адрес источника данных, который используется для получения данных из внешнего источника, например Google Таблиц. Если указаны URL-адрес источника данных и DataTable, URL-адрес источника данных игнорируется.
Дополнительную информацию о запросах к источникам данных см. в документации Google Charts .
Параметры
Имя | Тип | Описание |
---|---|---|
url | String | URL-адрес источника данных, включая все параметры запроса. |
Возвращаться
Line Chart Builder
— этот построитель полезен для создания цепочек.
set Data Table(tableBuilder)
Устанавливает таблицу данных, которая будет использоваться для диаграммы, с помощью DataTableBuilder. Это удобный метод настройки таблицы данных без необходимости вызова build()
.
Параметры
Имя | Тип | Описание |
---|---|---|
table Builder | Data Table Builder | Построитель таблиц данных. Новая таблица данных создается мгновенно в рамках этого вызова, поэтому любые дальнейшие обновления построителя не будут отражены на диаграмме. |
Возвращаться
Line Chart Builder
— этот построитель полезен для создания цепочек.
set Data Table(table)
Устанавливает таблицу данных, содержащую линии диаграммы, а также метки оси X. Первый столбец должен представлять собой строку и содержать метки по горизонтальной оси. Следовать может любое количество столбцов, все они должны быть числовыми. Каждый столбец отображается как отдельная строка.
Параметры
Имя | Тип | Описание |
---|---|---|
table | Data Table Source | Таблица данных, которая будет использоваться для диаграммы. |
Возвращаться
Line Chart Builder
— этот построитель полезен для создания цепочек.
set Data View Definition(dataViewDefinition)
Задает определение представления данных, которое будет использоваться для диаграммы.
Параметры
Имя | Тип | Описание |
---|---|---|
data View Definition | Data View Definition | Объект определения представления данных, определяющий представление, которое должно быть получено из данного источника данных для рисунка диаграммы. |
Возвращаться
Line Chart Builder
— этот построитель полезен для создания цепочек.
set Dimensions(width, height)
Устанавливает размеры диаграммы.
Параметры
Имя | Тип | Описание |
---|---|---|
width | Integer | Ширина диаграммы в пикселях. |
height | Integer | Высота диаграммы в пикселях. |
Возвращаться
Line Chart Builder
— этот построитель полезен для создания цепочек.
set Legend Position(position)
Устанавливает положение легенды относительно диаграммы. По умолчанию легенда отсутствует.
// Creates a line chart builder and sets the legend position to right. const builder = Charts.newLineChart(); builder.setLegendPosition(Charts.Position.RIGHT);
Параметры
Имя | Тип | Описание |
---|---|---|
position | Position | Позиция легенды. |
Возвращаться
Line Chart Builder
— этот построитель полезен для создания цепочек.
set Legend Text Style(textStyle)
Задает стиль текста легенды диаграммы.
// Creates a line chart builder and sets it up for a blue, 26-point legend. const textStyleBuilder = Charts.newTextStyle().setColor('#0000FF').setFontSize(26); const style = textStyleBuilder.build(); const builder = Charts.newLineChart(); builder.setLegendTextStyle(style);
Параметры
Имя | Тип | Описание |
---|---|---|
text Style | Text Style | Стиль текста, используемый для легенды диаграммы. |
Возвращаться
Line Chart Builder
— этот построитель полезен для создания цепочек.
set Option(option, value)
Устанавливает дополнительные параметры для этой диаграммы. См . доступные параметры для этой диаграммы . Этот метод не имеет эффекта, если данная опция недействительна.
// Build a line chart with a 1-second animation duration. const builder = Charts.newLineChart(); builder.setOption('animation.duration', 1000); const chart = builder.build();
Параметры
Имя | Тип | Описание |
---|---|---|
option | String | Возможность установки. |
value | Object | Значение, которое необходимо установить. |
Возвращаться
Line Chart Builder
— этот построитель полезен для создания цепочек.
set Point Style(style)
Устанавливает стиль точек на линии. По умолчанию точки не имеют определенных стилей, видна только линия.
// Creates a line chart builder and sets large point style. const builder = Charts.newLineChart(); builder.setPointStyle(Charts.PointStyle.LARGE);
Параметры
Имя | Тип | Описание |
---|---|---|
style | Point Style | Стиль, используемый для точек на линии. |
Возвращаться
Line Chart Builder
— этот построитель полезен для создания цепочек.
См. также
set Range(start, end)
Устанавливает диапазон диаграммы.
Если какие-либо точки данных выходят за пределы диапазона, диапазон расширяется и включает в себя эти точки данных.
Параметры
Имя | Тип | Описание |
---|---|---|
start | Number | Значение самой нижней линии сетки оси диапазона. |
end | Number | Значение самой высокой линии сетки оси диапазона. |
Возвращаться
Line Chart Builder
— этот построитель полезен для создания цепочек.
set Title(chartTitle)
Устанавливает заголовок диаграммы. Заголовок отображается по центру над диаграммой.
// Creates a line chart builder and title to 'My Line Chart'. const builder = Charts.newLineChart(); builder.setTitle('My Line Chart');
Параметры
Имя | Тип | Описание |
---|---|---|
chart Title | String | название диаграммы. |
Возвращаться
Line Chart Builder
— этот построитель полезен для создания цепочек.
set Title Text Style(textStyle)
Устанавливает текстовый стиль заголовка диаграммы.
// Creates a line chart builder and sets it up for a blue, 26-point title. const textStyleBuilder = Charts.newTextStyle().setColor('#0000FF').setFontSize(26); const style = textStyleBuilder.build(); const builder = Charts.newLineChart(); builder.setTitleTextStyle(style);
Параметры
Имя | Тип | Описание |
---|---|---|
text Style | Text Style | Стиль текста, используемый для заголовка диаграммы. Вы можете создать объект Text Style Builder , вызвав Charts.newTextStyle() . |
Возвращаться
Line Chart Builder
— этот построитель полезен для создания цепочек.
set XAxis Text Style(textStyle)
Устанавливает стиль текста по горизонтальной оси.
// Creates a line chart builder and sets the X-axis text style to blue, 18-point // font. const textStyle = Charts.newTextStyle().setColor('blue').setFontSize(18).build(); const builder = Charts.newLineChart(); builder.setXAxisTextStyle(textStyle);
Параметры
Имя | Тип | Описание |
---|---|---|
text Style | Text Style | Стиль текста, используемый для заголовка горизонтальной оси. Вы можете создать объект Text Style Builder , вызвав Charts.newTextStyle() . |
Возвращаться
Line Chart Builder
— этот построитель полезен для создания цепочек.
set XAxis Title(title)
Добавляет заголовок на горизонтальную ось. Заголовок центрируется и отображается под метками значений осей.
// Creates a line chart builder and sets the X-axis title. const builder = Charts.newLineChart(); builder.setTitle('X-axis Title');
Параметры
Имя | Тип | Описание |
---|---|---|
title | String | Название оси X. |
Возвращаться
Line Chart Builder
— этот построитель полезен для создания цепочек.
set XAxis Title Text Style(textStyle)
Устанавливает стиль текста заголовка по горизонтальной оси.
// Creates a line chart builder and sets the X-axis title text style to blue, // 18-point font. const textStyle = Charts.newTextStyle().setColor('blue').setFontSize(18).build(); const builder = Charts.newLineChart(); builder.setXAxisTitleTextStyle(textStyle);
Параметры
Имя | Тип | Описание |
---|---|---|
text Style | Text Style | Стиль текста, используемый для заголовка горизонтальной оси. Вы можете создать объект Text Style Builder , вызвав Charts.newTextStyle() . |
Возвращаться
Line Chart Builder
— этот построитель полезен для создания цепочек.
set YAxis Text Style(textStyle)
Устанавливает стиль текста по вертикальной оси.
// Creates a line chart builder and sets the Y-axis text style to blue, 18-point // font. const textStyle = Charts.newTextStyle().setColor('blue').setFontSize(18).build(); const builder = Charts.newLineChart(); builder.setYAxisTextStyle(textStyle);
Параметры
Имя | Тип | Описание |
---|---|---|
text Style | Text Style | Стиль текста, используемый для заголовка горизонтальной оси. Вы можете создать объект Text Style Builder , вызвав Charts.newTextStyle() . |
Возвращаться
Line Chart Builder
— этот построитель полезен для создания цепочек.
set YAxis Title(title)
Добавляет заголовок к вертикальной оси. Заголовок центрируется и отображается слева от меток значений.
// Creates a line chart builder and sets the Y-axis title. const builder = Charts.newLineChart(); builder.setYAxisTitle('Y-axis Title');
Параметры
Имя | Тип | Описание |
---|---|---|
title | String | Название оси Y. |
Возвращаться
Line Chart Builder
— этот построитель полезен для создания цепочек.
set YAxis Title Text Style(textStyle)
Устанавливает стиль текста заголовка вертикальной оси.
// Creates a line chart builder and sets the Y-axis title text style to blue, // 18-point font. const textStyle = Charts.newTextStyle().setColor('blue').setFontSize(18).build(); const builder = Charts.newLineChart(); builder.setYAxisTitleTextStyle(textStyle);
Параметры
Имя | Тип | Описание |
---|---|---|
text Style | Text Style | Стиль текста, используемый для заголовка горизонтальной оси. Вы можете создать объект Text Style Builder , вызвав Charts.newTextStyle() . |
Возвращаться
Line Chart Builder
— этот построитель полезен для создания цепочек.
use Log Scale()
Преобразует ось диапазона в логарифмическую шкалу (требуется, чтобы все значения были положительными). Ось диапазона — это вертикальная ось для вертикальных диаграмм (таких как линия, область или столбец) и горизонтальная ось для горизонтальных диаграмм (например, гистограмм).
Возвращаться
Line Chart Builder
— этот построитель полезен для создания цепочек.