본문으로 건너뛰기

SimpleLineChart

SimpleLineChart(심플 라인차트) 위젯은 숫자 값 목록을 꺾은선으로 그려 추세를 시각화하는 가벼운 라인 차트입니다.
주가·수치 변화처럼 흐름을 간단히 보여줄 때 사용합니다.

정의 / 역할​

SimpleLineChart 위젯은 데이터 값 목록(dataList)을 받아 각 값을 점으로 잇는 선을 그립니다. 직선 또는 곡선(스플라인)으로 표현할 수 있고, 선 아래 영역 채움, 최소·최대 지점 강조, 등장 애니메이션을 지원합니다.

  • 카테고리: Contents
  • 팔레트 항목 이름: SimpleLine
  • 기본 크기: 너비 300 × 높이 150
  • 데이터가 없는 편집 화면에서는 SimpleLineChart 라벨이 있는 자리표시 상자로 보입니다.

기능​

기능설명
라인 그리기dataList의 값을 점으로 이어 선을 그립니다. lineColor·lineWidth로 색과 두께를 정합니다.
곡선/직선 전환isSpline을 켜면 부드러운 곡선으로, 끄면 직선으로 그립니다. (곡선은 점이 4개 이상일 때 적용)
영역 채움areaColor 또는 areaGradient를 지정하면 선 아래 영역을 채웁니다.
최소·최대 표시showMinMax를 켜면 데이터의 최소·최대 지점에 점과 텍스트(minText·maxText)를 표시합니다.
등장 애니메이션useAnimation을 켜면 가운데 가로선에서 그래프가 펼쳐지는 애니메이션으로 나타납니다.
범위·여백 조정min·max로 세로축 범위를, topInset·bottomInset으로 위·아래 여백을 조정합니다.

사용 방법​

  1. 왼쪽 위젯 팔레트에서 Contents 카테고리를 엽니다.
  2. SimpleLine 항목을 캔버스로 끌어다 놓습니다.
  3. 오른쪽 속성 패널에서 dataList에 표시할 숫자 값들을 입력합니다.
  4. 필요하면 lineColor·lineWidth·isSpline로 선 모양을 조정합니다.
  5. showMinMax·useAnimation으로 강조·애니메이션을 켭니다.

속성 (Property)​

속성설명기본값값 / 타입
dataList차트에 그릴 숫자 값 목록. 각 값이 선의 한 점이 됩니다.빈 목록숫자 목록
useAnimation등장 애니메이션 사용 여부false참/거짓
showMinMax최소·최대 지점 강조 표시 여부false참/거짓
minText최소 지점에 표시할 텍스트미지정문자열
minColor최소 지점 점·텍스트 색미지정 (파랑으로 표시)색상
maxText최대 지점에 표시할 텍스트미지정문자열
maxColor최대 지점 점·텍스트 색미지정 (빨강으로 표시)색상
isSpline곡선(스플라인)으로 그릴지 여부false참/거짓
lineWidth선 두께1.0숫자 (0.1~10.0)
lineColor선 색#FF0000 (빨강)색상
lineGradient선에 적용할 그라디언트 (지정 시 lineColor 대신 사용)미지정그라디언트
areaColor선 아래 영역 채움 색미지정색상
areaGradient선 아래 영역 채움 그라디언트미지정그라디언트
topInset위쪽 여백 (차트 높이 대비 %)미지정숫자 (0~100)
bottomInset아래쪽 여백 (차트 높이 대비 %)미지정숫자 (0~100)
min세로축 최소값 (미지정 시 데이터 최소값으로 자동)미지정숫자
max세로축 최대값 (미지정 시 데이터 최대값으로 자동)미지정숫자

주의 / 팁​

경고

dataList가 비어 있으면 선이 그려지지 않습니다. 편집 화면에서는 SimpleLineChart 자리표시 상자만 보입니다.

팁

min·max를 지정하지 않으면 데이터의 최소·최대값을 기준으로 세로축이 자동 조정됩니다. isSpline 곡선은 점이 4개 이상일 때만 적용되며, 그보다 적으면 직선으로 그려집니다.

더 알아보기​

팁

이 위젯을 스크립트로 제어하는 Widget Control(Property·Method·Event) 전체는 SimpleLineChart (심플 라인차트) Widget Control 문서에서 확인하세요.