Arction跨平台图表控件JavaScript图表库LightningChart JS交互示例：烛台图

使用LightningChart JS创建高性能JavaScript烛台图

最新推荐文章于 2024-08-28 07:56:48 发布

原创

最新推荐文章于 2024-08-28 07:56:48 发布 · 281 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#数据可视化 #webgl #javascript

本文展示了如何使用Arction的LightningChart JS库，通过OHLCSeries实现JavaScript WebGL烛台图，用于数据可视化和交易分析。LightningChart JS凭借GPU加速和WebGL渲染提供卓越性能，支持大量数据点的高效展示，并允许自定义样式和动画。

本示例显示了使用OHLCSeries的烛台图的基本实现。这种类型的图表用作可视化价格走势的交易工具。烛台图可以代表多个记录的值，这些值打包成4个值（开盘价，高价，低价和收盘价）。这对于从较长的间隔和较短的间隔动态显示数据很有用。

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

烛台图
本示例显示了使用OHLCSeries的烛台图的基本实现。这种类型的图表用作可视化价格走势的交易工具。烛台图可以代表多个记录的值，这些值打包成4个值（开盘价，高价，低价和收盘价）。这对于从较长的间隔和较短的间隔动态显示数据很有用。
OHLCSeries是使用ChartXY方法创建的。
const chart = lightningChart().ChartXY()
// Method for adding OHLCSeries takes one argument: seriesConstructor.
const ohlcSeries = chart.addOHLCSeries(
// Specify type of figure used
{ seriesConstructor: OHLCFigures.Candlestick }
)

OHLCSeries接受接口“ XOHLC”形式的数据：

const xohlc = [
// X-position
0,
// Opening Y-value
100,
// H