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

트리맵 차트

트리맵 차트는 계층형 데이터를 중첩된 직사각형 집합으로 시각화하는 강력한 도구입니다. 각 직사각형은 카테고리나 하위 카테고리를 나타내며, 크기는 특정 값에 비례하므로 계층 내의 다양한 요소 크기를 쉽게 비교할 수 있습니다.

SpreadJS에서는 색상 팔레트, 그래프 불투명도, 테두리 스타일, 차트 배경, 차트 테두리, 플롯 영역 여백, 툴팁 스타일 등 다양한 속성을 수정하여 트리맵 차트의 외형을 추가하고 사용자 지정할 수 있습니다. 이러한 수정은 코드로 수행하거나 SpreadJS 디자이너의 속성 탭을 통해 수행할 수 있습니다.

참고:

호버 애니메이션은 지원되지 않습니다.

아래 이미지는 트리맵 차트 예시입니다.

image

다음 샘플 코드를 참고하여 트리맵 차트를 추가할 수 있습니다.

참고:

이 샘플은 데이터 차트 만들기 페이지의 "salesTable" 데이터를 기반으로 합니다. 따라서 데이터 차트를 추가하기 위해 해당 페이지에서 안내한 기본 단계를 반드시 완료해야 합니다. 필요에 따라 데이터 소스를 사용자 정의할 수도 있습니다.

// 트리맵 차트
const sheet = spread.getActiveSheet();
sheet.name("Treemap Chart");
const dataChart = sheet.dataCharts.add('data-chart', 10, 10, 600, 400);

dataChart.setChartConfig({
    tableName: 'Sales',
    plots: [
        {
            type: GC.Spread.Sheets.DataCharts.DataChartType.treemap,
            encodings: {
                values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
                details: [{ field: 'Region' }, { field: 'Product' }],
            },
            config: {
                text: [{
                    template: '{detailFields.value}',
                    textStyle: {
                        color: 'black',
                        fontFamily: 'Calibri',
                        fontSize: 16,
                        fontStyle: GC.Spread.Sheets.DataCharts.FontStyle.italic,
                        fontWeight: 'Bold',
                    },
                }],
            }
        }
    ],
    config: {
        header: {
            title: "Treemap Chart",
            padding: {
                left: 10,
                right: 10,
                top: 10,
                bottom: 10,
            },
            style: {
                fill: { type: 'CssColor', color: 'rgba(255,255,255,0.9)' },
                shadow: { blur: 4, color: 'rgba(0,0,0,0.05)' }
            },
            textStyle: {
                color: 'rgba(30,30,30,1)',
                fontSize: 18,
                fontFamily: 'Calibri',
                fontStyle: GC.Spread.Sheets.DataCharts.FontStyle.italic,
                fontWeight: 'Bold',
                alignment: GC.Spread.Sheets.DataCharts.HAlign.left,
            },
        },
    },
});