当前位置: 首页 > 后端技术 > Node.js

基于canvas的跨平台股票图表库——clchart

时间:2023-04-03 19:41:43 Node.js

什么是ClChartClChart是一个简单、高性能和跨平台的开源项目,用于基于画布创建的股票数据可视化。支持PC、webApp和ReactNative和Weex平台。在ReactNative和Weex上完全适配开源项目GCanvas可以轻松使用GCanvas使您开发的应用程序在Android和iOS上具有原生绘图功能。为什么需要ClChart在现有的开源库中,不乏非常好的开源图表库。通用的图表库有chartjs、echart、highchart等。这些图表库的图表类型非常齐全,绘图能力和??速度也很强大,但是由于需要这些项目存在通用性,我们在绘制交易时需要进行扩展文档。股票等股票的具体图表库有:techanjs和highcharts/highstock。这些图表库做了一些非常专业的库存图的处理和优化,但它们都是基于svgdrawing。我们在绘制大量数据图和跨平台处理时会出现性能问题。下面是使用过程中各个图库的股票绘制的K图的对比。下面的对比都是基于这些的使用图表库来比较证券类型的证券的映射能力,以及数据的主观经验确定。||图表|电子图表|技术|图表|图表||---|---|---|---|---|---||绘图元素|画布|画布和svg|svg|svg|画布||易于使用|☆☆☆☆☆|☆☆☆|☆☆☆☆|☆☆☆☆|☆☆☆☆☆||绘图速度|☆☆☆☆☆|☆☆☆|☆☆|☆☆|☆☆☆☆☆||扩展能力|☆☆☆|☆☆☆☆|☆☆☆☆|☆☆☆☆|☆☆☆☆☆||跨平台|☆☆☆|☆☆☆|☆☆|☆|☆☆☆☆☆|因此,我们迫切需要一个高性能、跨平台、易用的图标库使用库存类型。在现有的图标库ReactNative中,您可以通过webview加载html文件,使用window.document.addEventListener('message',function(e){})和window.postMessage来完成html和ReactNatve通信绘图,但使用实际使用过程,在一些性能较差的安卓设备中,尤其是安卓版本低于4.4的安卓系统,在绘制大数据量图表和用户交互时表现特别差。经常出现卡顿,可能会出现加载慢等问题。ClChart设计目标使用canvas开发具有高效、跨平台的专业股票图表库具有兼容GCanvas提供的canvas接口,在ReactNative和Weex达到原生绘图,并能够横向扩展为更多股市方程式系统插件,对于有特殊需求的用户,可以提供自定义插件和数据结构c能力。ClChart开发与实现搭建开发环境*[x]使用eslint实现代码规范*[x]使用webpack进行代码打包*[x]编写示例demo*[]使用karma和mocha编写代码测试(进行中...)双层画布,主次层分离,高效绘图在研究tradingview的绘图程序时,我们发现,为了快速重画十字线等辅助线,使用双层画布分离十字线(如辅助线)线)和主层的绘图大大减少了快速移动十字准线所需的时间。额外的绘图计算来了。使androida在低端移动设备和网络应用程序上获得流畅的用户体验可扩展的数据层ClChart独立数据层的实现,它可以预处理数据、缓存函数、数据字段定义和读取字段,用户可以轻松地自定义省略数据字段以快速与现有数据集成。自定义公式系统ClChart支持自定义公式系统。开发者和用户都可以在使用过程中自定义绘图公式。PluginClChart支持自定义绘图插件,现在有插件数据标签类型截图ClChart项目地址、文档、测试用例github中文文档英文docsHTML5Demo可以分别在手机端和PC端打开体验ReactNativeDemo