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

차트 영역과 그림 영역

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

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

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

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


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

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

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

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

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

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




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

Ask ChatGPT

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