[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

차트 영역과 그림 영역

SpreadJS는 사용자가 스프레드시트에서 데이터를 시각화할 때 차트 영역과 그림 영역을 구성할 수 있도록 지원합니다. 차트 영역은 워크시트에서 차트가 차지하는 큰 영역을 의미하며, 다른 모든 차트 요소들을 포함합니다. Chart 클래스의 chartArea 메서드는 차트 영역을 사용자 지정하는 데 사용됩니다.

그림 영역은 차트에서 데이터가 실제로 플로팅되는(표시되는) 영역을 의미합니다.

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

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


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

  • 데이터의 그래픽 표현을 강조하여 심미적인 효과를 창출할 수 있습니다.

  • 워크시트 내 차트의 외형에 대한 제어력을 향상시킬 수 있습니다.

  • 플로팅된 데이터의 가독성을 향상시킬 수 있습니다.

  • 대규모 스프레드시트에서 여러 차트 중 특정 차트에 주의를 집중시킬 수 있습니다.

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




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

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

플롯 영역 채우기 및 테두리 사용자 지정

플롯 영역은 차트 데이터가 그려지는 영역입니다. 플롯 영역의 배경과 테두리를 사용자 지정하여 데이터가 그려지는 영역을 차트의 나머지 부분과 구분할 수 있습니다.

다음 코드 샘플에서는 플롯 영역의 채우기 색과 테두리 스타일을 설정합니다.

chart.plotArea({
    backColor: "red",
    backColorTransparency: 0.6,
    border: {
        color: "blue",
        transparency: 0.6,
        width: 2,
        dashStyle: GC.Spread.Sheets.Charts.LineType.dash
    }
});

디자이너에서 플롯 영역을 선택하고 플롯 영역 서식 사이드 패널을 사용하여 채우기 및 테두리 옵션을 구성합니다.

image-20260710.7d860e.png

플롯 영역 레이아웃 설정

플롯 영역 레이아웃을 설정하여 차트 내에서 플롯 영역의 위치와 크기를 제어할 수 있습니다.

다음 코드 샘플에서는 플롯 영역 레이아웃을 설정합니다.

chart.plotArea({
    layout: {
        x: 0.2,
        y: 0.1,
        width: 0.6,
        height: 0.8
    }
});

디자이너에서 플롯 영역을 선택하고 플롯 영역 서식 사이드 패널을 사용하여 플롯 영역의 위치와 크기를 구성합니다.

image-20260710.23eace.png

참고: 플롯 영역 레이아웃은 트리맵, 선버스트, 폭포 차트 및 깔때기형 차트에서 지원되지 않습니다.