Class AreaChartBuilder

ПлощадьДиаграммаСтроитель

Построитель диаграмм с областями. Более подробную информацию можно найти в документации Google Charts .

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

  // Create a data table with some sample data.
  var 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();

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

Методы

Метод Тип возврата Краткое описание
build() Chart Строит диаграмму.
reverseCategories() AreaChartBuilder Отменяет отрисовку рядов на оси домена.
setBackgroundColor(cssValue) AreaChartBuilder Устанавливает цвет фона диаграммы.
setColors(cssValues) AreaChartBuilder Устанавливает цвета линий на диаграмме.
setDataSourceUrl(url) AreaChartBuilder Устанавливает URL-адрес источника данных, который используется для получения данных из внешнего источника, например Google Таблиц.
setDataTable(tableBuilder) AreaChartBuilder Задает таблицу данных, которая будет использоваться для диаграммы, с помощью DataTableBuilder.
setDataTable(table) AreaChartBuilder Устанавливает таблицу данных, содержащую линии диаграммы, а также метки оси X.
setDataViewDefinition(dataViewDefinition) AreaChartBuilder Задает определение представления данных, которое будет использоваться для диаграммы.
setDimensions(width, height) AreaChartBuilder Устанавливает размеры диаграммы.
setLegendPosition(position) AreaChartBuilder Устанавливает положение легенды относительно диаграммы.
setLegendTextStyle(textStyle) AreaChartBuilder Задает стиль текста легенды диаграммы.
setOption(option, value) AreaChartBuilder Устанавливает дополнительные параметры для этой диаграммы.
setPointStyle(style) AreaChartBuilder Устанавливает стиль точек на линии.
setRange(start, end) AreaChartBuilder Устанавливает диапазон диаграммы.
setStacked() AreaChartBuilder Использует составные линии, что означает, что значения линий и столбцов складываются (накапливаются).
setTitle(chartTitle) AreaChartBuilder Устанавливает заголовок диаграммы.
setTitleTextStyle(textStyle) AreaChartBuilder Устанавливает текстовый стиль заголовка диаграммы.
setXAxisTextStyle(textStyle) AreaChartBuilder Устанавливает стиль текста по горизонтальной оси.
setXAxisTitle(title) AreaChartBuilder Добавляет заголовок на горизонтальную ось.
setXAxisTitleTextStyle(textStyle) AreaChartBuilder Устанавливает стиль текста заголовка по горизонтальной оси.
setYAxisTextStyle(textStyle) AreaChartBuilder Устанавливает стиль текста по вертикальной оси.
setYAxisTitle(title) AreaChartBuilder Добавляет заголовок к вертикальной оси.
setYAxisTitleTextStyle(textStyle) AreaChartBuilder Устанавливает стиль текста заголовка вертикальной оси.
useLogScale() AreaChartBuilder Преобразует ось диапазона в логарифмическую шкалу (требуется, чтобы все значения были положительными).

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

build()

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

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

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

reverseCategories()

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

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

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

AreaChartBuilder — этот построитель, полезный для создания цепочек.

setBackgroundColor(cssValue)

Устанавливает цвет фона диаграммы. 

// Creates a line chart builder and sets the background color to gray
var builder = Charts.newLineChart();
builder.setBackgroundColor("gray");

Параметры

Имя Тип Описание
cssValue 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.
var builder = Charts.newLineChart();
builder.setColors(["green", "red"]);

Параметры

Имя Тип Описание
cssValues String[] Массив значений CSS цвета, например ["red", "#acf"] . N-й элемент массива представляет цвет n-й линии диаграммы.

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

AreaChartBuilder — этот построитель, полезный для создания цепочек.

setDataSourceUrl(url)

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

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

Параметры

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

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

AreaChartBuilder — этот построитель, полезный для создания цепочек.

setDataTable(tableBuilder)

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

Параметры

Имя Тип Описание
tableBuilder DataTableBuilder Построитель таблиц данных. Новая таблица данных создается мгновенно в рамках этого вызова, поэтому любые дальнейшие обновления построителя не будут отражены на диаграмме.

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

AreaChartBuilder — этот построитель, полезный для создания цепочек.

setDataTable(table)

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

Параметры

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

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

AreaChartBuilder — этот построитель, полезный для создания цепочек.

setDataViewDefinition(dataViewDefinition)

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

Параметры

Имя Тип Описание
dataViewDefinition DataViewDefinition Объект определения представления данных, определяющий представление, которое должно быть получено из данного источника данных для рисунка диаграммы.

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

AreaChartBuilder — этот построитель, полезный для создания цепочек.

setDimensions(width, height)

Устанавливает размеры диаграммы.

Параметры

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

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

AreaChartBuilder — этот построитель, полезный для создания цепочек.

setLegendPosition(position)

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

// Creates a line chart builder and sets the legend position to right.
var 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.
var textStyleBuilder = Charts.newTextStyle().setColor('#0000FF').setFontSize(26);
var style = textStyleBuilder.build();
var builder = Charts.newLineChart();
builder.setLegendTextStyle(style);

Параметры

Имя Тип Описание
textStyle TextStyle Стиль текста, используемый для легенды диаграммы.

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

AreaChartBuilder — этот построитель, полезный для создания цепочек.

setOption(option, value)

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

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

Параметры

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

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

AreaChartBuilder — этот построитель, полезный для создания цепочек.

setPointStyle(style)

Устанавливает стиль точек на линии. По умолчанию точки не имеют определенных стилей, видна только линия. 

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

Параметры

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

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

AreaChartBuilder — этот построитель, полезный для создания цепочек.

См. также

setRange(start, end)

Устанавливает диапазон диаграммы.

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

Параметры

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

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

AreaChartBuilder — этот построитель, полезный для создания цепочек.

setStacked()

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

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

AreaChartBuilder — этот построитель, полезный для создания цепочек.

setTitle(chartTitle)

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

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

Параметры

Имя Тип Описание
chartTitle String название диаграммы.

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

AreaChartBuilder — этот построитель, полезный для создания цепочек.

setTitleTextStyle(textStyle)

Устанавливает текстовый стиль заголовка диаграммы. 

// Creates a line chart builder and sets it up for a  blue, 26-point title.
var textStyleBuilder = Charts.newTextStyle().setColor('#0000FF').setFontSize(26);
var style = textStyleBuilder.build();
var builder = Charts.newLineChart();
builder.setTitleTextStyle(style);

Параметры

Имя Тип Описание
textStyle TextStyle Стиль текста, используемый для заголовка диаграммы. Вы можете создать объект TextStyleBuilder , вызвав Charts.newTextStyle() .

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

AreaChartBuilder — этот построитель, полезный для создания цепочек.

setXAxisTextStyle(textStyle)

Устанавливает стиль текста по горизонтальной оси. 

// Creates a line chart builder and sets the X-axis text style to blue, 18-point font.
var textStyle = Charts.newTextStyle().setColor('blue').setFontSize(18).build();
var builder = Charts.newLineChart();
builder.setXAxisTextStyle(textStyle);

Параметры

Имя Тип Описание
textStyle TextStyle Стиль текста, используемый для заголовка горизонтальной оси. Вы можете создать объект TextStyleBuilder , вызвав Charts.newTextStyle() .

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

AreaChartBuilder — этот построитель, полезный для создания цепочек.

setXAxisTitle(title)

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

// Creates a line chart builder and sets the X-axis title.
var 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.
var textStyle = Charts.newTextStyle().setColor('blue').setFontSize(18).build();
var builder = Charts.newLineChart();
builder.setXAxisTitleTextStyle(textStyle);

Параметры

Имя Тип Описание
textStyle TextStyle Стиль текста, используемый для заголовка горизонтальной оси. Вы можете создать объект TextStyleBuilder , вызвав Charts.newTextStyle() .

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

AreaChartBuilder — этот построитель, полезный для создания цепочек.

setYAxisTextStyle(textStyle)

Устанавливает стиль текста по вертикальной оси. 

// Creates a line chart builder and sets the Y-axis text style to blue, 18-point font.
var textStyle = Charts.newTextStyle().setColor('blue').setFontSize(18).build();
var builder = Charts.newLineChart();
builder.setYAxisTextStyle(textStyle);

Параметры

Имя Тип Описание
textStyle TextStyle Стиль текста, используемый для заголовка горизонтальной оси. Вы можете создать объект TextStyleBuilder , вызвав Charts.newTextStyle() .

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

AreaChartBuilder — этот построитель, полезный для создания цепочек.

setYAxisTitle(title)

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

// Creates a line chart builder and sets the Y-axis title.
var 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.
var textStyle = Charts.newTextStyle().setColor('blue').setFontSize(18).build();
var builder = Charts.newLineChart();
builder.setYAxisTitleTextStyle(textStyle);

Параметры

Имя Тип Описание
textStyle TextStyle Стиль текста, используемый для заголовка горизонтальной оси. Вы можете создать объект TextStyleBuilder , вызвав Charts.newTextStyle() .

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

AreaChartBuilder — этот построитель, полезный для создания цепочек.

useLogScale()

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

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

AreaChartBuilder — этот построитель, полезный для создания цепочек.