数据可视化图表库LightningChart JS 全新发布v7.0——提高视觉质量

news/2025/3/15 15:42:58/

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

LightningChart JS v7.0版本包括新的产品特性、视觉质量、新的图表示例等。

立即获取LightningChart JS v7.0正式版

全新的产品特性

LightningChart JS v.7.0引入了新的产品特性,以下是概述:

对内置交互的更改

最新版本的LightningChart JS,它具有全新的直观交互,可以实现无缝的开发体验:

  • 双击缩放匹配交互
  • 根据图表结构自动内置智能交互方案选择
  • 更好的触摸屏交互
  • 在滚动轴应用程序上更方便的交互
引入setUserInteractions

官方正在引入一个新的API,允许更详细的交互操作配置:

  • 选择受交互作用影响的轴(X、Y或两者)
  • 启用基于Ctrl、Shift或Alt组合键的交互
  • 根据您的应用要求调整平移和变焦灵敏度
  • 探索新的交互,如分页、缩放还原、键盘控制和3D轴修改
javascript">// Right mouse click on Y axis title
chart.axisY.title.addEventListener('contextmenu', (event) => {}) // Drag & drop something over chart series area chart.seriesBackground.addEventListener('drop', (event) => {})
// Hover pointer over a data point
pointSeries.addEventListener('pointermove', (event, dataPoint) => {
})
// dataPoint.x, dataPoint.y, dataPoint.id
自定义交互的更改
  • 简化的API - 现在遵循熟悉的addEventListener/removeEventListener语法,以便更容易实现。
  • 一致的跨设备交互 - 以前的鼠标、触摸和拖动交互现在在所有设备上都是一致的。
  • 右键支持 - 添加上下文菜单事件处理,来改进交互选项。
  • 扩展交互跟踪 - 现在包括图表标题、轴标题、地图区域等。
  • 拖放支持 - 支持在图表中移动元素或集成外部HTML元素,如交换轴或添加数据源。
javascript">// Right mouse click on Y axis title
chart.axisY.title.addEventListener('contextmenu', (event) => {}) // Drag & drop something over chart series area chart.seriesBackground.addEventListener('drop', (event) => {})
// Hover pointer over a data point
pointSeries.addEventListener('pointermove', (event, dataPoint) => {
})
// dataPoint.x, dataPoint.y, dataPoint.id
文本系列

<a class=LightningChart JS 7.0产品图集" height="453" src="https://i-blog.csdnimg.cn/img_convert/87ba2507595becab012a3ff310f57372.jpeg" width="1251" />

在ChartXY中显示文本的一个新的、更有效的API提高了性能和可用性,它支持viewport剪切,并提供了调整文本大小和边界的方便方法,使其在许多情况下成为chart.addUIElement()的合适替代品。

ChartXY布局更改事件

<a class=LightningChart JS 7.0产品图集" height="420" src="https://i-blog.csdnimg.cn/img_convert/619d02fea700b17c6d862e345c172430.jpeg" width="1280" />

一个新的便利API提供了对ChartXY元素的结构、布局和位置的详细了解,它对于静态长宽比应用程序或将UI元素与图表组件(如轴)对齐特别有用。

提高视觉质量

UI元素中的圆角——图例、光标、矩形系列、条形图和树状图现在都以圆角为特征,以实现更现代、更有视觉吸引力的设计。

<a class=LightningChart JS 7.0产品图集" height="1101" src="https://i-blog.csdnimg.cn/img_convert/ced76dce1a3d38019b6e2dad7b9b2615.jpeg" width="1280" />

其他改进包括:

  • 改进的游标可读性 - 为游标添加了单独的标题背景,使内置的游标信息更清晰,更易于阅读。
  • 光标颜色适应数据点 - 当使用每个数据点的颜色时,光标现在将显示其悬停在特定数据点上的颜色,从而改善视觉环境。
轴刻度布局和显示改进

<a class=LightningChart JS 7.0产品图集" height="591" src="https://i-blog.csdnimg.cn/img_convert/7d8493e8a631d8872dbafa7ab4bb373a.jpeg" width="1571" />

  • 更少的刻度显示清晰 - 刻度的数量已经减少,来尽量减少视觉混乱,同时保持可读性。
  • 改进的小轴刻度显示 - 以前非常小的轴有时只显示一个不可读的刻度,现在系统优化tick placement来获得更好的可见性。
  • 刻度标签保持在图表边界内 - 默认情况下,刻度标签现在被限制在图表容器内,以防止它们在紧凑的图表布局中被切断。
  • 简化的刻度标签颜色 - 内置主题现在使用单一的统一颜色的刻度标签,而不是单独的暗淡/明亮的变化,创造一个更干净的外观。
改进条形图标签拟合和添加文本阴影

<a class=LightningChart JS 7.0产品图集" height="688" src="https://i-blog.csdnimg.cn/img_convert/6b7a3fefea629bbe7f321d1b22ecfd1f.jpeg" width="1477" />

  • 改进的标签拟合 - 以前的算法过于保守,限制了显示标签的数量;现在可以显示更多的标签而不会造成重叠。
  • 增强的文本可读性 - 微妙的文本阴影已添加到各种图表类型,使标签更清晰,更容易阅读。

http://www.ppmy.cn/news/1579345.html

相关文章

ESP32的IDF开发学习-驱动ov2640并显示在屏幕上

关键词&#xff1a;ov2640 ESP32S3 LVGL esp32-camera 前言 买的板子还送了一个0v2640的摄像头&#xff0c;今天尝试驱动这个摄像头&#xff0c;之前已经实现了屏幕的驱动了&#xff0c;现在实现一下驱动摄像头显示在屏幕上 下载组件 打开组件注册表&#xff0c;搜索camera组…

Java 设计模式:观察者模式

一、模式定义 观察者模式属于行为型设计模式&#xff0c;用于建立对象间的一对多依赖关系。当主题(Subject)状态变化时&#xff0c;所有依赖的观察者(Observer)会自动收到通知并更新。 二、核心角色 Subject(主题) 维护观察者列表&#xff0c;提供添加/删除观察者的方法定义通知…

数字滤波器的设计实现及应用(论文+仿真)

1系统总体设计 对于本次毕业设计的课题基于DSP的IIR数字滤波器来说&#xff0c;在此选用了TI公司的DSP芯片TMS320F5402芯片来作为数字滤波器的主控制器&#xff0c;另外再采用高速AD模拟到数字转换芯片来进行输入信号的采样&#xff0c;以此将采集到的信号输出给主控制器进行处…

基尔霍夫定律课后学习日志

基尔霍夫定律课后日志 今天在学习基尔霍夫定律后&#xff0c;我对它在实际工程中的价值有了全新的认识。 基尔霍夫电流定律&#xff08;KCL&#xff09;和电压定律&#xff08;KVL&#xff09;是电路分析的基石。在电子电路设计领域&#xff0c;这两个定律发挥着关键作用。以…

Nginx正向代理HTTPS配置指南(仅供参考)

要使用Nginx作为正向代理访问HTTPS网站&#xff0c;需通过CONNECT方法建立隧道。以下是操作详细步骤&#xff1a; 1. 安装Nginx及依赖模块 需要模块&#xff1a;ngx_http_proxy_connect_module&#xff08;支持CONNECT方法&#xff09;。 安装方式&#xff1a;需重新编译Nginx…

【Linux系统编程】信号

目录 1、信号1.1、什么是信号1.2、进程对信号的处理1.3、信号的生命周期1.4、信号处理流程1.5、信号的发送 2、kill()、raise()函数 发送信号3、alarm函数 闹钟信号4、pause函数 挂起信号、暂停5、singal 函数 捕获信号5.1、为什么返回值是上一次的处理方式5.2、练习 6、sigact…

docker无法正常拉取镜像问题的解决

目录 1.前言 2.解决方案 1.前言 安装docker后拉取镜像&#xff0c;遇见了如下问题&#xff1a; Error response from daemon: Get "https://registry-1.docker.io/v2/": net/http: request canceled while waiting for connection (Client.Timeout exceeded whil…

vscode怎么debug vue项目

使用 vue create ss 创建个名为 ss 的 vue3 项目 (vue2项目不知道为什么不可以&#xff09; App.vue中添加方法和事件&#xff0c;并打断点 <button click"ha">asdfasdfasdfsdf</button>methods: {ha() {console.log(111111111)console.log(2222222222…