JavaScript 차트 예제

라이브 데모 페이지에 오신 것을 환영합니다. 이 데모들은 데스크톱에서 보시는 것이 가장 좋습니다. 복잡도를 낮춘 형태로 모바일에서도 동작하므로, 그곳에서도 비교해 보실 수 있습니다.

Each opens in a new window. No install, no account, no email, no licence key.

1 — 빠른 2D: GigaPrime2D

하나의 선 차트에 각각 최대 2천만 점인 Subset 다섯 개, 곧 브라우저에서 1억 점을 담습니다. 웹용으로 줄인 수치가 아닙니다. 저희 Win32 데스크톱 데모가 실제로 다루는 크기이며, 데모가 직접 그렇게 표시합니다.

매 틱마다 데이터셋 전체가 교체됩니다. 덧붙이는 것이 아닙니다. 타이머를 켜면 엔진은 매 프레임 다섯 개 Subset을 모두 다시 넘깁니다. 교체는 대부분의 웹 차트가 조용히 시연을 피하는 경우이고, 이 엔진이 바로 그것을 위해 만들어진 경우입니다.

페이지를 곧바로 쓸 수 있도록 400,000점에서 시작해, 거기서부터 단계가 올라갑니다. Y축을 합치거나 나누고, Subset을 하나씩 강조하고, 축을 숨기고, 확대 한도를 두면서 그동안 프레임 속도를 지켜볼 수 있습니다.

휴대폰에서는 가장 큰 세 가지 크기를 제시했다가 실패하게 두는 대신 목록에서 제외합니다. 1억 점에는 약 458 MB가 필요하고, 휴대폰 브라우저는 경고 없이 그 탭을 종료합니다.

Launch GigaPrime2D Source on GitHub

2 — 3D 곡면 + 2D 등고선 + 2D 라인: GigaPrime3D

하나의 데이터셋으로 구동되는 세 가지 차트를 한 화면에. 조명이 적용된 3D 곡면, 같은 데이터의 2D 등고선, 그리고 선택한 단면을 지나는 2D 라인. 단면을 옮기면 셋 다 따라옵니다.

곡면은 생성된 잡음이 아니라 실제 스캔 데이터입니다. 1345 x 1345 그랜드캐니언, 1232 x 1028 및 1256 x 684 재료 표면 스캔, 1451 x 1451 잡음 지형. 회전하고, 확대하고, Z축을 과장하고, 모델 주위로 광원을 옮길 수 있습니다.

렌더링은 WebGPU입니다. 따라서 곡면은 네이티브 애플리케이션이 사용하는 것과 동일한 그래픽 하드웨어가 그립니다.

WebGPU에는 최신 브라우저와 보안 컨텍스트가 필요합니다. 3D 화면이 나타나지 않는다면, 원인은 거의 언제나 기기가 아니라 브라우저입니다.

Launch GigaPrime3D Source on GitHub

3 — 100개가 넘는 예제와 코드 창을 갖춘 튜토리얼 데모: PeDemo

저희 데스크톱 데모와 함께 제공되는 것과 같은 예제 모음 — WinForms, WPF, WinUI, MFC, Delphi 개발자들이 30년간 읽어 온 바로 그것 — 이 WebAssembly 위에서 브라우저 안에서 네이티브로 실행됩니다.

왼쪽에 목록, 오른쪽 위 창에 JavaScript 소스, 그 아래에 차트. 예제를 클릭하면 동작하는 코드와 그 코드가 만들어 내는 차트를 나란히 보게 됩니다.

대부분의 차트 데모는 완성된 그림만 보여 주고, 코드는 "소스 보기" 링크나 예제와 몇 달 떨어져 작성된 문서 페이지 뒤에 숨깁니다. 저희는 차트를 만들어 낸 JavaScript를 같은 창 안에서 차트 바로 위에, 항상 동기화된 상태로 둡니다 — 그것이 데모가 방금 실행한 바로 그 파일이기 때문입니다.

엔지니어가 정말로 묻는 것은 "이걸 그릴 수 있나"가 아니라 "여기에 코드가 얼마나 들까"입니다. 결과 옆에 놓인 속성 목록을 읽으면 그 답이 약 5초 만에 나오며, 그것이 정직하게 평가받는 방식입니다.

게다가 이것은 데스크톱에서 작성하실 코드와 같습니다. JavaScript 속성 이름이 곧 WinForms 속성 이름이므로, 이 예제들을 읽는 C# 개발자는 이미 아는 언어를 읽는 셈입니다. 나란히 놓은 비교는 워크스루를 보십시오.

Launch PeDemo Source on GitHub

PeDemo에 들어 있는 것

데모가 묶는 방식 그대로, 컨트롤 유형별로 묶었습니다.

2D 그래프

막대, 선, 영역, 스플라인, 누적 플롯. 여기에 실제 운영 차트에 정말로 필요한 축, 범례, 주석, 표 기능까지.

• Simple Graph
• Auto Statistical Subsets
• Permanent and Scrolling Subsets
• Right Y Axis Comparison Subsets
• Simple High-Low-Close
• Custom Y Axis
• Null Data Gaps
• Pixel-to-Graph Coordinate Conversion
• Point Colors
• Best Fit Coefficients
• Stacked Bar
• Multiple Sub-Titles
• Multi-Axes Subsets 1
• Multi-Axes Subsets 2
• Hot Spots
• Graph Annotations
• Date-Time Handling
• Real-Time Data Handling
• Direct Cell Writes
• Large Quantity of Data
• Rectilinear Heatmap Stacked Bar
• Hatching
• Mixing Plotting Methods per Subset
• Bitmaps and Gradients
• Background Bitmap
• Floating Stacked Bars
• Table Annotations, Simple
• Table Annotations, Stacked
• Table Annotations, Real-Time Update
• Table Annotations, Table Spaced
• Table Annotations, Hot Spots
• Subset Obstacles
• 16 Axes
• Subset Order Control
• Moveable Table
• Demographic Pyramid
• 2D Point Labels

과학 및 공학 차트

과학 그래프: 다중 축과 겹친 축, 로그-로그 스케일링, 배정밀도 데이터, 밀리초 단위 날짜와 시간, 등고선, 히트맵, 스펙트로그램, 들로네 메시.

• Simple Scientific Graph
• Line Annotations
• Direct Cell Writes (Extended)
• Overlapped Multi-Axes 1
• Overlapped Multi-Axes 2
• Data Cursor
• Date-Time Handling
• Rect Selector
• Inverted Y Axis
• Axis Formatting
• Log-Log Axes
• Financial Scaling
• Manual Min and Max Y
• Manual Line Density
• Double-Precision Data
• Programmatic Horizontal Zooming
• Scatter Plus Data-Point Dragging
• Bubble Chart
• Custom Menus
• Partial Axes
• Vertical Y Axis Grid Numbers
• Fixed Grid Aspect
• Event-Based Custom Grid Numbers
• Multi Point Types and Colors
• Multiple Y Axes with Equally Spaced Gridlines
• Millisecond Date-Time Handling
• High-Low Area
• Error Bars
• 2D Contour Lines
• Large 2D Contour with More Colors
• Wave Data Heatmap Spectrogram
• Bitmaps as Symbols
• Second Contour Legend
• Delaunay Chart
• Angled Text Annotation Justifications

실시간

실시간의 세 가지 형태: 추가하며 자동 스케일링, 고정된 축에 대해 추가, 그리고 쓰기 헤드가 이동하며 제자리 덮어쓰기. 여기에 매 프레임 모든 점이 새로워지는 전체 교체의 경우까지.

• Real-Time 1 - full data replacement, 400,000 points per update
• Real-Time 2 - append and autoscale
• Real-Time 3 - append against a manual axis
• Real-Time 4 - overwrite in place with a write-head marker

극좌표 및 스미스 차트

극좌표, 양극, 로즈, 스미스 차트 - 대부분의 JavaScript 라이브러리가 아예 시도하지 않는 RF와 안테나 영역입니다.

• Simple Polar Chart
• Custom Polar Grid
• Bi-Polar Grid
• Smith Chart
• Rose Chart
• Fancy Tick Marks
• Polar Annotations

원 그래프

분리된 조각, 선택적 범례, 해칭.

• Simple Pie Chart
• Exploded Slices
• Optional Legend
• Hatching

그다음은

• 워크스루 — 이런 차트 하나를 약 10분 만에 처음부터 만들어 봅니다.
• ProEssentialsJS 비교 — Highcharts, SciChart.js, LightningChart JS 등과의 비교.
• PE-Query — 필요한 속성을 물어보면 컴파일된 엔진에 대해 검증된 답을 받습니다.
• 라이선스 — 매출 25만 달러 미만이면 상업적 사용이 무료이며, 재배포를 포함하고 워터마크가 없습니다.
• 무엇이든 문의하세요 — 지원은 무료이고 무제한이며, 엔진을 만든 사람이 직접 답변합니다.