Properties¶
목적¶
Graph UI의 속성을 정의
주요 단계¶
1. AmSerialChartComposite Property - Properties¶
<사진 1> AmSerialChartComposite Property - Properties 화면
<사진 2> AmSerialChartComposite Property 상세 화면
| PROPERTIES | MEAN |
|---|---|
| WIDTH | Graph 전체 가로 길이 조절 |
| HEIGHT | Graph 전체 세로 높이 조절 |
| TITLE | Graph 타이틀 텍스트 설정 |
| VISIBLE | Graph 보일 지 여부 설정 ( TRUE: 보이게 설정 / FALSE: 안보이게 설정 ) |
| STYLECLASS | Graph에 적용할 CSS 설정 |
| SHOWLEGEND | 범례 보일 지 여부 설정 ( TRUE: 보이게 설정 / FALSE: 안보이게 설정 ) |
| ROTATE | Graph 90도 회전 여부 설정 ( TRUE: 90도 회전 / FALSE: 회전 안함 ) |
| STARTDURATION | Graph가 등장하는데 걸리는 시간 설정 |
| LEGENDPOSITION | 범례 위치 설정 ( Top, Bottom, Left, Right ) |
| LEGENDALIGN | 범례 정렬 설정 ( Left, Center, Right ) |
| COLUMNWIDTH | Graph 너비 설정 |
| LEGENDFONTSIZE | 범례 Description Text Size 조절 |
| MARGINTOP | Graph 상단 여백 설정 |
| MARGINLEFT | Graph 좌측 여백 설정 |
| MARGINRIGHT | Graph 우측 여백 설정 |
| MARGINBOTTOM | Graph 하단 여백 설정 |
| AUTOMARGINS | 자동 여백 설정 ( TRUE: 설정 / FALSE: 설정 안함 ) |
| ANGLE | Graph를 바로보는 Angle 설정 ( DEPTH3D 값이 0이면 ANGLE 변화 없음 ) |
| DEPTH3D | 입체적으로 보이는 정도 조절 |
| PLOTAREABORDERALPHA | 그림 영역 테두리 투명도 설정 |
| PLOTAREABORDERCOLOR | 그림 영역 테두리 색상 설정 |
| PLOTAREAFILLALPHAS | 그림 영역 색상 투명도 설정 |
| PLOTAREAFILLCOLORS | 그림 영역 색상 설정 |
| BACKGROUNDALPHA | Graph 배경 색상 투명도 설정 |
| BACKGROUNDCOLOR | Graph 배경 색상 설정 |
| BORDERALPHA | Graph 배경 테두리 투명도 설정 |
| BORDERCOLOR | Graph 배경 테두리 색상 설정 |
| LEGENDMARKERSIZE | 범례 Icon Size 조절 |
| LEGENDVALUEWIDTH | 범례 가로 영역 조절 ( 범례 간 간격 조절 시 사용 ) |
| LEGENDVERTICALGAP | 범례 세로 위치 조절 |
| LEGENDHORIZONTALGAP | 범례 가로 위치 조절 |
| SHOWCHARTSCROLLBAR | 상단에 Graph 특정 구간 확대 Scrollbar 생성 ( TRUE: 설정 / FALSE: 설정 안함 ) |
| UPDATEONRELEASEONLY | Scrollbar를 Drop시에만 동작하도록 설정 ( TRUE: 설정 / FALSE: 설정 안함 ) |
| ZOOMOUTTEXT | ShowChartScrollbar = True 일 때 ZoomOut Button Description Text |
| ZOOMOUTBUTTONALPHA | ZoomOut Button 및 Text 영역 투명도 설정 (0이면 색상 변화 없음) |
| ZOOMOUTBUTTONCOLOR | ZoomOut Button 및 Text 영역 색상 설정 |
| ZOOMOUTBUTTONPADDING | ZoomOut Button 및 Text 영역 크기 조절 |
| ZOOMOUTBUTTONROLLO | ZoomOut Button Hover 시 투명도 조절 (0이면 변화 없음) |
| LEGENDCOLOR | 범례 Text 색상 설정 |
2. AmSerialChartComposite Property - Rotate¶
<사진 3> Rotate True/False 비교 화면
<사진 4> Rotate 적용 결과
Graph를 회전 시킬 지 여부를 설정.
Rotate 값이 'True' 또는 'False'에 따라 Graph가 90도 회전된 형태로 표시됨.
3. AmSerialChartComposite Property - Angle & Depth3D¶
<사진 5> Angle & Depth3D 설정 화면
Depth3D를 통해 Graph를 입체적으로 보이도록 설정 가능.
Angle을 통해 입체적인 Graph를 바라보는 각도를 설정 가능.
Angle, Depth3D 값을 각각 50으로 설정한 경우 입체적인 그래프가 정면이 아닌 방향에서 표현됨.
4. AmSerialChartComposite Property - ShowChartScrollbar & ZoomOutText¶
<사진 6> ShowChartScrollbar 설정 화면
ShowChartScrollbar = true 설정 시 상단에 Scrollbar 생성.
Scrollbar를 통해 화면 확대 가능하며 확대 시 ZoomOutText가 우측 상단에 생성됨.
1) ZoomOutButtonColor & ZoomOutButtonAlpha & TextColor¶
<사진 7> ZoomOutButton 색상 및 투명도 설정
ZoomOutButtonColor = 'red'
ZoomOutButtonAlpha = 0.5
TextColor = 'blue'
배경이 붉은색, 투명도 0.5, Text는 파란색으로 표시됨.
2) ZoomOutButtonPadding & ZoomOutButtonRollo¶
<사진 8> ZoomOutButtonPadding 적용
<사진 9> ZoomOutButtonRollo 적용
ZoomOutButtonPadding 값을 '50'으로 설정 시 영역 확대.
ZoomOutButtonRollo 값을 설정 시 Hover 시 더 선명하게 표시됨.
5. AmSerialChartComposite Property - PlotArea¶
<사진 10> PlotArea 설정 화면
Graph 그림 영역 설정 가능.
plotAreaFillColors = 'violet' 설정 시 배경이 보라색으로 변경됨.
plotAreaBorderColor = 'red' 설정 시 붉은색 테두리 생성.
6. AmSerialChartComposite Property - BackGround¶
<사진 11> Background 설정 화면
Graph 전체 배경 영역 설정 가능.
BackGroundColor = 'orange' 설정 시 전체 배경이 주황색으로 변경.
BackgroundColor = 'blue' 설정 시 가장자리에 파란색 테두리 생성.
7. AmSerialChartComposite Property - Legend¶
Graph의 Legend 영역 설정 가능.
1) ShowLegend¶
<사진 12> ShowLegend True 설정
<사진 13> ShowLegend False 설정
ShowLegend = true → 범례 표시
ShowLegend = false → 범례 숨김
2) LegendMarkerSize & LegendFontSize¶
<사진 14> Legend 기본 크기
<사진 15> Legend 크기 변경
LegendMarkerSize, LegendFontSize 값 변경 시 Icon 및 Text 크기 변경됨.
3) LegendColor¶
<사진 16> LegendColor 기본
<사진 17> LegendColor 변경
LegendColor = 'violet' 설정 시 범례 Text 색상이 보라색으로 변경됨.
8. AmSerialChartComposite Property - Margin¶
<사진 18> Margin 미설정
<사진 19> Margin 설정
Margin 값 설정 여부에 따라 여백 차이 발생.
AutoMargins = 'True' 설정 시 자동 여백 적용.
9. AmSerialChartComposite Property - StartDuration¶
<사진 20> StartDuration 예시 1
<사진 21> StartDuration 예시 2
<사진 22> StartDuration 예시 3
StartDuration 값을 설정하면 해당 시간 동안 좌측 → 우측 순서로 Graph가 순차적으로 등장.