이 서비스를 사용하면 사용자가 Google 차트 도구를 사용하여 차트를 만들고 서버 측에서 렌더링할 수 있습니다. 웹브라우저에서 차트를 렌더링하려면 대신 Google Charts 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;
}
클래스
이름 | 간략한 설명 |
---|---|
AreaChartBuilder | 영역 차트의 빌더입니다. |
BarChartBuilder | 막대 그래프용 빌더입니다. |
Chart | 정적 이미지로 변환할 수 있는 차트 객체 |
ChartHiddenDimensionStrategy | 소스의 숨겨진 측정기준이 차트에서 표현되는 방식을 열거합니다. |
ChartMergeStrategy | 소스의 여러 범위가 차트에 표현되는 방식을 열거합니다. |
ChartOptions | 높이, 색상 등 현재 Chart 에 구성된 옵션을 노출합니다. |
ChartType | 차트 서비스에서 지원하는 차트 유형입니다. |
Charts | 스크립트에서 차트를 만들기 위한 진입점입니다. |
ColumnChartBuilder | 열 차트의 빌더입니다. |
ColumnType | DataTable 의 열에 유효한 데이터 유형을 열거합니다. |
CurveStyle | 차트의 곡선 스타일을 열거합니다. |
DataTable | 차트에서 사용할 데이터 표입니다. |
DataTableBuilder | DataTable 객체의 빌더입니다. |
DataTableSource | 데이터를 DataTable 로 나타낼 수 있는 객체의 인터페이스입니다. |
DataViewDefinition | 차트 데이터를 시각화하기 위한 데이터 보기 정의입니다. |
DataViewDefinitionBuilder | DataViewDefinition 객체의 빌더입니다. |
LineChartBuilder | 라인 차트 빌더입니다. |
MatchType | 문자열 값이 일치해야 하는 방법의 열거형입니다. |
NumberRangeFilterBuilder | 숫자 범위 필터 컨트롤의 빌더입니다. |
Orientation | 객체의 방향을 열거합니다. |
PickerValuesLayout | 선택 도구 위젯에 선택한 값을 표시하는 방법을 열거합니다. |
PieChartBuilder | 원형 차트 빌더입니다. |
PointStyle | 선에 있는 점 스타일을 열거합니다. |
Position | 차트 내 범례 위치를 열거합니다. |
ScatterChartBuilder | 분산형 차트의 빌더입니다. |
StringFilterBuilder | 문자열 필터 컨트롤의 빌더입니다. |
TableChartBuilder | 표 차트 빌더입니다. |
TextStyle | 텍스트 스타일 구성 객체입니다. |
TextStyleBuilder | TextStyle 객체를 만드는 데 사용되는 빌더입니다. |
AreaChartBuilder
방법
BarChartBuilder
방법
Chart
방법
메서드 | 반환 유형 | 간략한 설명 |
---|---|---|
getAs(contentType) | Blob | 이 객체 내의 데이터를 지정된 콘텐츠 유형으로 변환된 blob으로 반환합니다. |
getBlob() | Blob | 이 객체 내의 데이터를 blob으로 반환합니다. |
getOptions() | ChartOptions | 높이, 색상, 축과 같은 차트의 옵션을 반환합니다. |
ChartHiddenDimensionStrategy
속성
속성 | 유형 | 설명 |
---|---|---|
IGNORE_BOTH | Enum | 기본값: 차트에서 숨겨진 열과 숨겨진 행을 건너뜁니다. |
IGNORE_ROWS | Enum | 차트는 숨겨진 행만 건너뜁니다. |
IGNORE_COLUMNS | Enum | 차트는 숨겨진 열만 건너뜁니다. |
SHOW_BOTH | Enum | 차트는 숨겨진 열이나 숨겨진 행을 건너뛰지 않습니다. |
ChartMergeStrategy
속성
속성 | 유형 | 설명 |
---|---|---|
MERGE_COLUMNS | Enum | 기본값입니다. |
MERGE_ROWS | Enum | 차트는 여러 범위의 행을 병합합니다. |
ChartOptions
방법
메서드 | 반환 유형 | 간략한 설명 |
---|---|---|
get(option) | Object | 이 차트에 대해 구성된 옵션을 반환합니다. |
getOrDefault(option) | 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
속성
속성 | 유형 | 설명 |
---|---|---|
ChartHiddenDimensionStrategy | ChartHiddenDimensionStrategy | 소스의 숨겨진 측정기준이 차트에서 표현되는 방식을 열거합니다. |
ChartMergeStrategy | ChartMergeStrategy | 소스의 여러 범위가 차트에 표현되는 방식을 열거합니다. |
ChartType | ChartType | 차트 서비스에서 지원하는 차트 유형을 열거합니다. |
ColumnType | ColumnType | DataTable 의 열에 유효한 데이터 유형을 열거합니다. |
CurveStyle | CurveStyle | 차트의 곡선 스타일을 열거합니다. |
PointStyle | PointStyle | 선에 있는 점 스타일을 열거합니다. |
Position | Position | 차트 내 범례 위치를 열거합니다. |
방법
메서드 | 반환 유형 | 간략한 설명 |
---|---|---|
newAreaChart() | AreaChartBuilder | Google 차트 도구 문서에 설명된 대로 영역 차트 빌드를 시작합니다. |
newBarChart() | BarChartBuilder | Google 차트 도구 문서에 설명된 대로 막대 그래프 빌드를 시작합니다. |
newColumnChart() | ColumnChartBuilder | Google 차트 도구 문서에 설명된 대로 열 차트 빌드를 시작합니다. |
newDataTable() | DataTableBuilder | 값을 수동으로 설정할 수 있는 빈 데이터 테이블을 만듭니다. |
newDataViewDefinition() | DataViewDefinitionBuilder | 새 데이터 보기 정의를 만듭니다. |
newLineChart() | LineChartBuilder | Google 차트 도구 문서에 설명된 대로 선 차트 작성을 시작합니다. |
newPieChart() | PieChartBuilder | Google 차트 도구 문서에 설명된 대로 원형 차트 빌드를 시작합니다. |
newScatterChart() | ScatterChartBuilder | Google 차트 도구 문서에 설명된 대로 분산형 차트 빌드를 시작합니다. |
newTableChart() | TableChartBuilder | Google 차트 도구 문서에 설명된 대로 표 차트 작성을 시작합니다. |
newTextStyle() | TextStyleBuilder | 새 텍스트 스타일 빌더를 만듭니다. |
ColumnChartBuilder
방법
ColumnType
속성
속성 | 유형 | 설명 |
---|---|---|
DATE | Enum | 날짜 값에 해당합니다. |
NUMBER | Enum | 숫자 값에 해당합니다. |
STRING | Enum | 문자열 값에 해당합니다. |
CurveStyle
속성
속성 | 유형 | 설명 |
---|---|---|
NORMAL | Enum | 곡선 없이 직선 |
SMOOTH | Enum | 선의 각도가 다듬어집니다. |
DataTable
DataTableBuilder
방법
메서드 | 반환 유형 | 간략한 설명 |
---|---|---|
addColumn(type, label) | DataTableBuilder | 데이터 테이블에 열을 추가합니다. |
addRow(values) | DataTableBuilder | 데이터 테이블에 행을 추가합니다. |
build() | DataTable | 데이터 테이블을 빌드하고 반환합니다. |
setValue(row, column, value) | DataTableBuilder | 테이블에서 특정 값을 설정합니다. |
DataTableSource
방법
메서드 | 반환 유형 | 간략한 설명 |
---|---|---|
getDataTable() | DataTable | 이 객체의 데이터를 DataTable로 반환합니다. |
DataViewDefinition
DataViewDefinitionBuilder
방법
메서드 | 반환 유형 | 간략한 설명 |
---|---|---|
build() | DataViewDefinition | 이 빌더를 사용하여 빌드된 데이터 뷰 정의 객체를 빌드하고 반환합니다. |
setColumns(columns) | DataViewDefinitionBuilder | 데이터 뷰에 포함할 열의 색인을 설정하고 역할-열 정보를 지정합니다. |
LineChartBuilder
방법
MatchType
속성
속성 | 유형 | 설명 |
---|---|---|
EXACT | Enum | 정확한 값만 일치 |
PREFIX | Enum | 값의 시작 부분부터 일치하는 접두사 일치 |
ANY | Enum | 모든 하위 문자열 일치 |
방법
메서드 | 반환 유형 | 간략한 설명 |
---|---|---|
getName() | String | 옵션 JSON에서 사용할 일치 유형의 이름을 반환합니다. |
NumberRangeFilterBuilder
방법
메서드 | 반환 유형 | 간략한 설명 |
---|---|---|
setMaxValue(maxValue) | NumberRangeFilterBuilder | 범위 하한에 허용되는 최대 값을 설정합니다. |
setMinValue(minValue) | NumberRangeFilterBuilder | 범위 하한에 허용되는 최소 값을 설정합니다. |
setOrientation(orientation) | NumberRangeFilterBuilder | 슬라이더 방향을 설정합니다. |
setShowRangeValues(showRangeValues) | NumberRangeFilterBuilder | 선택한 범위의 범위를 표시하는 슬라이더 옆에 라벨을 표시할지 여부를 설정합니다. |
setTicks(ticks) | NumberRangeFilterBuilder | 숫자 범위 필터 슬라이더 썸이 속할 수 있는 틱 (범위 막대의 고정된 위치) 수를 설정합니다. |
Orientation
속성
속성 | 유형 | 설명 |
---|---|---|
HORIZONTAL | Enum | 가로 방향입니다. |
VERTICAL | Enum | 세로 방향 |
PickerValuesLayout
속성
속성 | 유형 | 설명 |
---|---|---|
ASIDE | Enum | 선택한 값이 값 선택 도구 위젯 옆에 단일 텍스트 줄에 표시됩니다. |
BELOW | Enum | 선택한 값이 위젯 아래 단일 텍스트 줄에 표시됩니다. |
BELOW_WRAPPING | Enum | 아래와 비슷하지만 선택 도구에 맞지 않는 항목은 줄바꿈으로 줄바꿈됩니다. |
BELOW_STACKED | Enum | 선택한 값이 위젯 아래 열에 표시됩니다. |
PieChartBuilder
방법
메서드 | 반환 유형 | 간략한 설명 |
---|---|---|
build() | Chart | 차트를 작성합니다. |
reverseCategories() | PieChartBuilder | 도메인 축에서 계열 그리기를 반대로 전환합니다. |
set3D() | PieChartBuilder | 차트를 3차원으로 설정합니다. |
setBackgroundColor(cssValue) | PieChartBuilder | 차트의 배경 색상을 설정합니다. |
setColors(cssValues) | PieChartBuilder | 차트에서 선의 색상을 설정합니다. |
setDataSourceUrl(url) | PieChartBuilder | Google 스프레드시트와 같은 외부 소스에서 데이터를 가져오는 데 사용되는 데이터 소스 URL을 설정합니다. |
setDataTable(tableBuilder) | PieChartBuilder | DataTableBuilder를 사용하여 차트에 사용할 데이터 테이블을 설정합니다. |
setDataTable(table) | PieChartBuilder | 차트의 선과 X축 라벨이 포함된 데이터 표를 설정합니다. |
setDataViewDefinition(dataViewDefinition) | PieChartBuilder | 차트에 사용할 데이터 보기 정의를 설정합니다. |
setDimensions(width, height) | PieChartBuilder | 차트의 측정기준을 설정합니다. |
setLegendPosition(position) | PieChartBuilder | 차트를 기준으로 범례의 위치를 설정합니다. |
setLegendTextStyle(textStyle) | PieChartBuilder | 차트 범례의 텍스트 스타일을 설정합니다. |
setOption(option, value) | PieChartBuilder | 이 차트의 고급 옵션을 설정합니다. |
setTitle(chartTitle) | PieChartBuilder | 차트의 제목을 설정합니다. |
setTitleTextStyle(textStyle) | PieChartBuilder | 차트 제목의 텍스트 스타일을 설정합니다. |
PointStyle
속성
속성 | 유형 | 설명 |
---|---|---|
NONE | Enum | 선 포인트를 표시하지 않습니다. |
TINY | Enum | 작은 선 포인트를 사용합니다. |
MEDIUM | Enum | 중간 크기의 선 포인트를 사용합니다. |
LARGE | Enum | 큰 크기의 선 포인트를 사용합니다. |
HUGE | Enum | 크기가 가장 큰 선 포인트를 사용하세요. |
Position
속성
속성 | 유형 | 설명 |
---|---|---|
TOP | Enum | 차트 위 |
RIGHT | Enum | 차트의 오른쪽에 있습니다. |
BOTTOM | Enum | 차트 아래 |
NONE | Enum | 범례가 표시되지 않습니다. |
ScatterChartBuilder
방법
StringFilterBuilder
방법
메서드 | 반환 유형 | 간략한 설명 |
---|---|---|
setCaseSensitive(caseSensitive) | StringFilterBuilder | 일치에서 대소문자를 구분할지 여부를 설정합니다. |
setMatchType(matchType) | StringFilterBuilder | 컨트롤이 정확한 값만 일치하게 할지 (MatchType.EXACT ), 값의 시작 부분에서 시작되는 접두사 (MatchType.PREFIX ) 또는 모든 하위 문자열(MatchType.ANY )과 일치하는지 설정합니다. |
setRealtimeTrigger(realtimeTrigger) | StringFilterBuilder | 키를 누를 때마다 컨트롤이 일치해야 하는지 또는 입력 필드가 '변경'될 때만(포커스를 잃거나 Enter 키를 누를 때)에만 일치하는지 설정합니다. |
TableChartBuilder
방법
TextStyle
방법
메서드 | 반환 유형 | 간략한 설명 |
---|---|---|
getColor() | String | 텍스트 스타일의 색상을 가져옵니다. |
getFontName() | String | 텍스트 스타일의 글꼴 이름을 가져옵니다. |
getFontSize() | Number | 텍스트 스타일의 글꼴 크기를 가져옵니다. |
TextStyleBuilder
방법
메서드 | 반환 유형 | 간략한 설명 |
---|---|---|
build() | TextStyle | 이 빌더를 사용하여 빌드된 텍스트 스타일 구성 객체를 빌드하고 반환합니다. |
setColor(cssValue) | TextStyleBuilder | 텍스트 스타일의 색상을 설정합니다. |
setFontName(fontName) | TextStyleBuilder | 텍스트 스타일의 글꼴 이름을 설정합니다. |
setFontSize(fontSize) | TextStyleBuilder | 텍스트 스타일의 글꼴 크기를 설정합니다. |