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

차트 애니메이션

SpreadJS는 스프레드시트에서 작업할 때 사용자가 데이터를 보다 역동적으로 상호작용하고 시각화를 향상시킬 수 있도록 차트에 애니메이션을 사용할 수 있는 기능을 제공합니다. 또한, 차트에 애니메이션을 사용하면 워크시트의 행과 열에 플로팅된 정보로부터 트렌드를 빠르게 식별하고 분석하며 조작하는 데 도움이 됩니다.

예시

예를 들어, 여러 지리적 지역의 월간 강수량 데이터를 비교하고자 할 때, 특정 월에 어떤 국가에서 가장 많은 비가 내렸는지 또는 가장 적은 비가 내렸는지를 비교해야 하는 시나리오를 가정해 봅시다. 이러한 데이터를 스프레드시트에 플로팅하고 차트를 생성하면 수많은 행과 열을 일일이 확인하지 않고도 정보를 쉽게 파악하고 분석할 수 있습니다.

여기에 애니메이션 효과까지 추가하면, 데이터를 실시간으로 시각화하고 보다 빠르고 효율적으로 인사이트 기반 의사결정을 내릴 수 있습니다.

아래 이미지는 사용자가 워크시트에 기존 애니메이션을 추가하여 사용하는 예시를 보여줍니다.


또한, 데이터를 동적으로 변경함으로써 실시간으로 트렌드를 식별하기 위해 차트 애니메이션을 업데이트할 수도 있습니다.


아래 코드는 차트에서 애니메이션을 사용하는 방법을 보여줍니다:

var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
sheet = spread.getActiveSheet();
sheet.suspendPaint();
var dataArray = 
[
  ["", 'Jan', 'Feb', 'Mar',
  'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
  ["Tokyo", 49.9, 71.5, 106.4, 129.2, 144.0, 176.0,
    135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
  ["New York", 83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 
    105.0, 104.3, 91.2, 83.5, 106.6, 92.3],
  ["London", 48.9, 38.8, 39.3, 41.4, 47.0, 48.3,
    59.0, 59.6, 52.4, 65.2, 59.3, 51.2],
  ["Berlin", 42.4, 33.2, 34.5, 39.7, 52.6, 75.5,
     57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
];
sheet.setArray(0, 0, dataArray);
// 막대형 차트 추가 - columnClustered
chart_columnClustered = sheet.charts.add('chart_columnClustered', GC.Spread.Sheets.Charts.ChartType.columnClustered, 300, 180, 600, 400, "A1:M5");
           
// 차트 애니메이션
chart_columnClustered.useAnimation(true);
// 차트 제목 구성
var title = chart_columnClustered.title()
title.fontSize = "24.00";
title.color = "rgb(228,65,54)";
title.text = 'AVERAGE MONTHLY RAINFALL';
chart_columnClustered.title(title);
sheet.resumePaint();

참고: SpreadJS는 세로 막대형 차트, 가로 막대형 차트, 꺽은선형 차트, 원형 차트 이렇게 네 가지 유형의 차트에서만 애니메이션을 지원합니다. 현재 방사형 차트, 트리맵 차트, 선버스트 차트, 주식형 차트, 혼합 차트, 영역형 차트, 분산형 차트 등의 다른 모든 차트 유형은 애니메이션 기능을 지원하지 않습니다.