# 호버 애니메이션 및 스타일 추가

## Content

보통 차트에 많은 데이터가 표시되면 데이터 레이블이 차트 전체를 복잡하게 만들어 시각적으로 의미가 없게 됩니다. SpreadJS는 차트와 상호작용할 때 사용자 경험을 향상시키기 위해 **호버 애니메이션(hover animation)** 및 호버 스타일(hover style)을 추가하는 기능을 지원합니다.

## 호버 애니메이션 추가

SpreadJS에서 작업할 때, **호버 애니메이션을 추가하면 사용자가 차트의 데이터 포인트와 직접 상호작용**할 수 있습니다. 이 기능은 기본 차트를 반응형 차트로 바꾸어 데이터를 탐색하는 데 유용하며, 차트의 **가독성을 향상시키고 시각적으로도 매력적인 스프레드시트**를 만듭니다.

호버 애니메이션이 유용한 경우:

* 사용자가 데이터 포인트의 정확한 값을 알고 싶을 때
* 마우스 오버를 통해 추가 정보를 표시하고, 차트를 분석할 때 유용한 인사이트를 얻고자 할 때

아래 이미지는 호버 애니메이션이 적용된 차트를 보여줍니다. 사용자는 워크시트에서 차트 위에 마우스를 올리기만 해도 해당 애니메이션 효과를 확인할 수 있습니다.

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

[useAnimation](/spreadjs/api/v18/classes/GC.Spread.Sheets.Charts.Chart#useAnimation) 메서드를 사용하여 차트에 호버 애니메이션을 추가할 수 있습니다. StockHLC 차트를 제외한 모든 차트 유형에서 호버 애니메이션이 지원됩니다. 애니메이션이 적용되면 차트의 데이터 포인트가 확대되고, 해당 포인트에 대한 추가 정보가 표시됩니다.

## 호버 스타일 적용

SpreadJS에서는 [hoverStyle](/spreadjs/api/v18/classes/GC.Spread.Sheets.Charts.Chart#hoverStyle) 메서드를 사용하여 **차트에 호버 스타일을 적용**할 수 있습니다. 이 기능은 **차트 내 다양한 데이터 포인트를 강조 표시**할 수 있도록 하며, 사용자가 마우스를 해당 지점에 올릴 때 동적으로 표시되는 데이터의 외형을 **사용자 정의**할 수 있습니다.
모든 차트 유형은 호버 스타일을 지원합니다. 사용자는 차트에 호버 스타일을 적용할 때 색상, 투명도, 선 굵기, 선 색상, 선 투명도, 선 종류, 심볼 색상, 심볼 투명도, 심볼 선 굵기, 심볼 선 색상, 심볼 선 투명도, 심볼 선 종류 등을 수정할 수 있습니다.

>type=warning
> **참고**: 호버 스타일의 우선순위는 데이터 포인트에 설정된 스타일보다 **더 높습니다.**

아래 이미지는 차트에 호버 스타일이 적용된 예시를 보여줍니다.
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/spreadjsv13images/hover-style.gif)

다음 코드 샘플은 스프레드시트에서 데이터를 시각화할 때 차트에 **호버 애니메이션** 및 **호버 스타일**을 추가하는 방법을 보여줍니다.

```javascript
var chart_columnClustered, chart_columnStacked, chart_columnStacked100, sheet;
window.onload = function () {
  var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
  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");
  activeSheet.setValue(2, 0, "Saagiate");
  activeSheet.setValue(3, 0, "Inferno");
  activeSheet.setColumnWidth(0, 120);
  for (var r = 1; r <= 3; r++)
  {
    for (var c = 1; c <= 5; c++)
    {
      activeSheet.setValue(r, c, parseInt(Math.random() * 5000));
    }
  }
  // HoverStyle를 가진 라인 마커 차트 구성
  var lineMarkerChart = activeSheet.charts.add('lineMarkerChart', GC.Spread.Sheets.Charts.ChartType.lineMarkers, 20, 100, 380, 330, "A1:F4", GC.Spread.Sheets.Charts.RowCol.columns);
  lineMarkerChart.title({ text: "HoverStyle with markers" });
  var seriesItem = lineMarkerChart.series().get(0);
  seriesItem.symbol.size = 20;
  lineMarkerChart.series().set(0, seriesItem);
  var hoverStyle = lineMarkerChart.hoverStyle();

  // Set applyHoverStyle to true
  hoverStyle.applyHoverStyle = true;
  hoverStyle.color = "orange";
  hoverStyle.transparency = 0.1;
  hoverStyle.borderStyle.transparency = 0.1;
  hoverStyle.borderStyle.color = '#FF0000';
  hoverStyle.borderStyle.width = 3;
  hoverStyle.borderStyle.dashStyle = GC.Spread.Sheets.Charts.LineType.lgDash;
  hoverStyle.symbolStyle.color = "yellow";
  hoverStyle.symbolStyle.transparency = 0.1;
  hoverStyle.symbolStyle.borderStyle.transparency = 0.1;
  hoverStyle.symbolStyle.borderStyle.color = 'rgb(0, 0, 255)';
  hoverStyle.symbolStyle.borderStyle.width = 9;
  hoverStyle.symbolStyle.borderStyle.dashStyle = GC.Spread.Sheets.Charts.LineType.lgDash;
  lineMarkerChart.hoverStyle(hoverStyle);
  // 호버 애니메이션이 있는 원형 차트 설정
  var pieChart = activeSheet.charts.add('pieChart', GC.Spread.Sheets.Charts.ChartType.pie, 420, 100, 380, 330, 'A1:F4');
  pieChart.title({ text: "HoverStyle with Animation" });
  pieChart.useAnimation(true);
  var hoverStyle1 = pieChart.hoverStyle();

  // applyHoverStyle를 true 설정
  hoverStyle1.applyHoverStyle = true;
  hoverStyle1.color = "orange";
  hoverStyle1.transparency = 0.6;
  hoverStyle1.borderStyle.transparency = 0.1;
  hoverStyle1.borderStyle.color = '#FF0000';
  hoverStyle1.borderStyle.width = 9;
  hoverStyle1.borderStyle.dashStyle = GC.Spread.Sheets.Charts.LineType.lgDash;
  pieChart.hoverStyle(hoverStyle1);
  activeSheet.resumePaint();
};
```