현재 최신 버전 : ComponentOne 2023 v3 | Wijmo 2023 v2 | Spread.NET v17 | SpreadJS v17 | ActiveReports.NET v18 | ActiveReportsJS v4.2 | Forguncy v9 | DsExcel v7

    엔터프라이즈 앱을 위한 80+ 고성능 JavaScript 차트

    List of Services

      전세계 개발자가 인정한 고성능의 확장 가능하며, 종속적이지 않은 최고의 JavaScript 데이터 그리드

      • 인기있는 Angular, React, Vue.JS 완벽 지원
      • 수 십 가지의 차트 속성과 옵션 지원
      • 다양한 특수 차트 지원
      • 새로운 손익분기점 차트 추가

      80가지 이상의 JavaScript FlexChart

      기본적인 선형 차트에서 레이더 및 극좌표 차트에 이르기까지 다양하고 완벽한 데이터 분석 시각화 컨트롤을 제공합니다. 차트 상호 작용, 분석, 주석 기능들이 모두 기본 제공됩니다.

      Excel 유사한 친숙한 기능

      Excel과 같은 키보드 지원, 데이터 집계, 셀 병합, 별 크기 조정 및 셀 고정 기능은 최종 사용자에게 Excel과 유사한 작업 환경을 제공합니다.

      TypeScript로 작성된 JavaScript DataGrid

      TypeScript를 사용하면 객체지향 언어인 C#/Java의 느낌으로 개발이 가능하며, 디자인 타임 오류 검사 및 완전한 IntelliSense 기능을 얻을 수 있습니다.

      작은 설치 공간으로 성능 향상

      FlexGrid는 성능에 영향을 주지 않고 로드 시간을 최소화하여 웹 애플리케이션의 사이즈를 작게 유지할 수 있습니다.

      최고의 프레임워크 지원

      특정 프레임워크에 구애 받지 않도록 구축된 Wijmo는 Angular, AngularJS, ReactJS, Vue.js , Vue3 Beta 및 Knockout에 대한 완전한 지원을 포함합니다.

      보안 수준

      Wijmo는 CSP(콘텐츠 보안 정책)를 준수하며, 보안 기능을 손상시키지 않고, JavaScript 애플리케이션에서 원활하게 작동합니다.

      FlexChart 데모

      JavaScript 막대 차트

      • 가로 막대형

        기본 가로 막대형 차트 내에서 여러 데이터 계열, 애니메이션, 선택 항목 및 도구 설명을 마우스로 구현합니다.

        데모

      • 누적 가로 막대형

        JavaScript 막대 차트에 데이터 포인트를 누적합니다. 가로 막대를 사용하여 데이터 포인트를 서로 위에 플로팅합니다. 

        데모

      • 100% 기준 누적 가로 막대형

        각 값이 합계에 기여하는 백분율을 비교합니다. 누적된 각 열의 누적 비율은 항상 합계가 100입니다.

        데모

      • 세로 막대형

        주로 세로 방향을 사용하는 막대 차트와 유사합니다. JavaScript 세로 막대형 차트는 세로 막대를 사용하여 범주 전체의 값을 비교합니다.

        데모

      • 누적 세로 막대형

        세로 막대를 사용하여 기둥형 차트에 데이터 포인트를 쌓고 그립니다. 차트 값을 누적하려면  FlexChart  누적  속성을 설정합니다.

        데모

      • 100% 기준 누적 세로 막대형

        누적된 각 열의 누적 비율은 항상 합계가 100입니다. 각 값이 합계에 기여하는 백분율을 비교합니다. 

        데모

      JavaScript 라인 & 영역 차트

      • 라인 차트

        기본 JavaScript 라인 차트를 사용하여 장단기 데이터의 변화를 표시하고 많은 양의 데이터와 잘 작동합니다.

        데모

      • 라인 마커가 포함된 누적 라인 차트

        꺾은선형 차트에 시리즈를 누적합니다. 누적 선 차트는 선이 각 지점에서 누적되기 때문에 선이 겹치지 않는 선 차트입니다.

        데모

      • StepLine 차트

        StepLine 차트는 특정 지점에서 변경 사항을 시각화하는 데 도움이 됩니다. 데이터 포인트는 수직선과 수평선으로 연결됩니다.

        데모

      • 스플라인 차트

        스플라인 차트는 부드러운 선으로 데이터 요소를 연결하고 숫자, 범주, 날짜/시간 또는 로그 축을 사용하여 데이터를 그립니다.

        데모

      • 영역형 차트

        동일한 간격으로 추세를 반영하도록 시간 종속 데이터를 나타내지만 유사한 범주의 추세를 보여 주기 위해 선 아래 영역을 채웁니다.

        데모

      • 범위 영역형 차트

        유사한 범주의 추세를 나타내려면 선 아래 영역을 채우십시오. 지정된 시간 동안 데이터 값의 변화를 표시합니다.

        데모

      JavaScript 분산형 & 버블 차트

      XY 산점도 차트

      x축과 y축을 따라 데이터 포인트와 일련의 숫자 데이터 사이의 상관관계를 보여줍니다. 분산형 차트는 값을 단일 데이터 포인트로 결합하고 고르지 않은 간격 또는 클러스터를 표시합니다.

      데모

      버블 차트

      거품형 차트를 사용하여 풍부하고 시각적으로 매력적인 데이터 모델링 및 재무 차트를 만듭니다. 이 JavaScript Flexchart 유형을 사용하면 데이터 계열을 차트 공간에서 다양한 크기의 기호 집합으로 표시할 수 있습니다.

      데모

      재무 차트

      캔들스틱 차트

      캔들스틱 차트에서 재무 데이터를 시각화합니다. 세로 막대는 해당 날짜의 높음 및 낮음 값을 나타냅니다.

      데모

      HLOC 차트

      HLOC는 시간 경과에 따른 금융 상품 가격의 움직임을 보여줍니다.

      데모

      JavaScript 원형 & 선버스트 차트

      • 원형 차트

        JavaScript 파이 차트는 전체의 일부가 어떻게 100%가 되는지 보여줍니다. 기능에는 조각 폭발, 파이 조각 선택 및 파이 회전이 포함됩니다.

        데모

      • 도넛 차트

        자바스크립트 원형 차트의 내부 반지름 속성을 설정하여 도넛 모양으로 만듭니다. 모든 원형 차트 사용자 지정을 포함합니다.

        데모

      • 선버스트 차트

        루트 노드(가운데)에서 바깥쪽으로 하위 계층으로 계층적 데이터를 시각화합니다. 내부 원의 세그먼트는 상위 각도 스윕 내에 있는 외부 원 세그먼트의 상위입니다.

        데모

      • 멀티 원형 차트

        FlexPie를 사용하여 동일한 데이터 소스를 사용하여 여러 원형 차트 "시리즈"를 만들어 단일 차트에서 더 많은 데이터를 시각화합니다. 특히 의도가 전체에 상대적인 한 섹션을 표시하려는 경우 데이터를 표시하는 효과적인 방법입니다.

        데모

      방사형 & 극좌표 차트

      • 방사형 차트

        임의 개수의 변수가 있는 다변량 관찰을 표시합니다. JavaScript 레이더 차트는 값과 각도 측면에서 데이터를 시각화합니다.

        데모

      • 채워진 방사형 차트

        기본 방사형 차트의 선 사이 영역 채우기, FlexRadar 컨트롤 이 차트 섹션을 채우고 차트 유형 속성을 영역으로 설정하여 값 및 각도 측면에서 데이터를 시각화합니다.

        데모

      • 극좌표형 차트

        임의 개수의 변수가 있는 다변량 관찰을 표시하는 원형 그래프를 만듭니다. 상황의 여러 양적 또는 질적 측면을 시각적으로 비교합니다.

        데모

      특수 차트

      • 손익 분기 차트

        손익분기점 차트는 총 비용이 판매량과 일치하는 판매량 수준을 보여줍니다. 차트의 세로 축에는 수익, 고정 비용 및 가변 비용이 표시되고 가로 축에는 볼륨이 표시됩니다.

        데모

      • 그룹화된 TreeMap 차트

        상대적 수량과 결합된 계층적 정보를 표시합니다. 계층적 트리 구조 데이터를 중첩된 사각형 집합으로 강조 표시하고 데이터 집합의 이상 현상을 분석하는 데 도움을 줍니다.

        데모

      • 오차 막대 차트

        측정의 불확실성을 나타내기 위해 데이터의 변동성을 그래픽으로 나타냅니다. "오류"는 실수가 아니라 내장된 불확실성을 나타내는 데이터 범위입니다.

        데모

      • Funnel 차트

        판매와 같이 프로세스의 단계를 깔때기 모양으로 시각화합니다. 간소화된 데이터를 플롯하여 프로세스의 다양한 단계를 보여줍니다. 옵션 속성을 사용하여 깔때기의 높이, 너비 및 스타일을 조정합니다.

        데모

      • 폭포 차트

        일련의 변화를 통해 차트 시작 위치의 변화를 보여줍니다. 폭포형 차트는 순차적으로 도입된 양수 또는 음수 값의 누적 효과를 이해하는 데 도움이 되는 데이터 시각화의 한 형태입니다.

        데모

      • 사각 Funnel 차트

        간소화된 데이터를 플롯하여 프로세스의 다양한 단계를 표시하는 다른 모양을 위해 깔때기의 가장자리를 사각형으로 만듭니다. 깔때기형 차트를 사용하여 판매 깔때기의 각 단계에 대한 판매 잠재 고객의 수를 표시합니다.

        데모

      • Box-and-Whisker 차트

        사분위수를 통해 숫자 데이터 그룹을 시각화합니다. 상자 그림에는 상자에서 수직으로 연장되는 선이 있을 수 있으며, 이는 상위 및 하위 사분위수 외부의 가변성을 나타냅니다.

        데모

      • 간트 차트

        Gantt 차트로 프로젝트를 관리하고 단계를 놓치지 마세요. 종속성 및 완료율, 각 작업의 시작 및 종료 날짜, 완료 상태 및 작업 종속성과 같은 정보가 포함됩니다.

        데모

      Wijmo 활용 Tips

      더 많은 글 보기

      Wijmo를 활용하는 더 많은 방법을 알아보세요.

      확장성이 높은 차트 컨트롤인 FlexChart의기본 사용법을 소개합니다.

      차트 컨트롤 중 하나인 FlexPie 컨트롤을 사용해 원형 차트와 도넛 차트를 구현하는 방법을 알아보세요!

      Wijmo 튜토리얼

      Wijmo는 500개 이상의 샘플 코드를 제공하며, 이를 통해, Wijmo의 컨트롤들을 Angular, React, Vue 상에서 구현하는 방법을 학습할 수 있습니다. 아래 링크를 통해, Wijmo의 다양한 컨트롤들을 지금 사용해 보세요.

      전체 튜토리얼

      최신 모던 JavaScript 프레임워크 기반에서 Wijmo를 구현하고자 하시는 개발자분들을 위한 다양한 데모/튜토리얼을 확인하실 수 있습니다.

      PureJS(SystemJS) | Angular | React | Vue

      바로가기
      PureJS 튜토리얼

      전통적인 JavaScript 개발에 익숙하신 개발자 분들을 위해 새롭게 오픈한 Wijmo PureJS 데모/튜토리얼 사이트입니다.

      바로가기
      PureJS 튜토리얼 (US)

      전통적인 JavaScript 개발에 익숙하신 개발자 분들을 위한 Wijmo PureJS 영문 데모/튜토리얼 사이트입니다.

      바로가기

      아래 동영상을 통해 Wijmo에서 Chart와 Grid 기능을 사용하는 방법을 학습할 수 있습니다.

      FlexGrid, FlexChart 시작하기 (PureJS, 로컬 레퍼런싱)
      FlexGrid 시작하기 (PureJS, CDN 레퍼런싱)
      FlexChart 시작하기 (PureJS, CDN 레퍼런싱)

      Wijmo 디자이너를 통해 Wijmo 컨트롤 설정을 쉽게 변경해 보세요.

      Web 디자이너를 통해 Wijmo 컨트롤들의 설정을 쉽게 변경해보세요. 20가지 이상의 컨트롤들의 설정 값을 수정하고 확인해 볼 수 있습니다. 별도의 코딩 작업 없이도, 해당 설정을 다운로드 받아 여러분의 웹에 쉽고 빠르게 바로 적용이 가능합니다.

      Web 디자이너 사용

      Angular 개발자 분들을 위한 전용 VS Code 확장 기능을 제공합니다. 20가지 이상의 Wijmo 컨트롤에 대한 설정을 디자이너를 통해 변경할 수 있으며, 자동으로 HTML 소스 파일에 적용이 됩니다. 확장 기능을 이용하여 Mark-up 태그 자동완성 기능과 디자이너 UI를 통해 쉽게 개발이 가능합니다.

      VSCode 디자이너 사용

      Wijmo 2023 v2 새로운 기능

      • Angular 17 지원
      • FlexChart에 차트 축 그룹화 추가
      • 새로운 도구 설명 트리거
      • 강력해진 안정성과 고품질
      • 사용 사례 포함 단위 및 자동화 테스트 확장
      새로운 기능 자세히 보기
      인프라 스트럭쳐 솔루션
      도입 사례

      더 많은 MESCIUS 제품 도입 사례를 살펴 보세요.

      Our Customers

      • "수정도 안 되는 ActiveX 기반의 엑셀 컴포넌트를 사용 중에 SpreadJS를 만났습니다. MS Excel과 호환되는 프로그램 중, 단연 최고인 듯,이젠 웹으로 ActiveX 없이 순수 웹으로 엑셀을 구현하는게 가능해졌습니다."


        - (주)지오유 박OO 개발자

        Button

      • "대부분의 한국의 사용자들은 엑셀에 매우 익숙하며 엑셀과의 호환성을 매우 필요로 합니다. 개발자는 이와 같은 기능을 구현하기 위해 많은 시간과 비용을 투자해야 하지만 Spread는 이 모든 고민을 한번에 해결하여 주었고 사용자는 유사한 엑셀디자인의 사용자 화면 및 기능에 만족해합니다."


        - 원광도어 이OO 팀장

        Button

      • "Spread는 지금까지 본 BPI(비즈니스 프로세스 통합) 시장에 대한 가장 중요하고 오랫동안 기다려온 혁신 중 하나입니다."


        - Jeff Lynch, Microsoft MVP

        Button

      Wijmo 무료 체험판

      다운로드

      Wijmo 가격 및 라이선스

      Wijmo의 UI 컨트롤을 활용하여 JavaScript 기반 웹 솔루션을 만들고자 하시는 경우, 개발자 라이선스와 배포 라이선스를 모두 구매하셔야 합니다.

      * 모든 금액은 VAT 제외 금액입니다.

      개발자 라이선스

      Wijmo 정식 자바스크립트 라이브러리를 사용하기 위해 필요한 라이선스입니다.

      \1,494,000

      * 개발자 1명 당 1copy를 구매하셔야 합니다.

      배포 라이선스

      Wijmo의 컨트롤을 서버에 배포하기 위해 필요한 라이선스로, 최종적으로 서비스하는 도메인 주소 또는 IP 주소 각각에 대해서 구매가 필요합니다.

      \1,000,000

      * 한번 등록된 도메인 및 IP는 수정이 불가합니다.

      * 요청 전에 반드시 최종 확인을 해주세요.

      배포 키 발급 신청

      Wijmo 컨트롤을 서버에 배포하기 위해서는 배포 라이선스를 구매한 후 배포 키를 발급 받으셔야 합니다.

      배포 키 발급 포털을 통해 배포 키를 신청해 주세요.

      도입 문의

      Wijmo 도입 시 더욱 자세한 제품 및 구매 상담이 필요하신 경우 편하신 방법으로 연락 바랍니다.

      구매 절차

      구매 절차의 각 단계에 대한 자세한 내용을 보시려면 각 버튼을 클릭해주세요.

      • 1. 가격 확인 및 견적 요청

        아래의 방법 중 편하신 방법으로 견적서를 요청하실 수 있습니다.


      • 2. 발주 요청

        하기 세가지 항목을 Email(sales-kor@mescius.com)로 발송해 주세요.


        1. 서명 완료된 견적서 (담당자 사인 또는 회사 직인)
        2. 사업자 등록증 사본(회사일 경우)
        3. End-User 정보

                  1) 회사명(한글) : 

                  2) 회사명(영문) : 

                  3) 우편번호 : 

                  4) 주소(한글) : 

                  5) 주소(영문) : 

                  6) 담당자(한글/영문) : 

                  7) 전화번호 : 

                  8) E-mail : 


        발주 요청을 주시면 이메일을 통해 인보이스를 발송해드립니다.

      • 3. 결제

        은행 입금


        받으신 인보이스에 표기되어 있는 계좌 번호로 입금해 주세요.



        카드 결제


        카드 결제는 유선상으로 진행됩니다. 결제에 필요한 결제 전용 전화번호와 납부번호는 메일로 따로 전달 드리며, 전달 받으신 결제 전용 전화번호로 직접 전화를 하시어, 카드 결제를 진행하실 수 있습니다.

      • 4. 라이선스 발급 & 세금 계산서 발행

        결제 확인 후 라이선스 발급 안내 메일을 발송해 드립니다. 이후 세금 계산서를 발행해 드립니다.


        * Wijmo 컨트롤을 서버에 배포하기 위해서는 배포 라이선스를 구매한 후 배포 키를 발급 받으셔야 합니다. 배포 키 발급 포털을 통해 배포 키를 신청해 주세요.


      Web 개발자를 위한 컨트롤

      • SpreadJS

        순수 JavaScript 기반 Web-Excel 컴포넌트
        • Excel 가져오기/내보내기 지원
        • 450+ Excel 함수 지원
        • Angular, React, VueJS 지원
        더 알아보기

      • ActiveReportsJS

        JavaScript 기반 비즈니스 리포팅 컴포넌트
        • Angular, React, Vue 지원
        • 크로스플랫폼을 지원하는 디자이너 프로그램 제공 
        • JavaScript 리포트 뷰어 제공
        더 알아보기

      • Forguncy

        코딩 없이 Excel로 만드는 비즈니스 웹 개발 솔루션
        • Excel 기능으로 쉽고 빠르게 웹 구현
        • HTML & CSS 없이 시작하는 웹 개발
        • 데이터 취합 및 통합 솔루션
        더 알아보기

      • DsExcel

        고성능 Java&Kotlin / .NET 기반 Excel 스프레드시트 API 라이브러리
        • 스프레드시트 생성, 로드, 편집, 저장
        • 스프레드시트 구문 분석, 변환, 공유
        • 수식 계산 및 셀 서식 지정
        DsExcel Java 알아보기
        DsExcel .NET 알아보기
      Share by: