彩票走势图

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

翻译|使用教程|编辑:吴园园|2019-09-27 10:27:03.053|阅读 565 次

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

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

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应用于商业用途,欢迎。

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

图片2.jpg


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP