Chart Widgets

차트 위젯은 설정할 수 있는 선 차트와 막대 차트로 시계열 데이터를 표시합니다. 여러 파이 차트로 최신 값을 표시할 수도 있습니다.

1. 연필 아이콘을 클릭해 대시보드 수정 모드로 들어갑니다.
2. 새 위젯을 추가하려면 + 기호를 클릭합니다.
3. Charts 위젯 번들을 선택합니다.
4. 원하는 차트 위젯을 고릅니다.
5. 추가를 클릭해 데이터 소스를 연결합니다.
6. 엔티티 별칭을 선택하고 텔레메트리 키를 추가합니다.
7. 추가를 클릭한 다음 변경 사항을 적용합니다.

차트 위젯은 시계열 위젯과 최신 값 위젯으로 나뉩니다. 시계열 위젯은 시간에 따른 데이터 변화를 시각화합니다. 최신 값 위젯은 여러 엔티티의 가장 최근 값을 표시합니다.

시계열 위젯은 시간에 따른 시계열 데이터의 변화를 시각화합니다. 설정 방법은 시간 창을 참고하세요.

시간에 따른 시계열 데이터의 변화를 세로 막대로 표시합니다.

시간에 따른 시계열 데이터의 변화를 이어진 선으로 표시합니다.

시간에 따른 엔티티 상태의 변화를 표시합니다(예: HMI 장치가 켜져 있는지 꺼져 있는지).

최신 값 위젯은 여러 엔티티의 속성이나 시계열 데이터의 가장 최근 값을 그립니다. 대부분 숫자 값만 지원합니다.

최신 값을 레이더 차트로 표시합니다. 숫자 값만 지원합니다.

최신 값을 폴라 영역 차트로 표시합니다.

최신 값을 파이 차트로 표시합니다(Chart.js 구현).

최신 값을 파이 차트로 표시합니다(Flot 구현).

최신 값을 도넛 차트로 표시합니다.

최신 값 차트 위젯 중 숫자가 아닌 값도 쓸 수 있는 유일한 위젯입니다.

기본 위젯 설정은 모양과 스타일(제목, 범례, 모바일 기기 설정)을 정합니다. 모든 MX On Cloud 위젯이 같은 기본 설정을 씁니다. 설정 방법은 대시보드 가이드를 참고하세요.

고급 설정은 위젯 유형마다 다르며, 차트마다 고유한 기능을 설정합니다.

1.1 스태킹 — 켜면 여러 엔티티의 데이터를 합쳐 쌓인 막대로 표시합니다. 비집계 데이터의 막대 너비, 막대 정렬, 임계값 선 두께, 그림자 크기, 글꼴 색상과 크기를 설정합니다.

툴팁 값 포맷 함수 — JavaScript 함수로 툴팁을 사용자 지정합니다. 툴팁 설정도 참고하세요.

1.2 그리드 설정 — 배경색, 그리드 테두리, 눈금, 선 두께, 표시 여부를 설정합니다.

1.3 축 설정 — 축 제목, 색상, 값 범위를 설정합니다.

1.4 눈금 포맷터 함수 — 큰 숫자의 눈금 값을 짧은 형태로 바꿉니다.

여러 기간의 과거 데이터와 값을 비교합니다. 시간 창이 기록 모드일 때만 동작합니다.

${} 패턴 문법으로 범례에 속성을 표시합니다(예: 엔티티의 활성 상태를 보여 주는 ${active}).

Line Chart의 고급 설정은 Bar Chart와 같고, 옵션이 두 개 더 있습니다:

1. 부드러운(곡선) 선 표시 — 직선 구간과 곡선 구간 사이를 전환합니다.

2. 모든 임계값 기본 선 두께 — 선 두께를 정하고 임계값 선을 설정합니다.

State Chart는 공통 설정 대부분이 Bar Chart와 같고, 다음이 더 있습니다:

• 1.1 스태킹 — Bar Chart와 같습니다.
• 1.2 부드러운(곡선) 선 표시 — Line Chart와 같습니다.
• 1.3 개별 포인트 호버 — 마우스를 올렸을 때 데이터 점을 표시하거나 숨깁니다.
• 1.4 스태킹 모드에서 누적 값 표시 — 누적 합계를 표시합니다.

1.5 툴팁 값 포맷 함수 — 툴팁 표시를 사용자 지정합니다.

1.6 그리드 설정 — Bar Chart와 같습니다.

1.7 축 설정 — Bar Chart와 같습니다.

1.8 눈금 포맷터 함수 — Bar Chart와 같습니다.

Bar Chart와 같습니다. 과거 데이터와 비교합니다.

Bar Chart와 같습니다.

파이 반지름을 사용할 수 있는 공간의 비율(0~1)로 정하거나 픽셀 값을 바로 씁니다.

내부 반지름을 정해 도넛 모양 파이 차트를 만듭니다.

데이터가 바뀔 때 부드럽게 전환되도록 합니다.

기울기(0~1)를 조정해 시점을 세로에서 가로로 바꿉니다.

스트로크 색상, 두께, 라벨 표시 여부를 설정합니다.

테두리 색상과 두께를 설정합니다.

범례 라벨의 글꼴 색상과 표시 여부를 설정합니다.