# 수직 축을 로그 스케일로 변경하기

## Content

값의 차이가 큰 데이터를 플로팅하면 잘못된 데이터 분석으로 이어질 수 있으며, 완전히 읽을 수 있는 차트를 생성하지 못할 수도 있습니다. SpreadJS는 사용자가 수직 축(값 축이라고도 함)의 최소 및 최대 스케일 값을 사용자 지정할 수 있도록 지원합니다.
이 기능을 사용하면 사용자는 차트 포맷팅 시 값 축을 로그 스케일로 변경하여 특정 분석 요구 사항을 충족할 수 있습니다.

## 사용 시나리오

이 기능은 다음과 같은 상황에서 유용합니다:

* 차트에 플로팅된 값이 **큰 데이터 범위를 포함할 때**, 값 축을 로그 스케일로 변경하는 것이 좋습니다.
* **비즈니스 분석가**가 서로 다른 회사의 **매출 수익을 심층적으로 비교**해야 할 때.
* 사용자가 **경제, 인구 통계, 마케팅 데이터 세트**와 같은 **복합적인 데이터 세트**를 시각화하려 할 때.
* 데이터 시리즈 값의 **절대적인 변화가 아닌 상대적인 변화**를 비교하고자 할 때.
* **상당히 다른 데이터 집합 간의 차이**를 빠르게 분석하고자 할 때.

**예시** – A와 B라는 제품 기반 회사의 매출 수익을 비교한다고 가정해 보겠습니다. 여기서 A는 크지만 느리게 성장하는 대기업, B는 작지만 빠르게 성장하는 중소기업입니다.

이제 두 회사의 매출 수익을 동일한 선형 차트에 나타낸다면, 단지 절대적인 데이터 값만 비교되며, 차트의 가독성은 크게 저하됩니다. 더 나아가, 소기업(B)이 대기업(A)보다 빠르게 성장하고 있다는 사실을 파악하기 어려울 수 있습니다.
이러한 경우, 로그 스케일을 사용하면 비즈니스 분석가가 경쟁업체의 매출을 효과적으로 추적할 수 있습니다.

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

## LogBase 및 스케일링 규칙

`IAxis` 인터페이스의 `scaling` 속성은 사용자가 차트의 축을 가져오거나 설정할 수 있도록 합니다.
`LogBase`는 `"Null"`, `"10"`, `"2"`의 옵션으로 구성할 수 있습니다.
수직 축을 로그 축으로 변경할 때는 다음 규칙을 유의해야 합니다:

* **로그 스케일은 수직 축(값 축)에만 설정할 수 있습니다.**
* 축의 레이블 숫자는 주어진 **로그 기반(LogBase)의 거듭제곱**에 따라 증가합니다.
    예: LogBase가 3일 경우 → 1, 3, 9, 27, 81 …
* 최소 로그 기반 값은 **2**입니다.
* `LogBase` 값은 **2\~1000 사이**여야 합니다.
* 최소 값이 자동(auto)으로 설정되어 있는 경우, 최소값은 **1**입니다.

***

다음 표는 수직 축을 로그 스케일로 변경할 때 사용할 수 있는 로그 기반(LogBase) 옵션을 설명합니다:

| LogBase | 설명 |
| ------- | --- |
| Null | 로그 스케일을 비활성화할 때 사용됩니다. |
| 10 | 10을 기반으로 한 로그 스케일을 사용자 지정할 때 사용됩니다. |
| 2 | 2를 기반으로 한 로그 스케일을 사용자 지정할 때 사용됩니다. |

## 지원되는 차트 유형

값 축을 포함하는 모든 차트 유형은 로그 스케일을 지원합니다. 단, 히스토그램(Histogram), 상자 그림(Box & Whisker), 폭포수(Waterfall) 차트는 제외됩니다.

>type=warning
> **참고:** 차트에서 로그 스케일을 사용할 때 다음 제한 사항을 유의해야 합니다:
>
> * 사용자가 **분산형(Scatter)** 또는 **거품(Bubble)** 차트에서 **x축을 로그 스케일로 설정한 후**, 차트 유형을 **카테고리 축(x축)을 포함하는 다른 차트 유형**으로 변경하면 차트가 **이상하게 표시**되며 `"차트 요소 추가(Add Chart Element Axes)"` 기능이 예상대로 동작하지 않을 수 있습니다.

다음 코드 샘플은 차트에서 로그 스케일을 사용하여 두 회사의 매출 수익을 상대적으로 비교하는 방법을 보여줍니다.

```javascript
var activeSheet = spread.getActiveSheet();
activeSheet.suspendPaint();
// 차트를 위한 데이터 준비
activeSheet.setValue(0, 1, "Y-2015");
activeSheet.setValue(0, 2, "Y-2016");
activeSheet.setValue(0, 3, "Y-2017");
activeSheet.setValue(0, 4, "Y-2018");
activeSheet.setValue(0, 5, "Y-2019");
activeSheet.setValue(1, 0, "Gradlco Corp. Ltd");
activeSheet.setValue(2, 0, "Saagiate Corp. Ltd.");
activeSheet.setColumnWidth(0, 120);
for (var r = 1; r <= 2; r++)
{
   for (var c = 1; c <= 5; c++) {
   activeSheet.setValue(r, c, parseInt(Math.random() * 5000));
}
}
// columnClustered 차트 추가 
chart_columnClustered = activeSheet.charts.add('chart_columnClustered', GC.Spread.Sheets.Charts.ChartType.columnClustered, 50, 100, 600, 400);
var series = chart_columnClustered.series();
series.add({
   chartType: GC.Spread.Sheets.Charts.ChartType.columnClustered,
   axisGroup: GC.Spread.Sheets.Charts.AxisGroup.primary,
   name: "Sheet1!$A$2",
   xValues: "Sheet1!$B$1:$F$1",
   yValues: "Sheet1!$B$2:$D$2"
});
series.add({
   chartType: GC.Spread.Sheets.Charts.ChartType.lineMarkers,
   axisGroup: GC.Spread.Sheets.Charts.AxisGroup.secondary,
   name: "Sheet1!$A$3",
   xValues: "Sheet1!$B$1:$F$1",
   yValues: "Sheet1!$B$3:$D$3"
});
var axes = chart_columnClustered.axes();
axes.primaryCategory.style.color = 'green';
axes.primaryCategory.title.color = 'green';
axes.primaryCategory.title.text = 'Primary Category Axes';
axes.primaryValue.style.color = 'red';
axes.primaryValue.title.color = 'red';
axes.primaryValue.title.text = 'Primary Value Axes with Logarithmic Scaling';
axes.primaryValue.title.fontSize = 16;
axes.primaryValue.scaling = {
   logBase: 20
};
           
axes.secondaryCategory.visible = true;
axes.secondaryCategory.style.color = 'green';
axes.secondaryCategory.title.color = 'green';
axes.secondaryCategory.title.text = 'Secondary Category Axes';
axes.secondaryCategory.title.fontSize = 16;
axes.secondaryValue.style.color = 'blue';
axes.secondaryValue.title.color = 'blue';
axes.secondaryValue.format = 'General';
axes.secondaryValue.title.text = 'Secondary Value Axes';
chart_columnClustered.axes(axes);
// 차트 제목 구성 
var title = chart_columnClustered.title();
title.text = "Annual Sales Record";
title.fontFamily = "Cambria";
title.fontSize = 28;
title.color = "Red";
chart_columnClustered.title(title);
activeSheet.resumePaint();
```