Эта страница переведена с помощью Cloud Translation API.

Class ColumnChartBuilder

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

В этом примере показано, как создать гистограмму с данными из таблицы данных.

const sampleData = Charts.newDataTable()
                       .addColumn(Charts.ColumnType.STRING, 'Year')
                       .addColumn(Charts.ColumnType.NUMBER, 'Sales')
                       .addColumn(Charts.ColumnType.NUMBER, 'Expenses')
                       .addRow(['2004', 1000, 400])
                       .addRow(['2005', 1170, 460])
                       .addRow(['2006', 660, 1120])
                       .addRow(['2007', 1030, 540])
                       .addRow(['2008', 800, 600])
                       .addRow(['2009', 943, 678])
                       .addRow(['2010', 1020, 550])
                       .addRow(['2011', 910, 700])
                       .addRow(['2012', 1230, 840])
                       .build();

const chart = Charts.newColumnChart()
                  .setTitle('Sales & Expenses')
                  .setXAxisTitle('Year')
                  .setYAxisTitle('Amount (USD)')
                  .setDimensions(600, 500)
                  .setDataTable(sampleData)
                  .build();

Методы

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

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

Column 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"` ).

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

Column 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-й линии диаграммы.

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

Column Chart Builder — этот построитель полезен для создания цепочек.

`set Data Source Url(url)`

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

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

Параметры

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

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

Column Chart Builder — этот построитель полезен для создания цепочек.

`set Data Table(tableBuilder)`

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

Параметры

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

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

Column Chart Builder — этот построитель полезен для создания цепочек.

`set Data Table(table)`

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

Параметры

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

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

Column Chart Builder — этот построитель полезен для создания цепочек.

`set Data View Definition(dataViewDefinition)`

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

Параметры

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

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

Column Chart Builder — этот построитель полезен для создания цепочек.

`set Dimensions(width, height)`

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

Параметры

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

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

Column 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`	Позиция легенды.

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

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

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

Column Chart Builder — этот построитель полезен для создания цепочек.

`set Option(option, value)`

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

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

Параметры

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

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

Column Chart Builder — этот построитель полезен для создания цепочек.

`set Range(start, end)`

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

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

Параметры

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

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

Column Chart Builder — этот построитель полезен для создания цепочек.

`set Stacked()`

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

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

Column 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`	название диаграммы.

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

Column Chart Builder — этот построитель полезен для создания цепочек.

`set TitleTextStyle(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 StyleBuilder` , вызвав `Charts.newTextStyle()` .

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

Column 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 StyleBuilder` , вызвав `Charts.newTextStyle()` .

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

Column 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.

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

Column Chart Builder — этот построитель полезен для создания цепочек.

`set XAxis TitleTextStyle(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 StyleBuilder` , вызвав `Charts.newTextStyle()` .

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

Column 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 StyleBuilder` , вызвав `Charts.newTextStyle()` .

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

Column 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.

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

Column Chart Builder — этот построитель полезен для создания цепочек.

`set YAxis TitleTextStyle(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 StyleBuilder` , вызвав `Charts.newTextStyle()` .

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

Column Chart Builder — этот построитель полезен для создания цепочек.

`use Log Scale()`

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

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

Column Chart Builder — этот построитель полезен для создания цепочек.