• 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可以处理超过一亿个数据点。

  • 相关阅读:
    Redis代理与集群的总结报告
    redis代理对比,redis架构对比,redis predixy安装和功能测试
    kafka学习方向系列
    redis-cluster-proxy安装使用尝试
    redis6集群安装与运维管理
    kafka集群搭建(利用集成zk集群)
    vue-property-decorator用法介绍
    软件世界的基石:重要开源项目盘点
    ECMAScript 6 入门
    windows下快速删除node_modules
  • 原文地址:https://www.cnblogs.com/lightningchart/p/16073274.html
Copyright © 2020-2023  润新知