资讯专栏INFORMATION COLUMN

Cross-platform stock chart library based on the ca

Kerr1Gan / 2647人阅读

摘要:中文文档

 What is ClChart

ClChart is a simple, high-performance and cross-platform open source project for stock data visualization created based on the canvas. Support PC, webApp and React Native and Weex platforms. Fully adapting the open source project GCanvas on React Native and Weex makes it easy to use GCanvas to enable your developed applications to have native drawing capabilities on android and ios.

 Why do you need ClChart

In the existing open source libraries, there are no shortage of very good open source chart libraries. The general chart libraries include chartjs,echart,highchart, etc. These chart libraries have very complete chart types and powerful drawing capabilities and speeds, but due to the need of these items There is generality, and we need to expand when we draw the trading document. The specific chart libraries for stocks such as stocks are: techanjs and highcharts/highstock . These charting libraries have done some very professional processing and optimization of the stock drawing, but they are all based on svgdrawing. We have performance issues when drawing large numbers of data graphs and dealing with cross-platforms.

The following is a comparison of the K-charts drawn by the stocks of each gallery in the use process.
The following comparisons are based on the use of these charting libraries to draw comparisons of the mapping capabilities of the securities of the securities type, and the data subjective experience determination.

|   | chartjs | echart | techanjs | highchart | clchart |
| --- | --- | --- | --- | --- | --- |
| Drawing element |canvas| canvas & svg| svg | svg | canvas |
| Easy to use | ☆☆☆☆☆ | ☆☆☆ | ☆☆☆☆  | ☆☆☆☆ | ☆☆☆☆☆ |
| Drawing speed | ☆☆☆☆☆ | ☆☆☆ | ☆☆ | ☆☆ | ☆☆☆☆☆ |
| Expanding ability | ☆☆☆ | ☆☆☆☆ | ☆☆☆☆ | ☆☆☆☆ | ☆☆☆☆☆ |
| Cross-platform | ☆☆☆ | ☆☆☆ | ☆☆ | ☆ | ☆☆☆☆☆ |

Therefore, we urgently need an icon library with high-performance, cross-platform, and easy-to-use stock types.

In the existing icon library React Native, you can load html files via webview, use window.document.addEventListener("message", function(e) {})and window.postMessageto complete the html and React Natve communication drawing, but use the actual use process, in some poor performance android devices, especially android Android systems with versions lower than 4.4 perform particularly badly when plotting large data volume graphs and user interactions. Caton often occurs, and there may be issues such as slow loading.

 ClChart design goals

The use of canvasdevelopment has a highly efficient , cross-platform of professional stock charting library 

Having compatible GCanvas provided canvasinterface, in React Native and Weex reach native drawing on, and able to live horizontally extended for more stock market equation system in the form of plug-ins, for users with special needs, it is possible to provide custom Plug-in and data structure capabilities.

 ClChart development and implementation  Build development environment

* [x] Using eslint to implement code specification
* [x] Using webpack for code packaging
* [x] Write an example demo
* [ ] Use karma and mocha to write code tests (in progress...)

 Double-layer canvas, separation of primary and secondary layers, efficient drawing

When studying the drawing program of tradingview , we found that in order to quickly redraw the auxiliary lines such as crosshairs, the use of double-layered canvasseparation crosshairs (such as auxiliary lines) and the drawing of the main layer greatly reduces the time needed to quickly move the crosshairs. The extra drawing calculations come. Enables androida smooth user experience on low-end mobile devices and web apps

 Scalable data layer

ClChartImplementation of an independent data layer, which can preprocess the data, cache functions, data FIELDdefinition and read through the field , the user can easily customize the data field to quickly integrate with the existing data.

 Custom formula system

ClChartSupports custom formula systems. Both developers and users can customize formulas for drawing during use.

 Plugin

ClChartSupports custom drawing plug-ins, now has plug-in data tag types

 Screenshot

 ClChart project address, documentation, and test cases

github

中文文档

English docs

HTML5 Demo Can open experience on mobile phone and PC separately

React Native Demo

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/94826.html

相关文章

  • 搜集React、Vue、Angular和传统UI组件库以及后台管理平台模板

    摘要:高颜值好用易扩展的微信小程序库,有赞。一套高质量的微信小程序组件库。用和搭建的一个通用管理后台基于实现的后台管理系统模板一个后台管理系统模板是一套组件化框架,支持定制主题,主要服务于前台及中后台产品。基于后台管理系统。 快来Star,在这里哦Awesome UIKit。 showImg(https://segmentfault.com/img/remote/14600000059942...

    zhangrxiang 评论0 收藏0
  • 搜集React、Vue、Angular和传统UI组件库以及后台管理平台模板

    摘要:高颜值好用易扩展的微信小程序库,有赞。一套高质量的微信小程序组件库。用和搭建的一个通用管理后台基于实现的后台管理系统模板一个后台管理系统模板是一套组件化框架,支持定制主题,主要服务于前台及中后台产品。基于后台管理系统。 快来Star,在这里哦Awesome UIKit。 showImg(https://segmentfault.com/img/remote/14600000059942...

    source 评论0 收藏0
  • Awesome Python II

    摘要: Caching Libraries for caching data. Beaker - A library for caching and sessions for use with web applications and stand-alone Python scripts and applications. dogpile.cache - dogpile.cache...

    lx1036 评论0 收藏0
  • React Native Vs. Xamarin Vs. Ionic Vs. Flutter

    React Native Vs. Xamarin Vs. Ionic Vs. Flutter:Which Is Best For Cross-Platform Mobile App Development? While developing Native Mobile Apps, Android apps are written in Java, and iOS ones in Swift and...

    Clect 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<