Class AreaChartBuilder

AreaChartBuilder

Конструктор для построения диаграмм с областями. Для получения более подробной информации см. документацию Google Charts .

Вот пример, демонстрирующий, как построить диаграмму с областями.

// Create a data table with some sample data.
const sampleData = Charts.newDataTable()
                       .addColumn(Charts.ColumnType.STRING, 'Month')
                       .addColumn(Charts.ColumnType.NUMBER, 'Dining')
                       .addColumn(Charts.ColumnType.NUMBER, 'Total')
                       .addRow(['Jan', 60, 520])
                       .addRow(['Feb', 50, 430])
                       .addRow(['Mar', 53, 440])
                       .addRow(['Apr', 70, 410])
                       .addRow(['May', 80, 390])
                       .addRow(['Jun', 60, 500])
                       .addRow(['Jul', 100, 450])
                       .addRow(['Aug', 140, 431])
                       .addRow(['Sep', 75, 488])
                       .addRow(['Oct', 70, 521])
                       .addRow(['Nov', 58, 388])
                       .addRow(['Dec', 63, 400])
                       .build();

const chart = Charts.newAreaChart()
                  .setTitle('Yearly Spending')
                  .setXAxisTitle('Month')
                  .setYAxisTitle('Spending (USD)')
                  .setDimensions(600, 500)
                  .setStacked()
                  .setColors(['red', 'green'])
                  .setDataTable(sampleData)
                  .build();

Методы

Метод Тип возвращаемого значения Краткое описание
build() Chart Создаёт диаграмму.
reverse Categories() Area Chart Builder Изменяет направление построения рядов относительно оси области определения.
set Background Color(cssValue) Area Chart Builder Задает цвет фона для диаграммы.
set Colors(cssValues) Area Chart Builder Задает цвета для линий на диаграмме.
set Data Source Url(url) Area Chart Builder Задает URL-адрес источника данных, который используется для получения данных из внешнего источника, например, Google Таблиц.
set Data Table(tableBuilder) Area Chart Builder Задает таблицу данных, используемую для построения диаграммы, с помощью DataTableBuilder.
set Data Table(table) Area Chart Builder Задает таблицу данных, содержащую линии для диаграммы, а также подписи к оси X.
set Data View Definition(dataViewDefinition) Area Chart Builder Задает определение представления данных, которое будет использоваться для диаграммы.
set Dimensions(width, height) Area Chart Builder Задает размеры диаграммы.
set Legend Position(position) Area Chart Builder Задает положение легенды относительно диаграммы.
set Legend Text Style(textStyle) Area Chart Builder Задает стиль текста легенды диаграммы.
set Option(option, value) Area Chart Builder Задает дополнительные параметры для этой диаграммы.
set Point Style(style) Area Chart Builder Задает стиль для точек на линии.
set Range(start, end) Area Chart Builder Задает диапазон для диаграммы.
set Stacked() Area Chart Builder Используется линейная диаграмма с накоплением, то есть значения линии и столбца суммируются (накапливаются).
set Title(chartTitle) Area Chart Builder Задает заголовок диаграммы.
set Title Text Style(textStyle) Area Chart Builder Задает стиль текста заголовка диаграммы.
set XAxis Text Style(textStyle) Area Chart Builder Задает стиль текста по горизонтальной оси.
set XAxis Title(title) Area Chart Builder Добавляет заголовок к горизонтальной оси.
set XAxis Title Text Style(textStyle) Area Chart Builder Задает стиль текста заголовка по горизонтальной оси.
set YAxis Text Style(textStyle) Area Chart Builder Задает стиль текста по вертикальной оси.
set YAxis Title(title) Area Chart Builder Добавляет заголовок к вертикальной оси.
set YAxis Title Text Style(textStyle) Area Chart Builder Задает стиль текста заголовка по вертикальной оси.
use Log Scale() Area Chart Builder Преобразует ось диапазона в логарифмическую шкалу (требует, чтобы все значения были положительными).

Подробная документация

build()

Создаёт диаграмму.

Возвращаться

Chart — объект типа Chart, который можно встраивать в документы, элементы пользовательского интерфейса или использовать в качестве статического изображения.

reverseCategories()

Изменяет порядок отображения рядов данных по оси координат. Для диаграмм с вертикальным диапазоном (таких как линейные, площадные или столбчатые диаграммы) это означает, что горизонтальная ось отображается справа налево. Для диаграмм с горизонтальным диапазоном (таких как гистограммы) это означает, что вертикальная ось отображается сверху вниз. Для круговых диаграмм это означает, что сектора отображаются против часовой стрелки.

// Creates a pie chart builder and sets drawing of the slices in a
// counter-clockwise manner.
const builder = Charts.newPieChart();
builder.reverseCategories();

Возвращаться

AreaChartBuilder — Этот конструктор полезен для построения цепочек диаграмм.

setBackgroundColor(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" ).

Возвращаться

AreaChartBuilder — Этот конструктор полезен для построения цепочек диаграмм.

setColors(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-й линии на графике.

Возвращаться

AreaChartBuilder — Этот конструктор полезен для построения цепочек диаграмм.

setDataSourceUrl(url)

Задает URL-адрес источника данных, используемого для получения данных из внешнего источника, например, Google Sheets. Если указаны URL-адрес источника данных и объект DataTable, URL-адрес источника данных игнорируется.

Для получения более подробной информации о запросах к источникам данных ознакомьтесь с документацией Google Charts .

Параметры

Имя Тип Описание
url String URL-адрес источника данных, включая любые параметры запроса.

Возвращаться

AreaChartBuilder — Этот конструктор полезен для построения цепочек диаграмм.

setDataTable(tableBuilder)

Задает таблицу данных для построения диаграммы с помощью DataTableBuilder. Это удобный способ задать таблицу данных без необходимости вызова build() .

Параметры

Имя Тип Описание
table Builder Data Table Builder Конструктор таблиц данных. В рамках этого вызова мгновенно создается новая таблица данных, поэтому любые дальнейшие обновления конструктора не будут отражены в диаграмме.

Возвращаться

AreaChartBuilder — Этот конструктор полезен для построения цепочек диаграмм.

setDataTable(table)

Задает таблицу данных, содержащую линии для диаграммы, а также подписи оси X. Первый столбец должен быть строковым и содержать подписи горизонтальной оси. Далее может следовать любое количество столбцов, все они должны быть числовыми. Каждый столбец отображается в виде отдельной строки.

Параметры

Имя Тип Описание
table Data Table Source Таблица данных, используемая для построения диаграммы.

Возвращаться

AreaChartBuilder — Этот конструктор полезен для построения цепочек диаграмм.

setDataViewDefinition(dataViewDefinition)

Задает определение представления данных, которое будет использоваться для диаграммы.

Параметры

Имя Тип Описание
data View Definition Data View Definition Объект определения представления данных, который определяет представление, которое должно быть получено из заданного источника данных для построения диаграммы.

Возвращаться

AreaChartBuilder — Этот конструктор полезен для построения цепочек диаграмм.

setDimensions(width, height)

Задает размеры диаграммы.

Параметры

Имя Тип Описание
width Integer Ширина диаграммы в пикселях.
height Integer Высота диаграммы в пикселях.

Возвращаться

AreaChartBuilder — Этот конструктор полезен для построения цепочек диаграмм.

setLegendPosition(position)

Задает положение легенды относительно диаграммы. По умолчанию легенда отсутствует.

// Creates a line chart builder and sets the legend position to right.
const builder = Charts.newLineChart();
builder.setLegendPosition(Charts.Position.RIGHT);

Параметры

Имя Тип Описание
position Position Положение легенды.

Возвращаться

AreaChartBuilder — Этот конструктор полезен для построения цепочек диаграмм.

setLegendTextStyle(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 Стиль текста, используемый для легенды диаграммы.

Возвращаться

AreaChartBuilder — Этот конструктор полезен для построения цепочек диаграмм.

setOption(option, value)

Задает дополнительные параметры для этой диаграммы. См. доступные параметры для этой диаграммы . Этот метод не имеет эффекта, если указанный параметр недействителен.

// Build an area chart with a 1-second animation duration.
const builder = Charts.newAreaChart();
builder.setOption('animation.duration', 1000);
const chart = builder.build();

Параметры

Имя Тип Описание
option String Возможность настройки.
value Object Значение, которое нужно установить.

Возвращаться

AreaChartBuilder — Этот конструктор полезен для построения цепочек диаграмм.

setPointStyle(style)

Задает стиль для точек на линии. По умолчанию точки не имеют каких-либо особых стилей, и видна только линия.

// Creates a line chart builder and sets large point style.
const builder = Charts.newLineChart();
builder.setPointStyle(Charts.PointStyle.LARGE);

Параметры

Имя Тип Описание
style Point Style Стиль, используемый для обозначения точек на линии.

Возвращаться

AreaChartBuilder — Этот конструктор полезен для построения цепочек диаграмм.

См. также

setRange(start, end)

Задает диапазон для диаграммы.

Если какие-либо точки данных выходят за пределы диапазона, диапазон расширяется, чтобы включить эти точки данных.

Параметры

Имя Тип Описание
start Number Значение для нижней линии сетки оси диапазона.
end Number Значение для самой верхней линии сетки оси диапазона.

Возвращаться

AreaChartBuilder — Этот конструктор полезен для построения цепочек диаграмм.

setStacked()

Используется наложение линий, то есть значения линии и столбца суммируются (накапливаются). По умолчанию наложение линий не используется.

Возвращаться

AreaChartBuilder — Этот конструктор полезен для построения цепочек диаграмм.

setTitle(chartTitle)

Задает заголовок диаграммы. Заголовок отображается по центру над диаграммой.

// Creates a line chart builder and title to 'My Line Chart'.
const builder = Charts.newLineChart();
builder.setTitle('My Line Chart');

Параметры

Имя Тип Описание
chart Title String заголовок диаграммы.

Возвращаться

AreaChartBuilder — Этот конструктор полезен для построения цепочек диаграмм.

setTitleTextStyle(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() .

Возвращаться

AreaChartBuilder — Этот конструктор полезен для построения цепочек диаграмм.

setXAxisTextStyle(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() .

Возвращаться

AreaChartBuilder — Этот конструктор полезен для построения цепочек диаграмм.

setXAxisTitle(title)

Добавляет заголовок к горизонтальной оси. Заголовок центрируется и отображается под метками значений оси. 

// Creates a line chart builder and sets the X-axis title.
const builder = Charts.newLineChart();
builder.setTitle('X-axis Title');

Параметры

Имя Тип Описание
title String Заголовок для оси X.

Возвращаться

AreaChartBuilder — Этот конструктор полезен для построения цепочек диаграмм.

setXAxisTitleTextStyle(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() .

Возвращаться

AreaChartBuilder — Этот конструктор полезен для построения цепочек диаграмм.

setYAxisTextStyle(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() .

Возвращаться

AreaChartBuilder — Этот конструктор полезен для построения цепочек диаграмм.

setYAxisTitle(title)

Добавляет заголовок к вертикальной оси. Заголовок центрируется и отображается слева от меток значений. 

// Creates a line chart builder and sets the Y-axis title.
const builder = Charts.newLineChart();
builder.setYAxisTitle('Y-axis Title');

Параметры

Имя Тип Описание
title String Заголовок для оси Y.

Возвращаться

AreaChartBuilder — Этот конструктор полезен для построения цепочек диаграмм.

setYAxisTitleTextStyle(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() .

Возвращаться

AreaChartBuilder — Этот конструктор полезен для построения цепочек диаграмм.

useLogScale()

Преобразует ось диапазона в логарифмическую шкалу (требует, чтобы все значения были положительными). Ось диапазона — это вертикальная ось для вертикальных диаграмм (таких как линейные, площадные или столбчатые) и горизонтальная ось для горизонтальных диаграмм (таких как столбчатые).

Возвращаться

AreaChartBuilder — Этот конструктор полезен для построения цепочек диаграмм.