Arction 高性能图表控件 JavaScript 图表库 LightningChart JS 交互示例：百万点的渐进线

LightningChart® JS 具有出色的运行性能，能同时输入十个实时数据源，极速输出 10 个百万点的图表。GPU 加速和 WebGL 渲染保证设备的图形处理器得到有效利用，提高了刷新频率，使动画效果运行流畅。

渐进系列

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

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

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

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

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

l 选择 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，也可以自动进行渐进系列数据的滚动和优化，以高效执行滚动。

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

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

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

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

l 传递未定义以禁用自动滚动。然后可以使用 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 是基于 WebGL 的跨平台图表控件，应用于网站开发，软件开发，物联网，工程工业，商业交易等领域。LightningChart JS 拥有优越的渲染性能，从而确保高刷新率和平滑流畅的动画效果。同时具有可访问的 API 在线文档，广泛的功能和自定义的插件等等。LightningChart JS 是一家坐落于北欧芬兰的控件开发商Arction Ltd 的产品，是微软公司认证的合作伙伴。Arction专注于开发最高性能和最先进的数据可视化工具，设定行业最高标准。