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

本文主要是介绍Arction高性能图表控件JavaScript图表库LightningChart JS交互示例:百万点的渐进线,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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

渐进系列
渐进系列是高度优化的系列,用于在保持完全交互性的情况下呈现大容量和高密度数据。

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

这篇关于Arction高性能图表控件JavaScript图表库LightningChart JS交互示例:百万点的渐进线的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/836662

相关文章

Java实现检查多个时间段是否有重合

《Java实现检查多个时间段是否有重合》这篇文章主要为大家详细介绍了如何使用Java实现检查多个时间段是否有重合,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录流程概述步骤详解China编程步骤1:定义时间段类步骤2:添加时间段步骤3:检查时间段是否有重合步骤4:输出结果示例代码结语作

Java中String字符串使用避坑指南

《Java中String字符串使用避坑指南》Java中的String字符串是我们日常编程中用得最多的类之一,看似简单的String使用,却隐藏着不少“坑”,如果不注意,可能会导致性能问题、意外的错误容... 目录8个避坑点如下:1. 字符串的不可变性:每次修改都创建新对象2. 使用 == 比较字符串,陷阱满

Java判断多个时间段是否重合的方法小结

《Java判断多个时间段是否重合的方法小结》这篇文章主要为大家详细介绍了Java中判断多个时间段是否重合的方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录判断多个时间段是否有间隔判断时间段集合是否与某时间段重合判断多个时间段是否有间隔实体类内容public class D

IDEA编译报错“java: 常量字符串过长”的原因及解决方法

《IDEA编译报错“java:常量字符串过长”的原因及解决方法》今天在开发过程中,由于尝试将一个文件的Base64字符串设置为常量,结果导致IDEA编译的时候出现了如下报错java:常量字符串过长,... 目录一、问题描述二、问题原因2.1 理论角度2.2 源码角度三、解决方案解决方案①:StringBui

Java覆盖第三方jar包中的某一个类的实现方法

《Java覆盖第三方jar包中的某一个类的实现方法》在我们日常的开发中,经常需要使用第三方的jar包,有时候我们会发现第三方的jar包中的某一个类有问题,或者我们需要定制化修改其中的逻辑,那么应该如何... 目录一、需求描述二、示例描述三、操作步骤四、验证结果五、实现原理一、需求描述需求描述如下:需要在

Java中ArrayList和LinkedList有什么区别举例详解

《Java中ArrayList和LinkedList有什么区别举例详解》:本文主要介绍Java中ArrayList和LinkedList区别的相关资料,包括数据结构特性、核心操作性能、内存与GC影... 目录一、底层数据结构二、核心操作性能对比三、内存与 GC 影响四、扩容机制五、线程安全与并发方案六、工程

JavaScript中的reduce方法执行过程、使用场景及进阶用法

《JavaScript中的reduce方法执行过程、使用场景及进阶用法》:本文主要介绍JavaScript中的reduce方法执行过程、使用场景及进阶用法的相关资料,reduce是JavaScri... 目录1. 什么是reduce2. reduce语法2.1 语法2.2 参数说明3. reduce执行过程

如何使用Java实现请求deepseek

《如何使用Java实现请求deepseek》这篇文章主要为大家详细介绍了如何使用Java实现请求deepseek功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1.deepseek的api创建2.Java实现请求deepseek2.1 pom文件2.2 json转化文件2.2

Java调用DeepSeek API的最佳实践及详细代码示例

《Java调用DeepSeekAPI的最佳实践及详细代码示例》:本文主要介绍如何使用Java调用DeepSeekAPI,包括获取API密钥、添加HTTP客户端依赖、创建HTTP请求、处理响应、... 目录1. 获取API密钥2. 添加HTTP客户端依赖3. 创建HTTP请求4. 处理响应5. 错误处理6.

Spring AI集成DeepSeek的详细步骤

《SpringAI集成DeepSeek的详细步骤》DeepSeek作为一款卓越的国产AI模型,越来越多的公司考虑在自己的应用中集成,对于Java应用来说,我们可以借助SpringAI集成DeepSe... 目录DeepSeek 介绍Spring AI 是什么?1、环境准备2、构建项目2.1、pom依赖2.2