JavaScript大型线形图

 

这个演示程序属于LightningChart JS的例子集，是JavaScript的数据可视化库。 

 

 

LightningChart JS是完全由GPU加速和性能优化的图表库，用于展示大量的数据。它提供了一种简单的方法来创建复杂和互动的图表，并将其添加到你的网站或网络应用中。 

 

该演示可以作为一个例子或种子项目使用。本地执行需要以下步骤。 

 

 

确保已经安装了相关版本的Node.js 

 

在终端中打开项目文件夹。 

 

  npm install              # fetches dependencies 

  npm start                # builds an application and starts the development server 

 

该应用程序在浏览器中可以使用http://localhost:8080，webpack-dev-server提供热重载功能。 

 

说明 

这个例子展示了一个相对较大的数据集（几百万个数据点）的线形图的可视化。 

 

LightningChart JS为网络中的数据可视化创造了一场革命--以前，线形图的可视化只可能在几十万个数据点的范围内实现，即使如此，也需要复杂的开发者努力来实现任何令人满意的缩放或平移互动。 

 

 

有了LC JS，一百万点的折线图可以在一秒钟内加载完毕，其结果是前所未有的--缩放和平移等操作都是即时的。 

 

此外，与以前的替代品相比，使用方法简单得令人发指。使用基于SVG/Canvas的绘图，用户在处理大量数据时将受到严重限制，因为这些技术不能很好地扩展。 

 

下面是用LC JS创建一百万点线图的简单过程。: 

 

const chart = lightningChart().ChartXY() 

const series = chart.addLineSeries({ 

    dataPattern: { 

        pattern: 'ProgressiveX' 

    } 

}) 

    .setStrokeStyle(stroke => stroke.setThickness(1)) 

    .addArrayY(new Array(1000000).fill().map(_ => Math.random())) 

 

这需要大约100毫秒的时间来加载，并将立即以闪电般的速度进行互动! 

 

 

线形图的最大可能大小与使用的硬件，特别是RAM（内存）和GPU（显卡）有很好的比例关系 - 在普通的办公电脑上，LC J S可以处理超过一亿个数据点。