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

헤더

헤더(Header)는 데이터 차트의 상단에 나타나는 텍스트 필드입니다. 헤더는 차트의 주제와 표시되는 데이터를 빠르게 이해할 수 있도록 전체적인 정보나 식별 정보를 제공합니다.

GC.Spread.Sheets.DataCharts 네임스페이스의 IHeaderOption 인터페이스 속성(title, textStyle 등)을 사용하여 데이터 차트에 헤더를 추가하고 사용자 정의할 수 있습니다.

헤더 속성

아래는 IHeaderOption 인터페이스의 주요 속성 목록입니다:

속성

설명

샘플 미리보기

title

데이터 차트의 헤더 영역에 표시될 텍스트 콘텐츠를 설정합니다.

image

textStyle

헤더 텍스트에 대한 스타일을 설정합니다. 예: 글꼴 패밀리, 글꼴 크기, 스타일, 굵기 등

image

padding

헤더 영역의 안쪽 여백을 설정합니다.

image

style

헤더 영역의 스타일을 설정합니다. 예: 배경색, 테두리 스타일 등

image

코드 예제

아래 코드 샘플은 데이터 차트에 사용자 정의 헤더를 구성하는 방법을 보여줍니다.

이 코드 샘플은 데이터 차트 생성하기 페이지에서 설명된 salesTable 데이터를 사용하므로, 먼저 해당 페이지의 기본 단계를 완료해야 합니다. 설정이 완료되면 아래 코드를 사용하여 헤더 요소를 구성할 수 있으며, 데이터 소스는 필요에 따라 자유롭게 사용자 정의할 수 있습니다.

// Chart header
const sheet = spread.getSheet(0);
sheet.name("Chart Header");
const dataChart = sheet.dataCharts.add('data-chart-1', 10, 10, 480, 300, GC.Spread.Sheets.DataCharts.DataChartType.column);

dataChart.setChartConfig({
    tableName: 'Sales',
    config: {
        // Configure the Header
        header: {             // GC.Spread.Sheets.DataCharts.IHeaderOption 이터페이스
            title: "My DataChart",      // 문자열
            textStyle: {          // GC.Spread.Sheets.DataCharts.ITextStyleOption 인터페이스
                alignment: GC.Spread.Sheets.DataCharts.HAlign.center,
                color: "#9f3b47",
                fontFamily: "Century",
                fontSize: 18,
                fontStyle: GC.Spread.Sheets.DataCharts.FontStyle.italic,
                fontWeight: "Bold",
                writingMode: GC.Spread.Sheets.DataCharts.Orientation.horizontal,
                textDecoration: { underline: true },
            },
            padding: {       // GC.Spread.Sheets.DataCharts.IPaddingOption
                top: 10,
                bottom: 10
            },
            height: 30,      // 숫자
            style: {         // GC.Spread.Sheets.DataCharts.IStyleOption
                fill: { type: "CssColor", color: "#dfeeea" },
                fillOpacity: 0.7,
                stroke: { type: "CssColor", color: "#aaaaaa" },
                strokeDasharray: "0.5,0.5",
                strokeOpacity: 0.7,
                strokeWidth: 1
            }
        }
    },
    plots: [
        {
            type: GC.Spread.Sheets.DataCharts.DataChartType.column,
            encodings: {
                values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
                category: { field: 'Product' },
                color: { field: 'Product' },
            }
        }
    ]
});