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

꺾은선형 차트

꺾은선형 차트는 데이터 포인트를 선으로 연결하여 범주별 또는 시간에 따른 값의 변화를 보여줍니다. 비즈니스, 재무 및 운영 데이터에서 추세, 변동 및 방향성을 시각화하는 데 일반적으로 사용됩니다.

SpreadJS에서는 코드를 사용하거나 SpreadJS 디자이너의 Inspector 탭을 통해 색상 팔레트, 선 두께, 기호 표시, 도구 설명 스타일, 축 모양 등의 속성을 수정하여 꺾은선형 차트를 사용자 지정할 수 있습니다.

참고: 이 항목의 샘플은 데이터 원본 바인딩에서 소개한 Sales 테이블을 사용합니다. 차트를 추가하기 전에 데이터 원본이 구성되어 있는지 확인하세요.

꺾은선형 차트

기본 꺾은선형 차트는 범주별 집계 값을 표시합니다. 각 데이터 포인트는 연결되어 전체적인 추세를 나타냅니다.

image-20260420.80667b.png

// Line Chart
const sheet = spread.getActiveSheet();
sheet.name("Line Chart");

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

dataChart.setChartConfig({
  tableName: 'Sales',
  config: {
    header: {
      title: "Line Chart"
    }
  },
  plots: [{
    type: GC.Spread.Sheets.DataCharts.DataChartType.line,
    encodings: {
      category: { field: "Product" },
      color: { field: "Region" },
      values: [{
        field: "Sales",
        aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum
      }]
    },
    config: {
      axisMode: GC.Spread.Sheets.DataCharts.AxisMode.cartesian
    }
  }]
});

계층형 범주를 사용하는 꺾은선형 차트

꺾은선형 차트는 계층형 범주 그룹화를 지원합니다.

category: {
  field: "ProductCategory",
  child: {
    field: "Product"
  }
}

중첩 순서에 따라 그룹화 계층 구조가 정의됩니다.

image-20260420.7d31e9.png

선 모양

꺾은선형 차트는 lineAspect 속성을 지원하며, 데이터 포인트가 연결되고 렌더링되는 방식을 제어합니다.

Line Aspect

Sample

Default

image-20260420.c76d2c.png

Spline

image-20260420.d65c22.png

StepCenter

image-20260420.e1c60b.png

StepLeft

image-20260420.3c973a.png

StepRight

image-20260420.fb19bb.png

BezierCurve

image-20260420.00327e.png

lineAspect를 null 또는 undefined로 설정하면 차트는 Default 동작으로 렌더링됩니다.

예제

config: {
  lineAspect: GC.Spread.Sheets.DataCharts.LineAspect.Spline
}

기호 및 선 스타일

꺾은선형 차트에서는 선 두께와 기호 모양을 사용자 지정할 수 있습니다.

config: {
  style: {
    strokeWidth: 2,
    symbolShape: GC.Spread.Sheets.DataCharts.SymbolShape.dot,
    symbolSize: 10
  },
  symbols: true
}

  • strokeWidth는 선의 두께를 제어합니다.

  • symbolShape는 마커의 모양을 정의합니다.

  • symbolSize는 마커의 크기를 제어합니다.

  • symbols는 마커 표시 여부를 설정합니다.

image-20260420.0057e7.png

색상 팔레트

palette 속성은 여러 계열에 사용할 색상 순서를 정의합니다.

config: {
  palette: [
    "#88bde6",
    "#fbb258",
    "#90cd97",
    "#f6aac9",
    "#bfa554",
    "#bc99c7"
  ]
}

팔레트는 생성된 계열에 순서대로 적용됩니다.

image-20260420.4f0020.png