JavaScript图表库LightningChart JS交互示例：百万点的渐进线

本系列文章将为您介绍JavaScript图表库LightningChart JS交互示例，此示例显示如何绘制百万点的渐进线。

LightningChart JS是Web上性能最高的图表库具有出色的执行性能 – 使用高数据速率同时监控数十个数据源。 GPU加速和WebGL渲染确保您的设备的图形处理器得到有效利用，从而实现高刷新率和流畅的动画。非常适合用于贸易，工程，航空航天，医药和其他领域的应用。

JavaScript图表库LightningChart JS最新版本v1.0.0发布，点击查看详情！

LightningChart JS社区版

渐进系列

渐进系列是高度优化的系列，用于在保持完全交互性的情况下呈现大容量和高密度数据。
通过选择DataPattern可以启用这些优化，该DataPattern需要在创建系列实例的过程中指定，并且由于性能相关的原因而无法进一步更改。

所述DataPatterns -collections对象包含渐进数据模式的所有不同的方向：

• 选择DataPatterns.horizontalProgressive以有效处理水平渐进数据集。

• 选择DataPatterns.horizontalRegressive以有效处理水平回归数据集。

• 选择DataPatterns.verticalProgressive以有效处理垂直渐进数据集。

• 选择DataPatterns.verticalRegressive以有效处理垂直回归数据集。

// Create line series optimized for horizontally progressive data.const series = chart.addLineSeries(    // Using the DataPatterns ojbect to select the certain pattern for the line series.    {  dataPattern: DataPatterns.horizontalProgressive  })

注意：

基于指定DataPattern创建的系列仅针对所选模式进行了高度优化。我们不建议提供与指定的DataPattern矛盾的数据。

重点：

通过为x轴和y轴都指定ScrollStrategy，也可以自动进行渐进系列数据的滚动和优化，以高效执行滚动。

• 选择AxisScrollStrategies.expansion。如果某些点超出比例，则自动增加比例。保留使用的标度的累进性/回归性。

• 选择AxisScrollStrategies.fitting。如果某些点超出比例，则自动增加比例尺；如果空白空间过多，则自动减小比例尺。保留使用的标度的累进性/回归性。

• 选择AxisScrollStrategies.progressive。自动向正方向滚动刻度。

• 选择AxisScrollStrategies.regressive。自动将刻度滚动到负方向。

• 传递未定义以禁用自动滚动。然后可以使用Axis的 setInterval方法手动设置比例

对于此特定示例，并基于选定的DataPatterns，轴的配置可以是AxisScrollStrategies.progressive或AxisScrollStrategies.regressive。

例如

DataPatterns.horizontalProgressive系列已创建。X轴滚动应使用 AxisScrollStrategies.progressive配置。Y滚动可以是任意值。

// Configure axis to have progressive scrolling.axisX.setScrollStrategy( AxisScrollStrategies.progressive )

DataPatterns.horizontalRegressive系列已创建。X轴滚动应使用 AxisScrollStrategies.regressive配置。Y滚动可以是任意值。

// Configure axis to have regressive scrolling.axisX.setScrollStrategy( AxisScrollStrategies.regressive )

DataPatterns.verticalProgressive系列已创建。Y轴滚动应使用 AxisScrollStrategies.progressive配置。X滚动可以是任何滚动。

// Configure axis to have progressive scrolling.axisY.setScrollStrategy( AxisScrollStrategies.progressive )

DataPatterns.verticalRegressive系列已创建。Y轴滚动应使用 AxisScrollStrategies.regressive配置。X滚动可以是任何滚动。

// Configure axis to have regressive scrolling.axisY.setScrollStrategy( AxisScrollStrategies.regressive )

  推荐阅读：

LightningChart JS重磅上新，你值得拥有的性能最高的JavaScript图表库！

=====================================================

如果你想LightningChart JS应用于商业用途，欢迎咨询在线客服。

关注下方的微信公众号，及时获取产品最新资讯▼▼▼

标签：

来源：慧都