# 차트 영역과 그림 영역

## Content

SpreadJS는 사용자가 스프레드시트에서 데이터를 시각화할 때 차트 영역과 그림 영역을 구성할 수 있도록 지원합니다. 차트 영역은 워크시트에서 차트가 차지하는 큰 영역을 의미하며, 다른 모든 차트 요소들을 포함합니다. [Chart ](/spreadjs/api/v19/classes/GC.Spread.Sheets.Charts.Chart)클래스의 [chartArea](/spreadjs/api/v19/classes/GC.Spread.Sheets.Charts.Chart#chartArea) 메서드는 차트 영역을 사용자 지정하는 데 사용됩니다.
그림 영역은 차트에서 데이터가 실제로 플로팅되는(표시되는) 영역을 의미합니다.

## **차트 영역 테두리 사용자 지정**

모든 차트에는 기본 테두리가 존재하지만, 색상, 투명도, 너비, 점선 스타일(dash style)과 같은 속성을 사용하여 기본 차트 영역 테두리를 사용자 지정하면 개인의 선호도나 워크시트 테마에 더 잘 맞출 수 있습니다.

차트 영역 테두리를 사용자 지정하면 다음과 같은 효과를 얻을 수 있습니다:

* 데이터의 그래픽 표현을 강조하여 심미적인 효과를 창출할 수 있습니다.
* 워크시트 내 차트의 외형에 대한 제어력을 향상시킬 수 있습니다.
* 플로팅된 데이터의 가독성을 향상시킬 수 있습니다.
* 대규모 스프레드시트에서 여러 차트 중 특정 차트에 주의를 집중시킬 수 있습니다.

다음 스크린샷은 서로 다른 제품(Mobile Phones, Laptops, Tablets)의 연간 판매 실적을 나타내는 차트를 보여줍니다.

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/spreadjsv13images/custom-area-border.png)

다음 코드 샘플은 차트 영역에 사용자 지정 테두리를 추가하는 방법을 보여줍니다.

```javascript
var activeSheet = spread.getActiveSheet();
activeSheet.suspendPaint();
// 차트를 위한 데이터 준비
activeSheet.setValue(0, 1, "Y-2016");
activeSheet.setValue(0, 2, "Y-2017");
activeSheet.setValue(0, 3, "Y-2018");
activeSheet.setValue(1, 0, "Mobile Phones");
activeSheet.setValue(2, 0, "Laptops");
activeSheet.setValue(3, 0, "Tablets");      
for (var r = 1; r <= 3; r++)
{
  for (var c = 1; c <= 3; c++) {
    activeSheet.setValue(r, c, parseInt(Math.random() * 10000));
  }
}
// 차트 추가
var chart = activeSheet.charts.add('Chart1', GC.Spread.Sheets.Charts.ChartType.columnClustered, 20, 110, 550, 250, "A1:D4");
// ChartArea 추가
var chartArea = chart.chartArea();
chartArea.backColor = "#DBF3FA";
chartArea.backColorTransparency = 0.1;
chartArea.fontSize = 14;
// ChartArea의 테두리 스타일 설정
chartArea.border.width = 3;
chartArea.border.dashStyle = 4;
chartArea.border.color = "red";
chartArea.border.transparency = 0.5;
chart.chartArea(chartArea);
              
// 차트 제목 구성
var title = chart.title();
title.text = "Annual Sales Record";
title.fontFamily = "Cambria";
title.fontSize = 28;
title.color = "#696969";
chart.title(title); 
```