[]
        
(Showing Draft Content)

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

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

이 기능을 사용하면 사용자는 차트 포맷팅 시 값 축을 로그 스케일로 변경하여 특정 분석 요구 사항을 충족할 수 있습니다.

사용 시나리오

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

  • 차트에 플로팅된 값이 큰 데이터 범위를 포함할 때, 값 축을 로그 스케일로 변경하는 것이 좋습니다.

  • 비즈니스 분석가가 서로 다른 회사의 매출 수익을 심층적으로 비교해야 할 때.

  • 사용자가 경제, 인구 통계, 마케팅 데이터 세트와 같은 복합적인 데이터 세트를 시각화하려 할 때.

  • 데이터 시리즈 값의 절대적인 변화가 아닌 상대적인 변화를 비교하고자 할 때.

  • 상당히 다른 데이터 집합 간의 차이를 빠르게 분석하고자 할 때.

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


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

이러한 경우, 로그 스케일을 사용하면 비즈니스 분석가가 경쟁업체의 매출을 효과적으로 추적할 수 있습니다.




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) 차트는 제외됩니다.

참고: 차트에서 로그 스케일을 사용할 때 다음 제한 사항을 유의해야 합니다:

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

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

Ask ChatGPT

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