이 서비스를 사용하면 사용자가 Google 차트 도구를 사용하여 차트를 만들고 서버 측에서 렌더링할 수 있습니다. 웹브라우저에서 차트를 렌더링하려면 Google 차트 API를 대신 사용하세요.
이 예에서는 기본 데이터 테이블을 만들고, 데이터로 영역 차트를 채우고, 이미지로 웹페이지에 추가합니다.
function doGet() {
var data = Charts.newDataTable()
.addColumn(Charts.ColumnType.STRING, 'Month')
.addColumn(Charts.ColumnType.NUMBER, 'In Store')
.addColumn(Charts.ColumnType.NUMBER, 'Online')
.addRow(['January', 10, 1])
.addRow(['February', 12, 1])
.addRow(['March', 20, 2])
.addRow(['April', 25, 3])
.addRow(['May', 30, 4])
.build();
var chart = Charts.newAreaChart()
.setDataTable(data)
.setStacked()
.setRange(0, 40)
.setTitle('Sales per Month')
.build();
var htmlOutput = HtmlService.createHtmlOutput().setTitle('My Chart');
var imageData = Utilities.base64Encode(chart.getAs('image/png').getBytes());
var imageUrl = "data:image/png;base64," + encodeURI(imageData);
htmlOutput.append("Render chart server side: <br/>");
htmlOutput.append("<img border=\"1\" src=\"" + imageUrl + "\">");
return htmlOutput;
}클래스
| 이름 | 간략한 설명 |
|---|---|
Area | 영역 차트 빌더입니다. |
Bar | 막대 그래프 빌더입니다. |
Chart | 정적 이미지로 변환할 수 있는 차트 객체입니다. |
Chart | 소스의 숨겨진 측정기준이 차트에 표현되는 방식을 나타내는 열거형입니다. |
Chart | 소스의 여러 범위가 차트에 표현되는 방식을 나타내는 열거형입니다. |
Chart | 높이, 색상 등 현재 Chart에 구성된 옵션을 노출합니다. |
Chart | 차트 서비스에서 지원하는 차트 유형입니다. |
Charts | 스크립트에서 차트를 만드는 진입점입니다. |
Column | 열 차트 빌더입니다. |
Column | Data의 열에 유효한 데이터 유형의 열거형입니다. |
Curve | 차트의 곡선 스타일 열거형입니다. |
Data | 차트에 사용할 데이터 테이블입니다. |
Data | DataTable 객체의 빌더입니다. |
Data | 데이터를 Data로 나타낼 수 있는 객체의 인터페이스 |
Data | 차트 데이터를 시각화하기 위한 데이터 뷰 정의입니다. |
Data | Data 객체의 빌더입니다. |
Line | 선 차트 빌더입니다. |
Match | 문자열 값을 일치시키는 방법의 열거형입니다. |
Number | 숫자 범위 필터 컨트롤의 빌더입니다. |
Orientation | 객체의 방향 열거형입니다. |
Picker | 선택한 값을 선택기 위젯에 표시하는 방법의 열거형입니다. |
Pie | 원형 차트 빌더입니다. |
Point | 선에 있는 점의 스타일 열거형입니다. |
Position | 차트 내 범례 위치의 열거형입니다. |
Scatter | 분산형 차트 빌더입니다. |
String | 문자열 필터 컨트롤의 빌더입니다. |
Table | 표 차트 빌더입니다. |
Text | 텍스트 스타일 구성 객체입니다. |
Text | Text 객체를 만드는 데 사용되는 빌더입니다. |
AreaChartBuilder
메서드
BarChartBuilder
메서드
Chart
메서드
| 메서드 | 반환 유형 | 간략한 설명 |
|---|---|---|
get | Blob | 이 객체 내부의 데이터를 지정된 콘텐츠 유형으로 변환된 blob으로 반환합니다. |
get | Blob | 이 객체 내부의 데이터를 blob으로 반환합니다. |
get | Chart | 높이, 색상, 축과 같은 이 차트의 옵션을 반환합니다. |
ChartHiddenDimensionStrategy
속성
| 속성 | 유형 | 설명 |
|---|---|---|
IGNORE_BOTH | Enum | 기본값입니다. 차트에서 숨겨진 열과 숨겨진 행을 건너뜁니다. |
IGNORE_ROWS | Enum | 차트에서는 숨겨진 행만 건너뜁니다. |
IGNORE_COLUMNS | Enum | 차트에서는 숨겨진 열만 건너뜁니다. |
SHOW_BOTH | Enum | 차트에서는 숨겨진 열이나 숨겨진 행을 건너뛰지 않습니다. |
ChartMergeStrategy
속성
| 속성 | 유형 | 설명 |
|---|---|---|
MERGE_COLUMNS | Enum | 기본값입니다. |
MERGE_ROWS | Enum | 차트에서 여러 범위의 행을 병합합니다. |
ChartOptions
메서드
| 메서드 | 반환 유형 | 간략한 설명 |
|---|---|---|
get(option) | Object | 이 차트에 대해 구성된 옵션을 반환합니다. |
get | Object | 이 차트에 대해 구성된 옵션을 반환합니다. |
ChartType
속성
| 속성 | 유형 | 설명 |
|---|---|---|
TIMELINE | Enum | 타임라인 차트 |
AREA | Enum | 영역 차트 |
BAR | Enum | 막대 그래프 |
BUBBLE | Enum | 풍선형 차트 |
CANDLESTICK | Enum | 원통형 차트 |
COLUMN | Enum | 열 차트 |
COMBO | Enum | 콤보 차트 |
GAUGE | Enum | 게이지 차트 |
GEO | Enum | 지역 차트 |
HISTOGRAM | Enum | 히스토그램 |
RADAR | Enum | 방사형 차트 |
LINE | Enum | 선 차트 |
ORG | Enum | 조직도 |
PIE | Enum | 원형 차트 |
SCATTER | Enum | 분산형 차트 |
SPARKLINE | Enum | 스파크라인 차트 |
STEPPED_AREA | Enum | 계단식 영역 차트 |
TABLE | Enum | 표 차트 |
TREEMAP | Enum | 트리맵 차트 |
WATERFALL | Enum | 폭포형 차트 |
Charts
속성
| 속성 | 유형 | 설명 |
|---|---|---|
Chart | Chart | 소스의 숨겨진 측정기준이 차트에 표현되는 방식을 나타내는 열거형입니다. |
Chart | Chart | 소스의 여러 범위가 차트에 표현되는 방식을 나타내는 열거형입니다. |
Chart | Chart | 차트 서비스에서 지원하는 차트 유형의 열거형입니다. |
Column | Column | Data의 열에 유효한 데이터 유형의 열거형입니다. |
Curve | Curve | 차트의 곡선 스타일 열거형입니다. |
Point | Point | 선에 있는 점의 스타일 열거형입니다. |
Position | Position | 차트 내 범례 위치의 열거형입니다. |
메서드
| 메서드 | 반환 유형 | 간략한 설명 |
|---|---|---|
new | Area | Google 차트 도구 문서에 설명된 대로 영역 차트 빌드를 시작합니다. |
new | Bar | Google 차트 도구 문서에 설명된 대로 막대 그래프 빌드를 시작합니다. |
new | Column | Google 차트 도구 문서에 설명된 대로 열 차트 빌드를 시작합니다. |
new | Data | 값을 수동으로 설정할 수 있는 빈 데이터 표를 만듭니다. |
new | Data | 새 데이터 뷰 정의를 만듭니다. |
new | Line | Google 차트 도구 문서에 설명된 대로 선 차트 빌드를 시작합니다. |
new | Pie | Google 차트 도구 문서에 설명된 대로 원형 차트 빌드를 시작합니다. |
new | Scatter | Google 차트 도구 문서에 설명된 대로 산점도 빌드를 시작합니다. |
new | Table | Google 차트 도구 문서에 설명된 대로 표 차트 빌드를 시작합니다. |
new | Text | 새 텍스트 스타일 빌더를 만듭니다. |
ColumnChartBuilder
메서드
ColumnType
속성
| 속성 | 유형 | 설명 |
|---|---|---|
DATE | Enum | 날짜 값에 해당합니다. |
NUMBER | Enum | 숫자 값에 해당합니다. |
STRING | Enum | 문자열 값에 해당합니다. |
CurveStyle
속성
| 속성 | 유형 | 설명 |
|---|---|---|
NORMAL | Enum | 곡선이 없는 직선 |
SMOOTH | Enum | 선의 각도가 부드러워집니다. |
DataTable
DataTableBuilder
메서드
| 메서드 | 반환 유형 | 간략한 설명 |
|---|---|---|
add | Data | 데이터 테이블에 열을 추가합니다. |
add | Data | 데이터 테이블에 행을 추가합니다. |
build() | Data | 데이터 테이블을 빌드하고 반환합니다. |
set | Data | 표에 특정 값을 설정합니다. |
DataTableSource
메서드
| 메서드 | 반환 유형 | 간략한 설명 |
|---|---|---|
get | Data | 이 객체 내부의 데이터를 DataTable로 반환합니다. |
DataViewDefinition
DataViewDefinitionBuilder
메서드
| 메서드 | 반환 유형 | 간략한 설명 |
|---|---|---|
build() | Data | 이 빌더를 사용하여 빌드된 데이터 뷰 정의 객체를 빌드하고 반환합니다. |
set | Data | 데이터 뷰에 포함할 열의 색인을 설정하고 역할-열 정보를 지정합니다. |
LineChartBuilder
메서드
MatchType
속성
| 속성 | 유형 | 설명 |
|---|---|---|
EXACT | Enum | 정확한 값만 일치 |
PREFIX | Enum | 값의 시작 부분부터 시작하는 접두사 일치 |
ANY | Enum | 하위 문자열과 일치 |
메서드
| 메서드 | 반환 유형 | 간략한 설명 |
|---|---|---|
get | String | 옵션 JSON에서 사용할 일치 유형의 이름을 반환합니다. |
NumberRangeFilterBuilder
메서드
| 메서드 | 반환 유형 | 간략한 설명 |
|---|---|---|
set | Number | 범위 하한의 허용되는 최대값을 설정합니다. |
set | Number | 범위 하한의 최소 허용 값을 설정합니다. |
set | Number | 슬라이더 방향을 설정합니다. |
set | Number | 선택한 범위의 범위를 표시하는 슬라이더 옆에 라벨을 표시할지 여부를 설정합니다. |
set | Number | 숫자 범위 필터 슬라이더 썸이 속할 수 있는 틱 (범위 막대의 고정 위치) 수를 설정합니다. |
Orientation
속성
| 속성 | 유형 | 설명 |
|---|---|---|
HORIZONTAL | Enum | 가로 방향입니다. |
VERTICAL | Enum | 세로 방향입니다. |
PickerValuesLayout
속성
| 속성 | 유형 | 설명 |
|---|---|---|
ASIDE | Enum | 선택한 값은 값 선택기 위젯 옆의 단일 텍스트 줄에 표시됩니다. |
BELOW | Enum | 선택한 값은 위젯 아래의 단일 텍스트 줄에 표시됩니다. |
BELOW_WRAPPING | Enum | 아래와 비슷하지만 선택기에 들어가지 않는 항목은 새 줄로 줄바꿈됩니다. |
BELOW_STACKED | Enum | 선택한 값이 위젯 아래의 열에 표시됩니다. |
PieChartBuilder
메서드
| 메서드 | 반환 유형 | 간략한 설명 |
|---|---|---|
build() | Chart | 차트를 빌드합니다. |
reverse | Pie | 도메인 축에서 계열의 그리기를 반대로 합니다. |
set3D() | Pie | 차트를 3차원으로 설정합니다. |
set | Pie | 차트의 배경 색상을 설정합니다. |
set | Pie | 차트의 선 색상을 설정합니다. |
set | Pie | Google Sheets와 같은 외부 소스에서 데이터를 가져오는 데 사용되는 데이터 소스 URL을 설정합니다. |
set | Pie | DataTableBuilder를 사용하여 차트에 사용할 데이터 테이블을 설정합니다. |
set | Pie | 차트의 선과 X축 라벨이 포함된 데이터 테이블을 설정합니다. |
set | Pie | 차트에 사용할 데이터 뷰 정의를 설정합니다. |
set | Pie | 차트의 크기를 설정합니다. |
set | Pie | 차트를 기준으로 범례의 위치를 설정합니다. |
set | Pie | 차트 범례의 텍스트 스타일을 설정합니다. |
set | Pie | 이 차트의 고급 옵션을 설정합니다. |
set | Pie | 차트의 제목을 설정합니다. |
set | Pie | 차트 제목의 텍스트 스타일을 설정합니다. |
PointStyle
속성
| 속성 | 유형 | 설명 |
|---|---|---|
NONE | Enum | 선 포인트를 표시하지 않습니다. |
TINY | Enum | 작은 선 점을 사용합니다. |
MEDIUM | Enum | 중간 크기의 선 포인트를 사용합니다. |
LARGE | Enum | 큰 크기의 선 포인트를 사용합니다. |
HUGE | Enum | 가장 큰 크기의 선 포인트를 사용합니다. |
Position
속성
| 속성 | 유형 | 설명 |
|---|---|---|
TOP | Enum | 차트 위에 표시됩니다. |
RIGHT | Enum | 차트의 오른쪽 |
BOTTOM | Enum | 차트 아래 |
NONE | Enum | 범례가 표시되지 않습니다. |
ScatterChartBuilder
메서드
StringFilterBuilder
메서드
| 메서드 | 반환 유형 | 간략한 설명 |
|---|---|---|
set | String | 일치 시 대소문자를 구분할지 여부를 설정합니다. |
set | String | 컨트롤이 정확한 값 (Match), 값의 시작 부분부터 시작하는 접두사 (Match) 또는 하위 문자열(Match)과 일치해야 하는지 여부를 설정합니다. |
set | String | 키를 누를 때마다 컨트롤이 일치해야 하는지 아니면 입력 필드가 '변경'될 때만(포커스 손실 또는 Enter 키 누름) 일치해야 하는지 설정합니다. |
TableChartBuilder
메서드
TextStyle
메서드
| 메서드 | 반환 유형 | 간략한 설명 |
|---|---|---|
get | String | 텍스트 스타일의 색상을 가져옵니다. |
get | String | 텍스트 스타일의 글꼴 이름을 가져옵니다. |
get | Number | 텍스트 스타일의 글꼴 크기를 가져옵니다. |
TextStyleBuilder
메서드
| 메서드 | 반환 유형 | 간략한 설명 |
|---|---|---|
build() | Text | 이 빌더를 사용하여 빌드된 텍스트 스타일 구성 객체를 빌드하고 반환합니다. |
set | Text | 텍스트 스타일의 색상을 설정합니다. |
set | Text | 텍스트 스타일의 글꼴 이름을 설정합니다. |
set | Text | 텍스트 스타일의 글꼴 크기를 설정합니다. |