Line Chart

Line chart 위젯은 시계열 텔레메트리를 선으로 시각화합니다. 실시간 갱신, 여러 시리즈, 이중 Y축, 데이터 집계, 임계값, 비교 모드를 지원하므로 온도, 압력, 전압, 에너지 소비량 같은 지표를 시간에 따라 추적하는 데 알맞습니다.

• 데이터 시리즈 여러 개마다 색상, 선 스타일, Y축을 따로 지정합니다.
• 실시간 모드와 기록 모드에서 시간 창과 데이터 집계(평균, 합계, 최소, 최대)를 설정할 수 있습니다.
• 비교 오버레이: 이전 기간(어제, 지난주 등)의 같은 시리즈를 현재 데이터 위에 겹쳐 그립니다.
• 임계값을 라벨과 사용자 지정 스타일이 있는 가로 기준선으로 설정할 수 있습니다.
• 시리즈별 통계(최소, 최대, 평균, 합계, 최신)를 보여 주는 범례.
• 선 스타일 옵션: 부드러운 곡선, 계단 함수, 점선이나 도트, 영역 채우기.
• 대시보드 시간 창을 바꾸지 않고 좁은 시간 범위를 살펴보는 데이터 줌.

1. 대시보드를 수정 모드로 엽니다. 위쪽 툴바의 위젯 추가를 클릭하거나, 빈 대시보드 가운데의 위젯 추가 아이콘을 클릭합니다.
2. 위젯 번들 선택 대화상자에서 Charts를 찾아 클릭합니다.
3. Line chart 위젯을 선택합니다.
4. 데이터 소스, 시리즈, 모양을 설정한 다음 추가를 클릭합니다.

이 절의 설정은 모두 기본 모드 기준입니다. 필수 항목만 다루는 빠른 설정입니다. 사용자 지정 툴팁 함수나 고급 축 서식 같은 세부 설정은 고급 탭으로 바꿉니다.

기본 탭은 설정을 타임윈도우, 데이터 소스, 시리즈, Y축, 임계값, 모양, 차트, X축, 범례, 툴팁, 애니메이션, 카드 모양으로 나눕니다.

표시할 시간 구간을 정합니다(예: 과거 24시간, Current week). 특정 구간의 값을 요약하려면(예: 시간별 평균) 데이터 집계를 켭니다. 자세한 내용은 시간 창 가이드를 참고하세요.

텔레메트리 데이터의 소스를 선택합니다:

• 장치 — 특정 HMI 장치. 설정한 시간 범위 동안 이 HMI 장치의 텔레메트리 시리즈를 보여 줍니다.
• 개체 별명 — 엔티티 별칭에 맞는 엔티티 집합. 여러 HMI 장치의 지표를 한 차트에서 비교할 때 씁니다.

위젯은 표시 모드 두 가지를 지원합니다: 시리즈와 비교.

데이터 키마다 독립된 선으로 그립니다. 표시할 텔레메트리 값마다 키를 추가합니다(예: temperature, humidity). 새 텔레메트리가 들어오면 선마다 동적으로 갱신됩니다.

시리즈 행의 설정 아이콘을 클릭하면 일반과 고급 탭이 있는 데이터 키 구성 대화상자가 열립니다.

일반 탭:

설정	설명
키	텔레메트리나 속성 키 이름.
라벨	이 시리즈의 범례 라벨.
단위	단위 접미사(예: °C, %).
소수점	표시 값의 소수 자릿수.
색상	선 색상.
데이터 후처리 기능 사용	표시하기 전에 원시 값에 적용하는 JavaScript 변환(선택 사항). 시그니처: f(value, latestData).

고급 탭 — 범례:

설정	설명
범례에 표시	이 시리즈를 차트 범례에 넣습니다.
기본 숨김	시리즈를 그리지만 사용자가 범례에서 켜기 전까지 숨겨 둡니다.

고급 탭 — Y축: 이 시리즈를 그릴 Y축을 선택합니다.

고급 탭 — 선 설정:

설정	설명
선 표시	이 시리즈를 선으로 그립니다.
계단선	선을 계단 함수로 그립니다. 계단 위치를 고릅니다: 시작, 중간, 끝.
부드러운 선	직선 대신 베지어 곡선 구간을 씁니다.
선 유형	선 대시 스타일: 실선, 점선, 도트.
선 두께	선 두께(픽셀).

고급 탭 — 점 설정:

설정	설명
점 표시	데이터 점마다 마커를 그립니다.
점 라벨	점 위나 아래에 값을 라벨로 표시합니다. 라벨 위치와 글꼴을 설정합니다.
점 라벨 배경	점 라벨 뒤에 배경을 표시합니다.
점 모양	마커 모양: 빈 원, 사각형, 다이아몬드 등.
점 크기	마커 지름(픽셀).

고급 탭 — 채우기: 선 아래 영역을 칠합니다. 옵션: 없음, 불투명도(투명도가 있는 단색 채우기), 그라데이션.

고급 탭 — 툴팁 값 서식 함수: 이 시리즈의 호버 툴팁에 보이는 값의 서식을 정하는 JavaScript 함수 f(value, latestData)(선택 사항).

고급 탭 — 비교 설정: 비교용 과거 데이터 표시를 켜면 이 시리즈 옆에 이전 기간의 비교 선을 그립니다. 비교 키 라벨(자동 또는 사용자 지정)과 비교 데이터 색상을 설정합니다.

비교 모드에서는 이전 기간의 같은 데이터 키를 현재 데이터 위에 겹쳐 그립니다(예: 오늘과 어제, 이번 주와 지난주). 기간마다 별도의 선으로 그리므로 구간 사이의 추세나 이상을 쉽게 찾을 수 있습니다.

이 모드를 켜려면 시리즈 영역의 비교 탭으로 바꿉니다. 비교 항목마다 구간 드롭다운, X축 버튼, 데이터 키 목록(표시, 키, 라벨, 색상)이 있습니다.

비교 구간 옵션:

옵션	설명
이전 구간(기본)	시간 창을 구간 길이 하나만큼 뒤로 옮깁니다.
1일 전	24시간 전의 같은 기간과 비교합니다.
1주 전	7일 전의 같은 기간과 비교합니다.
1개월 전	한 달 전의 같은 기간과 비교합니다.
1년 전	1년 전의 같은 기간과 비교합니다.
사용자 지정 구간	사용자 지정 오프셋을 밀리초로 입력합니다.

비교 X축 설정 — X축 버튼을 클릭해 비교 시간 축의 표시 방식을 설정합니다:

설정	설명
표시	차트에 비교 X축을 표시합니다.
라벨	비교 축의 글 라벨.
위치	위 또는 아래.
눈금 라벨	눈금에 날짜/시간 라벨을 표시합니다. 글꼴과 색상을 설정합니다.
눈금 표시	축에 눈금 표시를 그립니다.
선 표시	축 기준선을 그립니다.
분할선 표시	눈금마다 세로 격자선을 그립니다.

Y축을 하나 이상 설정해 세로 스케일과 라벨을 정합니다. 시리즈 설정의 Y축 필드로 시리즈마다 다른 축을 지정할 수 있습니다. 새 축을 추가하려면 Y축 추가를 클릭합니다.

축 행마다 다음 열이 있습니다:

열	설명
Id	시리즈를 이 축에 지정할 때 쓰는 고유 식별자.
표시	차트에서 축을 표시하거나 숨깁니다.
라벨	축 옆에 표시되는 글 라벨.
위치	왼쪽 또는 오른쪽.
Min / Max	고정 스케일 경계. 비워 두면 자동으로 조정합니다.
단위	축 눈금 라벨의 단위 접미사.
소수점	눈금 라벨 값의 소수 자릿수.

축 행의 설정 아이콘을 클릭하면 Y축 설정 대화상자가 열립니다:

설정	설명
라벨	글꼴과 색상을 설정할 수 있는 글 라벨.
눈금 라벨	눈금마다 값 라벨을 표시합니다. 글꼴과 색상을 설정합니다.
눈금 표시	축 선에 눈금 표시를 그립니다.
선 표시	축 기준선을 그립니다.
분할선 표시	눈금마다 차트를 가로지르는 가로 격자선을 그립니다.
눈금 간격	눈금 사이 간격. 자동이면 데이터 범위에서 정합니다.
분할 수	권장 눈금 구간 수. 자동이면 차트가 정합니다.

Scale limits — 축 스케일의 최소·최대 경계를 직접 정합니다. 경계마다 Source가 있습니다:

소스	설명
상수	직접 입력한 고정 숫자 값.
키	현재 엔티티의 텔레메트리나 속성 키에서 가져온 값.
엔터티	지정한 엔티티의 속성이나 텔레메트리 키에서 가져온 값.

안전, 경고, 심각 수준을 표시하는 가로 기준선을 추가합니다. 행을 추가하려면 임계값 추가를 클릭합니다.

열	설명
소스	상수 — 고정 숫자 값. 엔터티 — 엔티티 속성이나 텔레메트리 키에서 가져온 값.
키 / 값	숫자 값(상수) 또는 속성/텔레메트리 키 이름(엔터티).
Y축	임계값을 그릴 Y축.
색상	임계값 선 색상.
단위	임계값 라벨에 표시되는 단위 접미사.
소수점	임계값 라벨 값의 소수 자릿수.

임계값 행의 설정 아이콘을 클릭하면 임계값 설정 대화상자가 열립니다:

설정	설명
라벨	임계값 선에 글 라벨을 표시합니다. 위치를 정합니다: 시작, 중간, 끝, 내부 시작, 내부 시작 상단, 내부 시작 하단. 글꼴과 색상을 설정합니다.
라벨 배경	라벨 글 뒤에 채운 배경을 표시합니다.
선 색상	임계값 선의 색상.
선 유형	대시 스타일: 실선, 점선, 도트.
선 두께	선 두께(픽셀).
시작 기호	선 왼쪽 끝의 마커(예: 없음, 화살표). 기호 크기를 정합니다.
끝 기호	선 오른쪽 끝의 마커(예: 없음, 화살표). 기호 크기를 정합니다.

위젯 헤더에 표시되는 차트 제목을 설정합니다.

설정	설명
제목	위젯 헤더에 표시되는 글. 글꼴, 크기, 굵기, 색상을 설정합니다.
카드 아이콘	제목 옆에 표시하는 아이콘(선택 사항).

상호작용 동작과 차트 영역 레이아웃을 설정합니다.

설정	설명
데이터 줌	대시보드 시간 창을 바꾸지 않고 좁은 시간 범위를 살펴보도록 가로 줌을 켭니다.
그리드	차트 영역 안쪽 여백을 조정합니다.
스택 모드	여러 시리즈를 같은 축에 쌓습니다. 항목별 기여 합계를 보여 줄 때 유용합니다.

가로 시간 축을 설정합니다. 축을 아예 숨기려면 표시 스위치를 끕니다.

설정	설명
라벨	축을 따라 표시되는 글 라벨. 글꼴과 색상을 설정합니다.
위치	아래 또는 위.
눈금 라벨	눈금마다 날짜/시간 라벨을 표시합니다. 날짜 형식, 글꼴, 색상을 설정합니다.
눈금 표시	축에 눈금 표시를 그립니다. 색상을 설정합니다.
선 표시	축 기준선을 그립니다. 색상을 설정합니다.
분할선 표시	눈금마다 차트를 가로지르는 세로 격자선을 그립니다.

주 스위치로 범례 전체를 표시하거나 숨깁니다.

설정	설명
범례 위치	범례 배치: 상단, 하단, 왼쪽, 오른쪽.
Show 값s	시리즈별로 표시할 통계: 최소, 최대, 평균, 합계, 최신. 여러 값을 함께 켤 수 있습니다.
라벨	시리즈 이름 라벨의 글꼴과 색상.
값	통계 값의 글꼴과 색상.
Column 제목	열 머리글 행의 글꼴과 색상(Show 값s를 켜면 보임).
범례에 데이터키 정렬	시리즈 항목을 알파벳순으로 정렬합니다.

주 스위치로 툴팁 전체를 표시하거나 숨깁니다.

설정	설명
트리거	포인트 — 데이터 점에 마우스를 올립니다. 축 — 차트 어디에나 마우스를 올리면 그 타임스탬프의 모든 시리즈 값을 보여 줍니다.
날짜	타임스탬프를 표시합니다. 날짜 형식을 고르고 글꼴과 색상을 설정합니다.
날짜/시간 구간 표시	툴팁 머리글에 시간 구간 범위를 표시합니다.
0 값 숨기기	값이 0인 시리즈 항목을 툴팁에서 뺍니다.
스택 모드에서 총합 표시	스택 모드를 켰을 때 모든 시리즈의 합계를 보여 줍니다.
라벨	툴팁의 시리즈 이름 라벨 글꼴과 색상.
값	툴팁의 값 글자 글꼴과 색상.
배경색	툴팁 배경 채우기 색상.
배경 블러	툴팁 배경에 적용하는 블러 반경(px).

주 스위치로 차트 애니메이션을 켜거나 끕니다. 켜면 다음을 설정합니다:

설정	설명
애니메이션 임계값	데이터 점 수가 이 값(기본 2000)을 넘으면 성능을 위해 애니메이션을 끕니다.
애니메이션 지속 시간	처음 불러올 때 애니메이션의 지속 시간(밀리초, 기본 500 ms).
애니메이션 이징	처음 애니메이션의 이징 함수(예: cubicOut).
애니메이션 지연	처음 애니메이션이 시작되기 전 지연(밀리초).
업데이트 애니메이션 지속 시간	데이터 갱신이 들어올 때 애니메이션의 지속 시간(기본 300 ms).
업데이트 애니메이션 이징	업데이트 애니메이션의 이징 함수.
업데이트 애니메이션 지연	업데이트 애니메이션이 시작되기 전 지연(밀리초).

설정	설명
배경	카드의 단색 또는 이미지 배경.
카드 버튼 표시	툴바의 전체화면과 Data export 버튼을 켭니다.
카드 모서리 반경	모서리 둥글기(픽셀).
카드 패딩	내용과 카드 테두리 사이 간격.

Line chart는 위젯 헤더 버튼 동작을 지원합니다. 위젯 헤더에 놓는 버튼으로, 클릭하면 설정한 동작을 실행합니다.

목표: HMI 장치 하나의 temperature와 humidity 텔레메트리를 Y축을 나누고 12시간 실시간 시간 창으로 한 Line chart에 표시합니다.

사전 준비: temperature(°C)와 humidity(%)를 텔레메트리 키로 보내는 Thermo-hygrometer라는 HMI 장치.

1단계. 위젯 추가. 대시보드를 수정 모드로 열고 위젯 추가를 클릭하고 Charts 번들을 선택한 다음 Line chart를 고릅니다.

2단계. 타임윈도우 설정. 기간을 실시간 — 과거 12시간으로, 집합을 평균으로, 그룹 간격을 30분으로 정합니다.

3단계. 데이터 소스 설정. 데이터소스 유형을 장치로 정하고 Thermo-hygrometer를 선택합니다.

4단계. 시리즈 추가. 시리즈 영역에 데이터 키 두 개를 추가합니다:

키	라벨	Y축	색상	단위	소수점
temperature	Temperature	default	#F17F42	°C	1
humidity	Humidity	axis1	#7CB9E8	%	1

키마다 고급 설정을 열고 부드러운 선을 켠 다음 선 두께를 3으로 정합니다.

5단계. Y축 설정. Y축 두 개를 추가합니다:

ID	라벨	위치	단위	소수점
default	Temperature, °C	왼쪽	°C	0
axis1	Humidity, %	오른쪽	%	0

6단계. 모양과 범례 설정. 모양 영역에서 제목을 Temperature and Humidity로, 글꼴 크기를 18 px로, 굵기를 600으로 정합니다. 범례 영역에서 범례 위치를 상단으로 정하고 최소, 최대, 평균을 켭니다.

7단계. 저장. 추가를 클릭하고 필요하면 크기와 위치를 조정한 다음 대시보드 툴바의 저장을 클릭합니다.

결과: 차트가 실시간으로 갱신되는 선 두 개를 12시간 동안 보여 줍니다. 온도는 주황 선, 습도는 파란 선입니다. 범례는 시리즈마다 최소/최대/평균 통계를 보여 주고, 툴팁은 마우스를 올린 타임스탬프의 정확한 측정값을 보여 줍니다.

위젯에 데이터가 표시되지 않음

원인	해결 방법
데이터 키 이름이 틀림	키 이름이 HMI 장치가 보내는 텔레메트리 키와 같은지 확인합니다. 키 이름은 대소문자를 구분합니다.
데이터 소스나 엔티티 별칭이 틀림	올바른 HMI 장치나 개체 별명을 선택했는지 확인합니다. 개체 별명을 열어 별칭이 결과를 돌려주는지 확인합니다.
HMI 장치가 데이터를 보내지 않음	장치 → 최근 데이터를 열고 최근 값이 있는지 확인합니다. 비어 있으면 HMI 장치의 전송 설정과 액세스 토큰을 확인합니다.
선택한 시간 창에 텔레메트리가 없음	시간 범위를 늘리거나 실시간 모드로 바꿔 데이터가 있는지 확인합니다.
룰 체인 설정 오류	룰 체인에 HMI 장치 텔레메트리를 데이터베이스로 보내는 Save time series 노드가 있는지 확인합니다.
가져온 뒤 데이터 소스를 바꾸지 않음	위젯을 가져온 뒤 데이터 소스가 사용자의 HMI 장치를 가리키도록 바꾸고, 데이터 키 이름을 HMI 장치의 실제 텔레메트리 키에 맞게 바꿉니다.

데이터 갱신이 멈추거나 일부만 표시됨

원인	해결 방법
시간 창 유형이 맞지 않음	실시간 감시에는 실시간을, 정해진 날짜 범위에는 기록을 씁니다.
집계 간격이 너무 큼	더 세밀하게 보려면 그룹 간격을 줄입니다(예: 1일에서 1시간으로).
브라우저 시간대가 맞지 않음	대시보드와 HMI 장치가 같은 시간대를 쓰는지 확인합니다.

차트에 시리즈가 나타나지 않음

원인	해결 방법
데이터 키를 추가하지 않음	시리즈 영역을 열고 텔레메트리 키가 데이터 키 행으로 추가되어 있는지 확인합니다.
시리즈가 기본 숨김임	데이터 키의 고급 설정을 열고 기본 숨김을 끕니다.
Y축 지정이 틀림	시리즈가 있는 Y축 ID에 지정되어 있는지 확인합니다.