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

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

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

호버 애니메이션 추가

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


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

  • 사용자가 데이터 포인트의 정확한 값을 알고 싶을 때

  • 마우스 오버를 통해 추가 정보를 표시하고, 차트를 분석할 때 유용한 인사이트를 얻고자 할 때

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




useAnimation 메서드를 사용하여 차트에 호버 애니메이션을 추가할 수 있습니다. StockHLC 차트를 제외한 모든 차트 유형에서 호버 애니메이션이 지원됩니다. 애니메이션이 적용되면 차트의 데이터 포인트가 확대되고, 해당 포인트에 대한 추가 정보가 표시됩니다.

호버 스타일 적용

SpreadJS에서는 hoverStyle 메서드를 사용하여 차트에 호버 스타일을 적용할 수 있습니다. 이 기능은 차트 내 다양한 데이터 포인트를 강조 표시할 수 있도록 하며, 사용자가 마우스를 해당 지점에 올릴 때 동적으로 표시되는 데이터의 외형을 사용자 정의할 수 있습니다.

모든 차트 유형은 호버 스타일을 지원합니다. 사용자는 차트에 호버 스타일을 적용할 때 색상, 투명도, 선 굵기, 선 색상, 선 투명도, 선 종류, 심볼 색상, 심볼 투명도, 심볼 선 굵기, 심볼 선 색상, 심볼 선 투명도, 심볼 선 종류 등을 수정할 수 있습니다.

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

아래 이미지는 차트에 호버 스타일이 적용된 예시를 보여줍니다.



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

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