🍳 넥사크로 차트

차트(chart)는 데이터를 그래픽으로 표현한 것으로, 그 안의 데이터는 바 차트의 막대, 라인 차트의 선, 파이 차트의 조각과 같은 기호로 나타난다.

🎈 주의사항

• Chart 모듈은 기본 설치에 포함되어 있지 않아 별도로 제공되는 모듈을 받아 사용해야 한다.
• 모듈 설치 파일은 프로젝트 경로에 파일이 복사되기 때문에 필요한 프로젝트마다 nexacro chart를 설치해야 한다.
• 모듈 설치 후 프로젝트 소스를 공유하는 경우에는 파일이 복사된 상태이므로 다시 설치하지 않는다.

🎈 모듈 설치

• File > Instaill Module : Instaill Module Wizard 창을 실행한다.
  
• Install Type이 Module Package(.xmodule)로 선택하고 Next
  
• 확장자가 xmodule인 설치파일 선택하기
  
• TypeDefinition의 Objects 목록에 차트 컴포넌트 등록하기
  
• 상단에 툴바를 보고 설치확인
• 설치경로
  • [프로젝트 경로]_extlib_\Chart(폴더)
  • [프로젝트 경로]_extlib_\Chart.json
• chart 폴더에는 컴포넌트 라이브러리 파일, 도움말, 라이선스 정보 등의 파일이 설치된다.

🎈 세부속성 설정

• Information : 타이틀, 범례 등 차트의 세부적인 구성의 속성을 설정
• Valueaxes : 데이터의 수치를 표시하는 측에 대한 세부적인 속성을 설정
• Seriesset : 데이터를 차트로 표시할 때 Bar, Line, Area 형태를 설정하여 관련된 세부적인 속성을 확인하며 디자인 등을 변경할 수 있다.

🎈 BasicChart

Dataset의 데이터를 바인드하여 막대(Var), 선(Line), 영역(Area) 형태의 Chart로 표시하는 컴포넌트이다.

• Bar 차트 : 세로로 표시했을 때는 칼럼 차트, 가로로 표시했을 때는 바 차트라고 부른다.
• 바인딩 된 데이터가 없는 경우에는 샘플데이터(Semple Data)를 사용하며, Dataset 바인딩일 한 경우에는 실제 데이터(Real Data)를 사용한다.

🎁 용어

• board로 테두리 설정
• categoryaxis는 가로 축이며, 첫 번째 칼럼값이다. 가로측의 제목은 속성의 titletext값에서 수정한다.
• Valueaxes는 세로 축이며, 두 번째 칼럼값이다. 가로 축의 제목은 속성의 titletext값에서 수정한다.
• Seriesset > series0을 클릭하여 차트의 형태를 변경 가능하다.
• Bargrouping : 오브젝트를 겹쳐서 표시할 지 따로 표시할 지를 지정
• Linevisible : Line을 표시할 지 설정하는 속성
  

🎁 응용

*dataset 설정 후 콤보박스 2개를 설정해 주었다.

• 첫 번째 콤보박스 properties의 Event 선택 후 onchanged 필드 더블클릭
  
• 이벤트가 발생했을 때 Bargrouping의 속성값을 true / false 값으로 지정하는 함수
  
• linevisible(선), pointvisible(꼭지점) true 속성을 이용할 예정
  
• 두 번째 콤보박스 onchanged 필드 더블클릭, pointvisible의 true/false 값을 지정하여 Point을 표시할 지를 설정

🎈 데모사이트

BasicChart 차트 말고도 BubbleChart, PieChart, RadarChart, GaugeChart가 있지만 넥사크로 데모사이트에 다양한 Chart가 스타일부터 코드까지 구현되어 있으니 그만 알아보기로 한다.

• 넥사크로 데모 Chart : Nexacro Chart