JavaScript 3D表面网格图

 

这个例子展示了LightningChart JS的SurfaceGridSeries功能。 

 

表面网格系列是用来将数据集以网格的形式可视化。为了解释数据，想象一下在X轴和Z轴之间的平面上铺设一个网格。 

 

与热图网格系列类似，表面网格被分成若干列（X轴）和行（Z轴）。对于列和行之间的每个交叉点，表面网格系列中都有一个数据点。 

 

在这个例子中，表面网格有1024列和1024行，加起来一共有1 048 576个数据点。这些数据点中的每一个都与一个高度（Y轴）值有关。此外，表面的颜色是根据每个数据点的Y值来动态调整的。 

 

为了突出其相似性，左边显示了一个具有相同数据集和调色板的二维热图网格系列。 

 

最后，这个例子还展示了3D颜色样式的可用选项（simple或Phong）。默认情况下，表面系列使用简单颜色阴影，它显示所有颜色的原貌。为了改善深度感知，可以启用Phong shading来模拟场景中的光线行为。 

 

关于性能 

SurfaceGridSeries是LightningChart JS的最新功能之一，因此我们对它进行了最新的优化。Surface Grid Series在内存消耗和CPU使用方面进行了很好的优化，在配置良好的PC上，通常能处理最大的数据集大小在数十亿个数据点之间。 

 

这是突破性的表现，因为传统的曲面图是非常昂贵的组件，其大小限制在10 000个数据点左右（小100 000倍）。 

 

大表面网格系列需要占用大GPU空间，表现为缓慢的重绘。在开发利用它们的应用程序时，最好避免不必要的重绘，以便在内存稍弱的设备（如笔记本电脑和手机）上保持良好的刷新率。

 

更多曲面示例例 

这个示例显示了如何将表面网格系列分割成单独加载的子部分，以提高性能和响应时间。 

 

这个例子展示了如何根据不同的数据集对表面网格系列进行着色，而不是在这个例子中使用的高度图。 

 

这个例子展示了使用实时数据源和表面系列。 

 

所有表面图的例子