Class BarChartBuilder

BarChartBuilder

막대 그래프용 빌더입니다. 자세한 내용은 Google 차트 문서를 참고하세요.

다음은 막대 그래프를 만드는 방법을 보여주는 예입니다. 데이터는 Google 스프레드시트에서 가져옵니다.

 // Get sample data from a spreadsheet.
 var dataSourceUrl = 'https://docs.google.com/spreadsheet/tq?range=B1%3AC11' +
     '&key=0Aq4s9w_HxMs7dHpfX05JdmVSb1FpT21sbXd4NVE3UEE&gid=0&headers=-1';

 var chartBuilder = Charts.newBarChart()
     .setTitle('Top Grossing Films in US and Canada')
     .setXAxisTitle('USD')
     .setYAxisTitle('Film')
     .setDimensions(600, 500)
     .setLegendPosition(Charts.Position.BOTTOM)
     .setDataSourceUrl(dataSourceUrl);

 var chart = chartBuilder.build();

방법

메서드반환 유형간략한 설명
build()Chart차트를 작성합니다.
reverseCategories()BarChartBuilder도메인 축에서 계열 그리기를 반대로 전환합니다.
reverseDirection()BarChartBuilder가로축을 따라 막대가 성장하는 방향을 반대로 전환합니다.
setBackgroundColor(cssValue)BarChartBuilder차트의 배경 색상을 설정합니다.
setColors(cssValues)BarChartBuilder차트에서 선의 색상을 설정합니다.
setDataSourceUrl(url)BarChartBuilderGoogle 스프레드시트와 같은 외부 소스에서 데이터를 가져오는 데 사용되는 데이터 소스 URL을 설정합니다.
setDataTable(tableBuilder)BarChartBuilderDataTableBuilder를 사용하여 차트에 사용할 데이터 테이블을 설정합니다.
setDataTable(table)BarChartBuilder차트의 선과 X축 라벨이 포함된 데이터 표를 설정합니다.
setDataViewDefinition(dataViewDefinition)BarChartBuilder차트에 사용할 데이터 보기 정의를 설정합니다.
setDimensions(width, height)BarChartBuilder차트의 측정기준을 설정합니다.
setLegendPosition(position)BarChartBuilder차트를 기준으로 범례의 위치를 설정합니다.
setLegendTextStyle(textStyle)BarChartBuilder차트 범례의 텍스트 스타일을 설정합니다.
setOption(option, value)BarChartBuilder이 차트의 고급 옵션을 설정합니다.
setRange(start, end)BarChartBuilder차트의 범위를 설정합니다.
setStacked()BarChartBuilder누적 선을 사용합니다. 즉, 선과 막대 값이 누적 (누적)됩니다.
setTitle(chartTitle)BarChartBuilder차트의 제목을 설정합니다.
setTitleTextStyle(textStyle)BarChartBuilder차트 제목의 텍스트 스타일을 설정합니다.
setXAxisTextStyle(textStyle)BarChartBuilder가로축 텍스트 스타일을 설정합니다.
setXAxisTitle(title)BarChartBuilder가로축에 제목을 추가합니다.
setXAxisTitleTextStyle(textStyle)BarChartBuilder가로축 제목 텍스트 스타일을 설정합니다.
setYAxisTextStyle(textStyle)BarChartBuilder세로축 텍스트 스타일을 설정합니다.
setYAxisTitle(title)BarChartBuilder세로축에 제목을 추가합니다.
setYAxisTitleTextStyle(textStyle)BarChartBuilder세로축 제목 텍스트 스타일을 설정합니다.
useLogScale()BarChartBuilder범위 축을 로그 배율로 만듭니다 (모든 값이 양수여야 함).

자세한 문서

build()

차트를 작성합니다.

리턴

Chart - 문서 또는 UI 요소에 삽입하거나 정적 이미지로 사용할 수 있는 차트 객체입니다.


reverseCategories()

도메인 축에서 계열 그리기를 반대로 전환합니다. 세로 범위 차트 (예: 선, 영역 또는 열 차트)의 경우 가로축이 오른쪽에서 왼쪽으로 그려집니다. 가로축 차트 (예: 막대 그래프)의 경우 세로축이 위에서 아래로 그려집니다. 원형 차트에서는 슬라이스가 시계 반대 방향으로 그려집니다.

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

리턴

BarChartBuilder - 이 빌더로, 연결하는 데 유용합니다.


reverseDirection()

가로축을 따라 막대가 성장하는 방향을 반대로 전환합니다. 값은 기본적으로 왼쪽에서 오른쪽으로 증가합니다. 이 메서드를 호출하면 오른쪽에서 왼쪽으로 크기가 커집니다.

리턴

BarChartBuilder - 이 빌더로, 연결하는 데 유용합니다.


setBackgroundColor(cssValue)

차트의 배경 색상을 설정합니다.

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

매개변수

이름유형설명
cssValueString색상의 CSS 값입니다 (예: "blue" 또는 "#00f").

리턴

BarChartBuilder - 이 빌더로, 연결하는 데 유용합니다.


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"]);

매개변수

이름유형설명
cssValuesString[]색상 CSS 값의 배열입니다(예: ["red", "#acf"]). 배열의 n번째 요소는 차트에서 n번째 선의 색상을 나타냅니다.

리턴

BarChartBuilder - 이 빌더로, 연결하는 데 유용합니다.


setDataSourceUrl(url)

Google 스프레드시트와 같은 외부 소스에서 데이터를 가져오는 데 사용되는 데이터 소스 URL을 설정합니다. 데이터 소스 URL과 DataTable이 제공되는 경우 데이터 소스 URL은 무시됩니다.

데이터 소스 쿼리에 대한 자세한 내용은 Google 차트 문서를 참고하세요.

매개변수

이름유형설명
urlString쿼리 매개변수를 포함한 데이터 소스 URL

리턴

BarChartBuilder - 이 빌더로, 연결하는 데 유용합니다.


setDataTable(tableBuilder)

DataTableBuilder를 사용하여 차트에 사용할 데이터 테이블을 설정합니다. 이 메서드는 build()를 호출하지 않고도 데이터 테이블을 설정하는 편리한 메서드입니다.

매개변수

이름유형설명
tableBuilderDataTableBuilder데이터 표 작성 도구입니다. 이 호출의 일부로 새 데이터 테이블이 즉시 생성되므로 빌더의 추가 업데이트는 차트에 반영되지 않습니다.

리턴

BarChartBuilder - 이 빌더로, 연결하는 데 유용합니다.


setDataTable(table)

차트의 선과 X축 라벨이 포함된 데이터 표를 설정합니다. 첫 번째 열은 문자열이어야 하며 가로축 라벨을 포함해야 합니다. 다음에 오는 열의 수에는 제한이 없으며 모두 숫자여야 합니다. 각 열은 한 줄로 표시됩니다.

매개변수

이름유형설명
tableDataTableSource차트에 사용할 데이터 표입니다.

리턴

BarChartBuilder - 이 빌더로, 연결하는 데 유용합니다.


setDataViewDefinition(dataViewDefinition)

차트에 사용할 데이터 보기 정의를 설정합니다.

매개변수

이름유형설명
dataViewDefinitionDataViewDefinition차트 그리기의 지정된 데이터 소스에서 파생되어야 하는 보기를 정의하는 데이터 보기 정의 객체입니다.

리턴

BarChartBuilder - 이 빌더로, 연결하는 데 유용합니다.


setDimensions(width, height)

차트의 측정기준을 설정합니다.

매개변수

이름유형설명
widthInteger픽셀 단위의 차트 너비입니다.
heightInteger픽셀 단위의 차트 높이입니다.

리턴

BarChartBuilder - 이 빌더로, 연결하는 데 유용합니다.


setLegendPosition(position)

차트를 기준으로 범례의 위치를 설정합니다. 기본적으로 범례는 없습니다.

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

매개변수

이름유형설명
positionPosition범례의 위치입니다.

리턴

BarChartBuilder - 이 빌더로, 연결하는 데 유용합니다.


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);

매개변수

이름유형설명
textStyleTextStyle차트 범례에 사용할 텍스트 스타일입니다.

리턴

BarChartBuilder - 이 빌더로, 연결하는 데 유용합니다.


setOption(option, value)

이 차트의 고급 옵션을 설정합니다. 이 차트에 사용할 수 있는 옵션을 참고하세요. 이 메서드는 지정된 옵션이 유효하지 않으면 아무런 효과가 없습니다.

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

매개변수

이름유형설명
optionString설정할 옵션입니다.
valueObject설정할 값입니다.

리턴

BarChartBuilder - 이 빌더로, 연결하는 데 유용합니다.


setRange(start, end)

차트의 범위를 설정합니다.

범위를 벗어나는 데이터 포인트가 있으면 해당 데이터 포인트를 포함하도록 범위가 확장됩니다.

매개변수

이름유형설명
startNumber범위 축의 가장 낮은 그리드 선 값입니다.
endNumber범위 축에서 가장 높은 그리드 선의 값입니다.

리턴

BarChartBuilder - 이 빌더로, 연결하는 데 유용합니다.


setStacked()

누적 선을 사용합니다. 즉, 선과 막대 값이 누적 (누적)됩니다. 기본적으로 스택은 없습니다.

리턴

BarChartBuilder - 이 빌더로, 연결하는 데 유용합니다.


setTitle(chartTitle)

차트의 제목을 설정합니다. 제목은 차트 중앙에 표시됩니다.

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

매개변수

이름유형설명
chartTitleString차트 제목입니다.

리턴

BarChartBuilder - 이 빌더로, 연결하는 데 유용합니다.


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);

매개변수

이름유형설명
textStyleTextStyle차트 제목에 사용할 텍스트 스타일입니다. Charts.newTextStyle()를 호출하여 TextStyleBuilder 객체를 만들 수 있습니다.

리턴

BarChartBuilder - 이 빌더로, 연결하는 데 유용합니다.


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);

매개변수

이름유형설명
textStyleTextStyle가로축 제목에 사용할 텍스트 스타일입니다. Charts.newTextStyle()를 호출하여 TextStyleBuilder 객체를 만들 수 있습니다.

리턴

BarChartBuilder - 이 빌더로, 연결하는 데 유용합니다.


setXAxisTitle(title)

가로축에 제목을 추가합니다. 제목은 중앙에 배치되고 축 값 라벨 아래에 표시됩니다.

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

매개변수

이름유형설명
titleStringX축의 제목입니다.

리턴

BarChartBuilder - 이 빌더로, 연결하는 데 유용합니다.


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);

매개변수

이름유형설명
textStyleTextStyle가로축 제목에 사용할 텍스트 스타일입니다. Charts.newTextStyle()를 호출하여 TextStyleBuilder 객체를 만들 수 있습니다.

리턴

BarChartBuilder - 이 빌더로, 연결하는 데 유용합니다.


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);

매개변수

이름유형설명
textStyleTextStyle가로축 제목에 사용할 텍스트 스타일입니다. Charts.newTextStyle()를 호출하여 TextStyleBuilder 객체를 만들 수 있습니다.

리턴

BarChartBuilder - 이 빌더로, 연결하는 데 유용합니다.


setYAxisTitle(title)

세로축에 제목을 추가합니다. 제목은 중앙에 배치되고 값 라벨 왼쪽에 표시됩니다.

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

매개변수

이름유형설명
titleStringY축의 제목입니다.

리턴

BarChartBuilder - 이 빌더로, 연결하는 데 유용합니다.


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);

매개변수

이름유형설명
textStyleTextStyle가로축 제목에 사용할 텍스트 스타일입니다. Charts.newTextStyle()를 호출하여 TextStyleBuilder 객체를 만들 수 있습니다.

리턴

BarChartBuilder - 이 빌더로, 연결하는 데 유용합니다.


useLogScale()

범위 축을 로그 배율로 만듭니다 (모든 값이 양수여야 함). 범위축은 세로 차트 (예: 선, 영역, 열)의 경우 세로축이고 가로축 (예: 막대)의 경우 가로축입니다.

리턴

BarChartBuilder - 이 빌더로, 연결하는 데 유용합니다.