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

범례

SpreadJS는 차트에서 범례를 구성하고 사용자 지정할 수 있도록 지원합니다.

범례란?

범례는 차트에 표시된 데이터를 이해하는 데 도움이 되는 레이블을 의미합니다. 차트의 범례 항목은 차트에 플로팅된 데이터 범주의 이름을 나타냅니다. 각 범례 항목은 더 나은 데이터 시각화를 위해 고유한 색상을 가집니다.

사용 시나리오

기본 범례 설정만으로는 차트 데이터를 직관적으로 전달하기 어려운 경우가 많습니다. SpreadJS를 사용하면 범례의 위치를 사용자 지정하고, 스타일을 적용하며, 특정 선호도에 따라 포맷할 수 있습니다. 범례를 사용자 지정하면 차트가 다른 차트들과 차별화되며, 보다 표준화되고 전문적인 느낌을 줄 수 있습니다.

예시 – 아래 차트는 다양한 지리적 지역의 평균 월별 강수량을 나타냅니다. 이 차트는 SpreadJS에서 범례에 대한 고급 사용자 지정 속성(사용자 지정 테두리 스타일, 사용자 지정 글꼴, 사용자 지정 배경색, 사용자 지정 위치(오른쪽 상단)을 사용하여 데이터를 명확하고 효과적으로 표현하고 있습니다.



차트에 범례 추가하기

차트에 범례를 추가하는 주요 목적은 독자가 플로팅된 정보를 쉽게 이해하고 데이터를 분석할 수 있도록 돕는 것입니다. 차트에 범례를 정의하여 워크시트의 행과 열에 존재하는 데이터에 대한 설명을 표시함으로써, 차트에 시각화된 정보를 이해하는 데 도움을 줄 수 있습니다.

예를 들어 – 위 차트 이미지에서는 도쿄, 뉴욕, 런던, 베를린이라는 네 개의 범례 항목이 지역명을 나타내기 위해 추가되어 있습니다.

차트에서 범례를 표시할지 여부는 legend 메서드의 visible 매개변수를 true 또는 false로 설정하여 제어할 수 있습니다. 기본적으로 legend() 메서드의 visible 매개변수는 true로 설정되어 있어 차트에 범례가 표시됩니다.

다음 코드 샘플은 차트에 범례를 구성하는 방법을 보여줍니다.

// 범례 구성
var legend = chart.legend();
legend.visible = true;
chart.legend(legend);

범례 포맷, 위치 및 스타일 사용자 지정

범례를 포맷하고 위치를 조정하며 스타일을 적용하면 차트의 시각적 표현을 향상시킬 뿐만 아니라, 보다 강력한 차트 프레젠테이션을 만드는 데 도움이 됩니다. 차트 범례에 사용할 수 있는 고급 사용자 지정 옵션은 특정 비즈니스 요구 사항이나 사용자 정의 분석 환경에 맞게 미적으로 뛰어난 차트를 생성할 수 있게 합니다.

  • 범례 포맷 및 위치 지정 – SpreadJS에서 차트를 생성하면 범례는 기본적으로 차트 영역 하단에 나타납니다. 하지만 legend 메서드와 LegendPosition 열거형을 사용하여 범례의 기본 위치를 상단, 하단, 왼쪽, 오른쪽, 오른쪽 상단의 다섯 가지 위치 중 하나로 변경할 수 있습니다.

  • 범례 스타일 수정 – SpreadJS는 범례의 테두리 스타일과 배경색을 사용자 지정하는 기능도 제공합니다. borderStyle 속성과 backColor 속성을 사용하여 이를 설정할 수 있습니다. 또한, fontSize, fontFamily, color 속성을 사용하여 차트의 범례에 대해 글꼴 크기, 글꼴 패밀리, 글꼴 색상도 사용자 지정할 수 있습니다.

다음 코드 샘플은 다양한 지역의 평균 월별 강수량을 나타내는 차트에 대해 사용자 지정된 범례 포맷, 위치, 스타일을 적용하는 방법을 보여줍니다.

var chart_columnClustered, chart_columnStacked, chart_columnStacked100, sheet;
window.onload = function () {
    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, 20, 110, 550, 250, "A1:M5");
    
    // 차트에 애니메이션 사용
    chart_columnClustered.useAnimation(true);
    // 차트 제목 구성
    var title = chart_columnClustered.title()
    title.fontSize = "18.00";
    title.color = "rgb(228,65,54)";
    title.text = 'AVERAGE MONTHLY RAINFALL';
    chart_columnClustered.title(title);
    // 범례 서식
    // 범례의 색상, 폰트 크기, 배경색과 fontFamily 속성 설정
    var legend = chart_columnClustered.legend();
    
    // 범례 표시 true로 설정
    legend.visible = true;
    legend.color = 'Green';
    legend.fontSize = 12;
    legend.fontFamily = 'Calibri';
    legend.backColor = 'Yellow';
    // 범례 위치 설정
    // 범럐의 위치를 topRight로 설정
    var legendPosition = GC.Spread.Sheets.Charts.LegendPosition;
    legend.position = legendPosition.topRight;
    // Customize Legend Style
    // Change legend's borderstyle
    legend.borderStyle.width = 1;
    legend.borderStyle.color = "blue";
    legend.borderStyle.backColor = "Red";
    chart_columnClustered.legend(legend);
    sheet.resumePaint();
};