컴포넌트 기반의 차트, 그리드, 가상키보드 솔루션으로 온라인 구매 가능합니다.

UI component 솔루션

구매하기 트라이얼
Webponent Chart Webponent Grid Webponent Virtual key

Html5 기반의 데이터 인포 그래픽 컴포넌트

한번의 생성으로 다양한 차트를 표현할 수 있는, 웹접근성을 준수하는 솔루션

특징

손쉬운 사용 방법과 트렌디한 디자인을 겸비한
UI 컴포넌트 솔루션으로 한 단계 더 높은 웹 서비스를 제공합니다.

Multi Area Chart in One Element


한번의 생성으로 단일 시리즈, 콤비네이션 시리즈, 멀티축 적용은 물론 메인 영역과 다수 개의 서브 영역을 분리하여 차트를 생성할 수 있습니다.

타임슬라이스


그래프 흐름을 애니메이션 효과와 함께 재생할 수 있으며, 웹접근성에 따른 일시 정지와 정지가 가능하고, 구간 설정으로 원하는 구간의 그래프 추이를 파악할 수 있습니다.

디테일한 설정 


기획자의 기획력과 디자이너의 창의력을 만족 시킬 수 있도록 색채, 볼드, 글꼴 등 스타일과 관련된 설정부터 애니메이션 종류까지 섬세한 설정을 제공합니다.

전용 에디터 제공


차트 적용에 앞서 Webponent Publisher를 통하여 실시간으로 차트 제작 및 미리보기 기능을 제공합니다.

다양한 시리즈


막대, 선, 캔들 등의 시리즈 뿐만 아니라 여러가지 Form을 제공합니다.

웹접근성 준수


도형 및 패턴 적용으로 웹접근성을 준수합니다.

크로스 브라우징


Chrome, safari, firefox, 최신의 IE뿐만 아니라 IE8부터 지원합니다.

멀티 디바이스


하나의 소스로 PC, Mobile, Tablet 등 Html5가 지원되는 모든 환경(Browser)에서 완벽하게 동작합니다.

소개영상

Webponent Chart와 Grid 제품을 동영상으로 만나보세요.

Video Player
{"type":"page","settingURL":"./pages/page_setting.html","theme":"solution_theme","editView":"desktop","desktop":{"width":"100%","padding":{"top":"0","bottom":"0","left":"0","right":"0"},"responsive":false},"version":"2.0.0","tablet":{"width":"768px","padding":"desktop"},"mobile":{"width":"100%","padding":"desktop"},"backgroundColor":"Not Specified","styles":{"font":{"size":"","family":""},"lineHeight":""},"libraries":{"js":[],"css":[]},"canonicalTag":"","components":{"video-uuhm0rfyr":{"type":"video","settingName":"video","video":{"videoURL":"/WEB-APP/webponent-press2.0/img/no-video.png","useDirect":true,"useDirectUrl":false,"directSource":"<iframe width=\"100%\" height=\"100%\" style=\"border:none;\" src=\"https://www.youtube.com/embed/oR0a7xeMbjQ\" title=\"webPonent CHART&amp;GRID 소개 영상\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>","directUrlSource":null,"position":"Left","width":"100%","height":"100%","title":"","mimeType":"video/mp4","mobileSize":false,"gap":{"top":"0","right":"0","bottom":"0","left":"0"},"poster":"","posterName":""},"backgroundColor":"transparent","theme":"m-grid-padding-40"}}}
데모

기본기능 차트는 막대, 선, 영역 차트 등을 포함하며,
파이, 트리맵, 멀티 차트는 Visualization&Multi에 속합니다.

캔들 차트 - 시계열

더 많은 데모 보러가기

Title

Sub title

data title

description

기능

세부기능을 확인해 보세요.

차트 종류

가로/세로 막대차트, 선차트, 면차트, 점(Plot)차트, 시고저 종차트(Candle, Hloc), 멀티축차트, 영역분리차트(Main+Sub[다수개]),
다중시리즈 차트(막대+선, 선+면+점 등), 특정 값 기준 상하락 선차트, 쌓은 막대 차트, 꺾인선 차트, 꺽인면 차트, 파이, 트리맵,
Horizon차트, 코리아 맵, Scattor Plot 등

차트 영역 분리

하나의 SVG로 영역이 분리된 차트를 제작할 수 있음
한번의 생성으로 두개 이상의 차트를 만들어내는 효과를 얻을 수 있음
각 영역별로 멀티 축, 다중 시리즈 적용도 가능
단, 동일한 x축을 기준으로 생성됨

데이터 연동

웹포넌트 차트는 Ajax로 통신함
JSON 형태의 Array나 ‘I’로 구분된 Text 형태의 데이터를 읽어올 수 있음
AJAX가 아닌 JSON형태의 ARRAY데이터를 차트 초기화 시에 클라이언트 단에서 직접 포함할 수 있음

추가 기능
  • 각 시리즈별 다양한 형태(상하락표현, 쌓은형태, 겹치기, 최소값 설정 등)와 선과 면 시리즈에서는 틱(5가지) 제공
  • 차트/영역/축의 색상 및 두께 마우스 오퍼시 활성화 스타일 등 사용자가 원하는 디자인 설정 가능
  • 십자선표시(색상, 두께, 유무), X/Y축 라벨의 포맷변경, 라벨폰트 스타일, Y축 위치 지정, 툴팁의 외부 정의 기능으로 좀더 세밀한 데이터 표현 가능
  • 동적데이터 표현이 가능하며, 시리즈 변경 및 옵션, 스타일도 동적으로 변경 가능
  • 시계열(Time Slice)을 통하여 차트의 시간적 흐름을 표현할 수 있음
  • 막대시리즈에 아이템 렌더러를 통하여 사용자가 원하는 형태를 직접 만들 수 있음
  • 전용에디터를 통하여 시뮬레이션 가능하고, 저장/보관하여 추후 재사용하기 편리하도록 툴 제공(플러스 에디션 이상 제공)
  • 이미지로 변환이 가능하며, PC 다운로드 가능(트라이얼 다운로드시 batik jar로 적용된 예제 포함되어 있음)
  • 웹접근성을 위한 패턴 이미지 적용이 가능하며, 캔들과 HLOC, 막대 차트들의 상하락 표현에 +/-, ▲/▼ 기호를 출력하여 접근성 향상에 추가적인 효과를 줄 수 있음
  • PC, Mobile, Tablet 등 다양한 기기에서 동일한 차트 제공
{"type":"page","settingURL":"./pages/page_setting.html","theme":"solution_theme","editView":"desktop","desktop":{"width":"100%","padding":{"top":"0","bottom":"0","left":"0","right":"0"},"responsive":false},"version":"2.0.0","tablet":{"width":"768px","padding":"desktop"},"mobile":{"width":"100%","padding":"desktop"},"backgroundColor":"Not Specified","styles":{"font":{"size":"","family":""},"lineHeight":""},"libraries":{"js":[],"css":[]},"canonicalTag":"","components":{"list-uynrxy44z":{"type":"list","settingName":"list","theme":"none chart-list-style"},"table-ubu2es15n":{"type":"table","settingName":"table","dataTable":{"use":false,"keys":[],"loadedData":null},"markup":{},"style":{"table":{"backColor":"Not Specified","line":{"style":"","width":"0","color":"Not Specified"}},"cell":{"text":{"align":"left","style":"normal","color":"Not Specified"},"backColor":"Not Specified","line":{"style":"","width":"0","color":"Not Specified"}}},"mobile":{"type":"#typeNone","cell":[]},"origincol":"<col style=\"width:29%;\"><col style=\"width:71%;\">","mobileColWidth":"<col style=\"width:29%;\"><col style=\"width:71%;\">","theme":"none table_webponent_f","isDynamicTr":false}}}

사용법

쉽고 간편한 방법으로 차트를 이용해보세요.

구매 혹은 트라이얼

제품을 구매하거나 무료 트라이얼을 다운로드 받습니다.

라이선스 키 발급

구매 혹은 트라이얼 다운로드를 통해서 라이센스키를 발급받습니다.

루트 경로에 추가

구매시 ‘webponent licenseKey.js’ 파일을 루트 경로에 생성하며 라이센스키(마이페이지에서 확인)를 복사하여 붙여 넣습니다. 트라이얼 다운로드시 압축파일내 ‘webponent.licenseKey.js’를 복사하여 루트 정보에 추가합니다.

초기화

HTML과 Javascript 코드를 통해서 차트를 초기화 시킵니다.

확장

플러그인을 사용하여 확장기능을 추가합니다. 웹포넌트가 제공하는 전용에디터에서 샘플코드를 참조할 수 있습니다.

{"type":"page","settingURL":"./pages/page_setting.html","theme":"solution_theme","editView":"mobile","desktop":{"width":"100%","padding":{"top":"0","bottom":"0","left":"0","right":"0"},"responsive":false},"version":"2.0.0","tablet":{"width":"768px","padding":"desktop"},"mobile":{"width":"100%","padding":"desktop"},"backgroundColor":"Not Specified","styles":{"font":{"size":"","family":""},"lineHeight":""},"libraries":{"js":[],"css":[]},"canonicalTag":"","components":{"image-uz5uvgcb4":{"type":"image","settingName":"image","image":{"sizeType":"custom","originalWidth":1200,"originalHeight":314,"widthUnit":"px"},"setting":{"maintainRatio":true},"theme":"none"},"image-u7kluo9no":{"type":"image","settingName":"image","image":{"sizeType":"custom","originalWidth":60,"originalHeight":60,"widthUnit":"px"},"setting":{"maintainRatio":true},"theme":"none"},"image-ukc070h86":{"type":"image","settingName":"image","image":{"sizeType":"custom","originalWidth":100,"originalHeight":100,"widthUnit":"px"},"setting":{"maintainRatio":true},"theme":"none"},"image-uhugj6siq":{"type":"image","settingName":"image","image":{"sizeType":"custom","originalWidth":100,"originalHeight":100,"widthUnit":"px"},"setting":{"maintainRatio":true},"theme":"none"},"image-u7n7alzxo":{"type":"image","settingName":"image","image":{"sizeType":"custom","originalWidth":50,"originalHeight":50,"widthUnit":"px"},"setting":{"maintainRatio":true},"theme":"none"},"image-u0gmmeqor":{"type":"image","settingName":"image","image":{"sizeType":"custom","originalWidth":60,"originalHeight":60,"widthUnit":"px"},"setting":{"maintainRatio":true},"theme":"none"}}}

전용에디터

퍼블리셔는 프로토타입, 샘플소스 작성 등에 특화된 실시간 웹 코드 에디터 입니다.
웹포넌트 차트·그리드의 각 기능에 해당하는 샘플 코드를 오픈하고 있습니다.

구분

설명

1

웹포넌트 퍼블리셔는 웹브라우저에서 웹포넌트 그리드 및 차트의 샘플 코드를 볼 수 있는 코드 뷰어 및 편집 서비스 툴 입니다.

2

회원가입을 하면 직접 편집 기능까지 사용할 수 있습니다.

3

각 상황에 맞는 HTML, CSS, JavaScript의 샘플 코드가 정리되어 있습니다. 편집창 크기 조절도 할 수 있어 편리합니다.

4

ajax 데이터 호출, 이벤트 추가, 크기 설정, 로우 조작 등 60개 이상의 메뉴가 있습니다.

5

실제 제품에서 바로 결과를 확인할 수 있습니다. 부드러운 스크롤과 빠른 속도를 확인해 보세요.

기능소개

  • 구분

    명칭

    설명

    1

     라이브러리 표시

    마우스를 올려 놓았을때 현재 로드된 라이브러리들을 볼 수 있습니다. X버튼을 이용해서 현재 샘플에 등록된 라이브러리를 해제할 수 있습니다.

    2

     라이브러리 추가버튼

    샘플에 새로운 라이브러리를 추가할 수 있습니다. 추가한 라이브러리는 "라이브러리 표시"버튼에서 확인할 수 있습니다.

    3

     리셋버튼

    샘플소스를 삭제하고, 등록된 모든 라이브러리들이 해제됩니다.


    4

     HTML 내보내기

    HTML로 생성된 샘플의 URL을 얻을수 있습니다.

    5

     에디터 숨기기 버튼

    필요없는 에디터를 숨김으로써 작업공간을 넓힐 수 있습니다.

    6

     고객지원 버튼

    피드백 사이트로 이동합니다.

    7

     전체소스 보기 버튼

    각 에디터에 나뉘어져있는 소스를 하나로 합쳐서 볼 수 있습니다.

    8

     샘플 전체 화면

    샘플을 새창에 띄웁니다.

  • 구분

    명칭

    설명

    1

    css 편집기

    각각의 소스를 편집할 수 있습니다. 편집한 소스는 실시간으로 미리보기 화면에 적용됩니다.

    2

     HTML 편집기

    3

    JAVASCRIPT 편집기


    4

     데이터편집기

    자바스크립트 편집기에서 AJAX를 이용해서 데이터를 가져올 경우 데이터 구조를 살펴볼수 있는 화면 입니다. 또는 새로운 데이터 소스 URL을 생성할 수 있습니다.

    5

     미리보기 화면

    작성한 샘플을 실시간으로 렌더링 합니다.

    6

     샘플파일 선택 메뉴

    카테고리로 분류된 샘플파일을 로드할 수 있습니다.
{"type":"page","settingURL":"./pages/page_setting.html","theme":"solution_theme","editView":"desktop","desktop":{"width":"100%","padding":{"top":"0","bottom":"0","left":"0","right":"0"},"responsive":false},"version":"2.0.0","tablet":{"width":"768px","padding":"desktop"},"mobile":{"width":"100","padding":"desktop"},"backgroundColor":"Not Specified","styles":{"font":{"size":"","family":""},"lineHeight":""},"libraries":{"js":[],"css":[]},"canonicalTag":"","components":{"image-umte74zv8":{"type":"image","settingName":"image","image":{"sizeType":"custom","originalWidth":1200,"originalHeight":615,"widthUnit":"px"},"setting":{"maintainRatio":true},"theme":"none"},"table-u70okrr8v":{"type":"table","settingName":"table","dataTable":{"use":false,"keys":[],"loadedData":null},"markup":{},"style":{"table":{"backColor":"Not Specified","line":{"style":"","width":"0","color":"Not Specified"}},"cell":{"text":{"align":"left","style":"normal","color":"Not Specified"},"backColor":"Not Specified","line":{"style":"","width":"0","color":"Not Specified"}}},"mobile":{"type":"#typeNone","cell":[]},"origincol":"<col style=\"width:7%;\"><col style=\"width:93%;\">","mobileColWidth":"<col style=\"width:50%;\"><col style=\"width:50%;\">","theme":"cms_table_default"},"image-u4vdx2hkb":{"type":"image","settingName":"image","image":{"sizeType":"custom","originalWidth":1200,"originalHeight":716,"widthUnit":"px"},"setting":{"maintainRatio":true},"theme":"none"},"table-u4gtforwc":{"type":"table","settingName":"table","dataTable":{"use":false,"keys":[],"loadedData":null},"markup":{},"style":{"table":{"backColor":"Not Specified","line":{"style":"","width":"0","color":"Not Specified"}},"cell":{"text":{"align":"left","style":"normal","color":"Not Specified"},"backColor":"Not Specified","line":{"style":"","width":"0","color":"Not Specified"}}},"mobile":{"type":"#typeNone","cell":[]},"origincol":"<col style=\"width:7%;\"><col style=\"width:28%;\"><col style=\"width:65%;\">","mobileColWidth":"<col style=\"width:33%;\"><col style=\"width:33%;\"><col style=\"width:34%;\">","theme":"cms_table_default"},"button-u1vypmw6u":{"type":"button","settingName":"button","option":{"newWindow":"false","text":"차트 퍼블리셔 사용해보기","serverText":"","popup":{"use":false,"width":"500","height":"400","x":"0","y":"0","opt":[true,true,false,false,true,false],"title":"","layer":false,"layerSize":"","target":"_self"},"download":false},"style":{"backgroundColor":"Not Specified","border":{"width":"Not Specified","color":"Not Specified","style":"solid","radius":"2"},"text":{"size":"12","style":"normal","color":"Not Specified","family":"Nanum Gothic"},"padding":"5","align":"center","width":"fit"},"btnEvent":{"use":false,"target":[""],"type":"click","animation":["toggle"]},"theme":"none"},"tab-uwxsi3eqe":{"type":"tab","settingName":"tab","defaultTabIndex":0,"link":{"use":[false,false],"url":["#","#"]},"fullWidth":false,"defaultTabIndexServerVar":"","theme":"none chartTab"},"image-uhoi8fx8w":{"type":"image","settingName":"image","image":{"sizeType":"custom","originalWidth":1200,"originalHeight":716,"widthUnit":"px"},"setting":{"maintainRatio":true},"theme":"none"},"table-usx6h402h":{"type":"table","settingName":"table","dataTable":{"use":false,"keys":[],"loadedData":null},"markup":{},"style":{"table":{"backColor":"Not Specified","line":{"style":"","width":"0","color":"Not Specified"}},"cell":{"text":{"align":"left","style":"normal","color":"Not Specified"},"backColor":"Not Specified","line":{"style":"","width":"0","color":"Not Specified"}}},"mobile":{"type":"#typeNone","cell":[]},"origincol":"<col style=\"width:7%;\"><col style=\"width:28%;\"><col style=\"width:65%;\">","mobileColWidth":"<col style=\"width:33%;\"><col style=\"width:33%;\"><col style=\"width:34%;\">","theme":"cms_table_default","isDynamicTr":false}}}

제품 및 기술 관련 문의/상담이 필요하신가요?

제품 문의하러가기