HTML5 기반의 데이터 인포그래픽 컴포넌트
한번의 생성으로 다양한 차트를 표현할 수 있습니다.
웹 접근성을 준수하며, 섬세한 디자인 변경을 지향합니다.

1. General

INSTALL

1. DOWNLOAD

웹포넌트 제품(그리드, 차트)를 구매 혹은 트라이얼을 다운로드 후 압축을 풀어 줍니다.

2. PROJECT STORE

압축이 풀어진 폴더를 적용할 프로젝트 디렉토리에 추가 합니다.

3. LICENSE

제품을 구매하신 분은 웹포넌트 서포트 페이지 내 마이페이지에서 라이센스를 복사합니다.

트라이얼을 다운받으신 분은 메일에 함께 동봉되어진 라이센스를 복사합니다.

자신의 프로젝트 ROOT 에 webponent.licenseKey.js 파일을 만들고 그 파일에 복사한 라이센스를 붙여넣기 합니다.

  • 그리드와 차트의 라이센스는 서로 호환이 되지 않습니다. 별도로 라이센스를 구매하셔야 합니다.
  • 자세한 내용은 라이센스 등록 메뉴를 확인하시면 됩니다.

4. EXPORT MODULE GUIDE

1. 필수 항목

- 외부 항목 기본경로

installMidnighttruejs
${ROOT}/WEB-INF/webponent/

- 서블릿 등록 (web.xml)

installMidnighttruejs
<servlet>
	<servlet-name>ExportConroller</servlet-name>
	<servlet-class>webponent.export.controller.ExportController</servlet-class>
</servlet>
<servlet-mapping>
	<servlet-name>ExportConroller</servlet-name>
	<url-pattern>/WEB-APP/export/*</url-pattern>
</servlet-mapping>

- export.config.propertiesWebponent.export module에서 사용되는 Class 경로, 필요 옵션 설정

- webponent.comm.export.js소스코드내 submitObject.url 을 web.xml에 매핑된 경로의 image로 설정

ex : /WEB-APP/export/image

2. PDF

- PhantomJS driver
WEB-INF/webponent/export/js/capture.js

- PDF template <XML>
WEB-INF/webponent/export/pdf-template.xml


3. 3rd Parties

installMidnighttruejs
${ROOT}/WEB-INF/lib/

- Jxl
- batik
- poi
    poi-ooxml
    poi-ooxml-schemas (로컬 테스트할 때 없으면 에러)

 

USE

1. USE JQUERY 

webPonent Chart는 jquery기반이므로 관련 파일을 먼저 로드해야 합니다.

installMidnighttruejs
<script src="jquery.min.js"></script>

2. USE raphaeljs

IE7,8 에서 동작하기 위해 raphaeljs 라이브러리도 로드합니다.

raphaeljs reference 이동

installMidnighttruejs
<script src="raphael.js"></script>

3. USE COMMON JS 

comm/webponent.comm.common.js 파일은 자주사용하는 formatting function들이 정의되어 있습니다.

예를 들어 1000의 숫자를 1,000 으로 표시되게하는 format() 등이 정의되어 있는데

이를 사용하지 않는다면 로드시키지 않아도 됩니다.

installMidnighttruejs
<script src="comm/webponent.comm.common.js"></script>

4. USE CHART and(or) VISUALIZATION JS 

일반 Chart는 webponent.chart.js

Visualization은 webponent.visual.[visualization type].js 명을 사용합니다.

installMidnighttruejs
<script src="webponent.chart.js"></script>
<script src="webponent.visual.pie.js"></script>