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

깔때기형 차트

깔때기형 차트는 프로세스의 단계를 나타내고 각 단계를 거치는 사용자 또는 항목의 수를 정량화하는 데 사용되는 시각화 도구입니다. 일반적으로 초기 단계에서 최종 단계로 갈수록 데이터 양이 점차 감소하는 모습을 위쪽은 넓고 아래쪽으로 갈수록 좁아지는 깔때기 모양으로 보여줍니다.

이 기능을 사용하면 애플리케이션 내에서 영업 파이프라인, 웹 사이트 방문자 전환 또는 채용 프로세스와 같은 흐름을 시각적으로 추적할 수 있으므로 단계별 패턴이나 이탈 지점을 보다 쉽게 파악할 수 있습니다.

SpreadJS에서는 깔때기 유형, 색상표, 그래프 불투명도, 테두리 스타일, 캔버스 안쪽 여백, 방향, 역방향 등을 비롯한 다양한 속성을 수정하여 깔때기형 차트를 추가하고 사용자 지정할 수 있습니다. 이러한 설정은 코드를 통해 프로그래밍 방식으로 변경하거나 SpreadJS 디자이너의 검사기 탭에서 시각적으로 변경할 수 있어 개발자와 디자이너 모두 유연하게 사용할 수 있습니다.

다음은 깔때기형 차트의 예제입니다.

SpreadJS Funnel Chart displays five descending conversion stages, with Visit 5350, View 3503, Cart 1651, Checkout 916, and Pay 587 shown inside colored segments.

예제 기본 코드

이 문서의 모든 예제 코드는 아래에 제공된 기본 코드를 기반으로 하며, 여기에는 핵심 변수 및 데이터 원본과 같은 기본 구성이 포함되어 있습니다.

특정 사용 사례의 요구 사항에 따라 이러한 구성을 사용자 지정할 수 있습니다.

const sheet = spread.getActiveSheet();
sheet.name("Funnel Chart");
const dataManager = spread.dataManager();

function createConversionTable (dataManager) {
    const records = [
        ['Visit', 5350],
        ['View', 3503],
        ['Cart', 1651],
        ['Checkout', 916],
        ['Pay', 587],
    ];
    const columns = ['Stage', 'Count'];

    return dataManager.addTable('Conversion', {
        data: records.map(record => {
            const item = {};
            columns.forEach((column, index) => {
                item[column] = record[index];
            });
            return item;
        })
    });
}

const ConversionTable = createConversionTable(dataManager);
await ConversionTable.fetch();

const dataChart = sheet.dataCharts.add('data-chart', 10, 10, 600, 400);

데이터 바인딩

깔때기형 차트는 범주-값 바인딩을 사용합니다. 범주 필드는 깔때기의 단계를 정의하고 값 필드는 각 세그먼트의 크기를 결정합니다.

깔때기형 차트는 세부 정보 인코딩을 지원하지 않습니다.

깔때기 세그먼트에 서로 다른 색을 할당하거나 색 범례를 생성하려면 색 인코딩을 명시적으로 구성합니다.

image-20260715.635f05.png

범주-값 바인딩을 사용하여 깔때기형 차트를 추가하려면 다음 샘플 코드를 참조하세요.

// Funnel Chart Using Category-Value Binding
dataChart.setChartConfig({
    tableName: 'Conversion',
    plots: [
        {
            type: GC.Spread.Sheets.DataCharts.DataChartType.funnel,
            encodings: {
                values: [{ field: 'Count', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
                category: { field: 'Stage' },
                color: { field: 'Stage' },
            },
        }
    ],
    config: {
        header: {
            title: "Funnel Chart Using Category-Value Binding",
            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: 24,
                fontFamily: 'Calibri',
                fontStyle: GC.Spread.Sheets.DataCharts.FontStyle.italic,
                fontWeight: 'Bold',
                alignment: GC.Spread.Sheets.DataCharts.HAlign.left,
            },
        },
        plotAreas: [{
            legends: [{
                type: GC.Spread.Sheets.DataCharts.LegendType.color,
                textStyle: {
                    fontFamily: 'Calibri',
                    fontSize: 18,
                    fontStyle: GC.Spread.Sheets.DataCharts.FontStyle.italic,
                    fontWeight: 'Bold',
                },
            }],
        }],
    },
});

깔때기 설정

깔때기형 차트는 plots.config.funnel 아래의 전용 구성 매개 변수를 사용하여 시각적 구조와 분석 목적에 맞게 사용자 지정할 수 있습니다.

깔때기형 차트는 깔때기 유형, 방향 및 역방향과 같은 차트별 설정을 제공합니다. 이러한 설정은 깔때기 세그먼트가 렌더링되는 방식과 차트의 방향을 제어합니다.

방향 설정(vertical/horizontal)과 역방향 설정(reversed)을 사용하면 다양한 데이터 표현 방식에 맞게 차트를 조정할 수 있으며, funnelType 유형(예: 사다리꼴, 사각형, 삼각형)을 사용하면 영업 파이프라인이나 사용자 이탈 분석과 같은 다양한 사용 사례에 적용할 수 있습니다.

다음 표에서는 깔때기형 차트를 사용자 지정하기 위한 전용 속성을 설명합니다.

속성

설명

샘플 미리 보기

funnelType

데이터 차트 깔때기 유형을 지정합니다.

  • default: 위쪽 세그먼트에는 사다리꼴을 사용하고 아래쪽 세그먼트에는 사각형을 사용합니다.

  • bar: 사각형을 사용하여 렌더링합니다.

  • pyramid: 위쪽 세그먼트에는 사다리꼴을 사용하고 아래쪽 세그먼트에는 삼각형을 사용합니다.

SpreadJS Funnel Chart uses the default funnel type, rendering upper stages as trapezoids and the final stage as a rectangle.

SpreadJS Funnel Chart uses the bar funnel type, rendering each process stage as a rectangular segment for direct value comparison.

SpreadJS Funnel Chart uses the pyramid funnel type, rendering upper stages as trapezoids and the bottom stage as a triangle.

orientation

깔때기의 방향을 지정합니다. (horizontal/vertical)

SpreadJS Funnel Chart demonstrates configurable horizontal and vertical orientations for presenting sequential category values in different layouts.

reversed

깔때기의 방향을 반대로 표시합니다.

SpreadJS Funnel Chart reverses the visual order of process stages through the reversed configuration property while preserving bound values.

코드 사용

const dataChart = sheet.dataCharts.add('data-chart1', 10, 10, 600, 400);
// Category-Value Binding: Horizontal Funnel Chart Using Pyramid Type
dataChart.setChartConfig({
    tableName: 'Conversion',
    plots: [
        {
            type: GC.Spread.Sheets.DataCharts.DataChartType.funnel,
            encodings: {
                values: [{ field: 'Count', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
                category: { field: 'Stage' },
                color: { field: 'Stage' }
            },
            config: {
                funnel: {
                    funnelType: GC.Spread.Sheets.DataCharts.FunnelType.pyramid,
                    orientation: GC.Spread.Sheets.DataCharts.Orientation.horizontal,
                },
                palette: ['#2A5CAA', '#4ECDC4', '#FFD700', '#E63946', '#22B573'],
                style: {
                    stroke: { type: 'CssColor', color: '#96CEB4' },
                    strokeWidth: 1,
                    strokeOpacity: 0.5,
                },
                text: [{
                    template: '{valueField.value}',
                    position: GC.Spread.Sheets.DataCharts.TextPosition.center,
                    textStyle: {
                        fontFamily: 'Calibri',
                        fontSize: 20,
                        fontWeight: 'Bold',
                        fontStyle: GC.Spread.Sheets.DataCharts.FontStyle.italic,
                        color: 'rgba(51,51,51,1)',
                    },
                }],
            }
        }
    ],
    config: {
        header: {
            title: "Horizontal Funnel Chart Using Pyramid Type",
            padding: {
                left: 10,
                right: 10,
                top: 10,
                bottom: 10,
            },
            textStyle: {
                color: 'rgba(255,255,255,0.9)',
                fontSize: 24,
                fontFamily: 'Calibri',
                fontStyle: GC.Spread.Sheets.DataCharts.FontStyle.italic,
                fontWeight: 'Bold',
                alignment: GC.Spread.Sheets.DataCharts.HAlign.left,
            },
        },
        plotAreas: [{
            padding: {
                left: 40,
                right: 40,
                top: 40,
                bottom: 40,
            },
            legends: [{
                type: GC.Spread.Sheets.DataCharts.LegendType.color,
                position: GC.Spread.Sheets.DataCharts.LegendPosition.bottom,
                hAlign: GC.Spread.Sheets.DataCharts.HAlign.center,
                textStyle: {
                    fontFamily: 'Calibri',
                    fontSize: 18,
                    fontStyle: GC.Spread.Sheets.DataCharts.FontStyle.italic,
                    fontWeight: 'Bold',
                    color: 'rgba(255,255,255,1)'
                },
            }],
        }],
        dvStyle: {
            fill: { type: 'CssColor', color: 'black' },
            stroke: { type: 'CssColor', color: 'grey' },
            strokeWidth: 2,
        },
    },
});

image-20260715.a5779f.png