JavaScript 图表示例

欢迎来到在线演示页面。这些演示在桌面端观看效果最佳。它们在移动端同样可以运行，只是复杂度有所降低，因此您在手机上也能进行比较。

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

1 — 高速 2D：GigaPrime2D

一张折线图承载五个 Subset，每个最多两千万个点 — 在浏览器中共计一亿个点。这不是为 Web 缩水后的数字：这正是我们 Win32 桌面演示所运行的规模，演示本身也如此标注。

每一次计时都会替换整个数据集，而不是追加。打开计时器，引擎会在每一帧重新传入全部五个 Subset。替换正是大多数 Web 图表悄悄回避演示的情形，也正是这个引擎为之而生的情形。

它从 400,000 个点开始，好让页面立刻可用，规模阶梯再从那里往上走。您可以合并或分开 Y 轴、逐个高亮 Subset、隐藏坐标轴、限制缩放，并在此过程中观察帧率。

在手机上，最大的三档规模会直接从列表中移除，而不是先提供再让它失败。一亿个点大约需要 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 开发者读了三十年的那一套 — 基于 WebAssembly 在您的浏览器中原生运行。

左侧是列表，右上窗格是 JavaScript 源码，图表在其下方。点开一个示例，您看到的就是可运行的代码，以及它所产生的图表，并排呈现。

大多数图表演示只展示成品画面，把代码藏在「查看源码」链接或一个与示例相隔数月写成的文档页面之后。我们把生成该图表的 JavaScript 直接放在图表上方、同一个窗口里，且始终同步 — 因为那正是演示刚刚执行过的文件。

工程师真正在问的，不是「它能不能画出来」，而是「这要花我多少代码」。把属性清单放在结果旁边阅读，大约五秒就能得到答案，而这才是接受评判的诚实方式。

而且这与您在桌面端会写的代码完全相同。JavaScript 的属性名就是 WinForms 的属性名，因此读这些示例的 C# 开发者，读的是自己已经会的语言。并排对照请见入门教程。

Launch PeDemo Source on GitHub

PeDemo 里有什么

按控件类型分组，与演示本身的分组方式一致。

二维图表

柱状、折线、面积、样条与堆叠图，并配备一张生产级图表真正需要的坐标轴、图例、注释与表格机制。

• 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

科学与工程图表

科学图表：多坐标轴与重叠坐标轴、双对数缩放、双精度数据、毫秒级日期时间、等值线、热力图、频谱图与 Delaunay 网格。

• 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 库根本不会去碰的射频与天线领域。

• 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

接下来

• 入门教程 — 大约十分钟，从零构建出其中一张图表。
• ProEssentialsJS 的横向对比 — 与 Highcharts、SciChart.js、LightningChart JS 等的对比。
• PE-Query — 询问您需要的属性，得到对照已编译引擎验证过的答案。
• 授权 — 年收入低于 25 万美元可免费商用，包含再分发，无水印。
• 随时提问 — 支持免费、无限制，并且由编写引擎的人亲自回答。