열 차트의 빌더입니다. 자세한 내용은 Google 차트 문서를 참고하세요.
이 예에서는 데이터 표의 데이터로 열 차트를 만드는 방법을 보여줍니다.
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()
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
: 체이닝에 유용한 빌더입니다.
set Background Color(cssValue)
차트의 배경 색상을 설정합니다.
// Creates a line chart builder and sets the background color to gray const builder = Charts.newLineChart(); builder.setBackgroundColor('gray');
매개변수
이름 | 유형 | 설명 |
---|---|---|
css | String | 색상의 CSS 값 (예: "blue" 또는 "#00f" )입니다. |
리턴
Column
: 체이닝에 유용한 빌더입니다.
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 | String[] | 색상 CSS 값 배열(예: ["red", "#acf"] ) 배열의 n번째 요소는 차트의 n번째 선의 색상을 나타냅니다. |
리턴
Column
: 체이닝에 유용한 빌더입니다.
set Data Source Url(url)
Google Sheets와 같은 외부 소스에서 데이터를 가져오는 데 사용되는 데이터 소스 URL을 설정합니다. 데이터 소스 URL과 DataTable이 제공되는 경우 데이터 소스 URL은 무시됩니다.
데이터 소스 쿼리에 관한 자세한 내용은 Google 차트 문서를 참고하세요.
매개변수
이름 | 유형 | 설명 |
---|---|---|
url | String | 쿼리 매개변수를 포함한 데이터 소스 URL입니다. |
리턴
Column
: 체이닝에 유용한 빌더입니다.
set Data Table(tableBuilder)
DataTableBuilder를 사용하여 차트에 사용할 데이터 테이블을 설정합니다. build()
를 호출하지 않고 데이터 표를 설정하기 위한 편의 메서드입니다.
매개변수
이름 | 유형 | 설명 |
---|---|---|
table | Data | 데이터 테이블 빌더입니다. 이 호출의 일부로 새 데이터 테이블이 즉시 생성되므로 빌더에 대한 추가 업데이트는 차트에 반영되지 않습니다. |
리턴
Column
: 체이닝에 유용한 빌더입니다.
set Data Table(table)
차트의 선과 X축 라벨이 포함된 데이터 표를 설정합니다. 첫 번째 열은 문자열이어야 하며 가로축 라벨을 포함해야 합니다. 그 뒤에 오는 열의 수는 임의이며 모두 숫자여야 합니다. 각 열은 별도의 선으로 표시됩니다.
매개변수
이름 | 유형 | 설명 |
---|---|---|
table | Data | 차트에 사용할 데이터 표입니다. |
리턴
Column
: 체이닝에 유용한 빌더입니다.
set Data View Definition(dataViewDefinition)
차트에 사용할 데이터 보기 정의를 설정합니다.
매개변수
이름 | 유형 | 설명 |
---|---|---|
data | Data | 차트 그리기의 지정된 데이터 소스에서 파생되어야 하는 뷰를 정의하는 데이터 뷰 정의 객체입니다. |
리턴
Column
: 체이닝에 유용한 빌더입니다.
set Dimensions(width, height)
차트의 측정기준을 설정합니다.
매개변수
이름 | 유형 | 설명 |
---|---|---|
width | Integer | 차트의 너비(픽셀)입니다. |
height | Integer | 차트의 높이(픽셀)입니다. |
리턴
Column
: 체이닝에 유용한 빌더입니다.
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
: 체이닝에 유용한 빌더입니다.
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 | Text | 차트 범례에 사용할 텍스트 스타일입니다. |
리턴
Column
: 체이닝에 유용한 빌더입니다.
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
: 체이닝에 유용한 빌더입니다.
set Range(start, end)
차트의 범위를 설정합니다.
데이터 포인트가 범위를 벗어나면 해당 데이터 포인트를 포함하도록 범위가 확장됩니다.
매개변수
이름 | 유형 | 설명 |
---|---|---|
start | Number | 범위 축의 가장 낮은 그리드 선의 값입니다. |
end | Number | 범위 축의 가장 높은 그리드 선의 값입니다. |
리턴
Column
: 체이닝에 유용한 빌더입니다.
set Stacked()
set Title(chartTitle)
차트 제목을 설정합니다. 제목은 차트 위에 가운데에 표시됩니다.
// Creates a line chart builder and title to 'My Line Chart'. const builder = Charts.newLineChart(); builder.setTitle('My Line Chart');
매개변수
이름 | 유형 | 설명 |
---|---|---|
chart | String | 차트 제목 |
리턴
Column
: 체이닝에 유용한 빌더입니다.
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 | Text | 차트 제목에 사용할 텍스트 스타일입니다. Charts.newTextStyle() 를 호출하여 Text 객체를 만들 수 있습니다. |
리턴
Column
: 체이닝에 유용한 빌더입니다.
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 | Text | 가로축 제목에 사용할 텍스트 스타일입니다. Charts.newTextStyle() 를 호출하여 Text 객체를 만들 수 있습니다. |
리턴
Column
: 체이닝에 유용한 빌더입니다.
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
: 체이닝에 유용한 빌더입니다.
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 | Text | 가로축 제목에 사용할 텍스트 스타일입니다. Charts.newTextStyle() 를 호출하여 Text 객체를 만들 수 있습니다. |
리턴
Column
: 체이닝에 유용한 빌더입니다.
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 | Text | 가로축 제목에 사용할 텍스트 스타일입니다. Charts.newTextStyle() 를 호출하여 Text 객체를 만들 수 있습니다. |
리턴
Column
: 체이닝에 유용한 빌더입니다.
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
: 체이닝에 유용한 빌더입니다.
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 | Text | 가로축 제목에 사용할 텍스트 스타일입니다. Charts.newTextStyle() 를 호출하여 Text 객체를 만들 수 있습니다. |
리턴
Column
: 체이닝에 유용한 빌더입니다.
use Log Scale()
범위 축을 대수로 설정합니다 (모든 값이 양수여야 함). 범위 축은 세로 차트 (예: 선, 영역, 열)의 세로축이고 가로 차트 (예: 막대)의 가로축입니다.
리턴
Column
: 체이닝에 유용한 빌더입니다.