Based on canvas to achieve high-performance, cross-platform stock chart library --clchart

What is ClChart?

ClChart is based on a simple canvas to create, share data across platforms and high-performance visualization of open source projects. Support PC, webApp and React Native and Weex platforms. In React Native and Weex on fully adapted open source projects GCanvas , can easily use GCanvas to make your application has the ability to develop original drawing on android and ios.

Why ClChart

In the existing open source libraries, there are many very good open source charting library, common chart library has chartjs , echart , highchart , these charts have a very comprehensive library of chart types and powerful graphics capabilities and speed, but because these projects require there are universal, when drawing valuable securities trading chart is more we need to expand the South. While prices for stocks and other securities have specific charting library: techanjs and highcharts / highstock other projects, these libraries to stock chart plotter has done some very professional processing and optimization, but they are based svgto drawing. We will draw a lot of data and chart performance problems when dealing with cross-platform,

The following is a comparison of each painting gallery in our K-line drawing of the type of stock made in the course of

The following are the comparisons made using these libraries to draw a graph comparing the ability of drawing valuable securities type K-line graph, the data for the subjective experience is determined

	chartjs	echart	techanjs	highchart	clchart
Drawing elements	canvas	canvas & svg	svg	svg	canvas
Easy to use	☆☆☆☆☆	☆☆☆	☆☆☆☆	☆☆☆☆	☆☆☆☆☆
Drawing speed	☆☆☆☆☆	☆☆☆	☆☆	☆☆	☆☆☆☆☆
Scalability	☆☆☆	☆☆☆☆	☆☆☆☆	☆☆☆☆	☆☆☆☆☆
Cross-platform	☆☆☆	☆☆☆	☆☆	☆	☆☆☆☆☆

Therefore, we need a high-performance, cross-platform, easy-to-use type of stock icon library.

In the conventional icon library React Native html file can be loaded, by using webview window.document.addEventListener('message', function(e) {}) and window.postMessage accomplished html React Natve for communication with the drawing, but in actual use, the poor performance of some android devices, especially android android system version is less than 4.4 or less in a particularly large amount of bad data charts and graphics performance when user interaction, often Caton, and there may load slowly and so on.

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 the ability to plug-ins and data structures.

ClChart Development and Implementation

Building a development environment

[X] implemented using code specifications eslint
[X] be implemented using the code package webpack
[x] prepared sample demo
[] Using the write code karma mocha and tests (in progress ...)

Canvas bilayer, primary and secondary layers separated, and efficient drawing

Study tradingview when drawing program, we found that in order to achieve rapid redraw crosshairs other auxiliary lines, the use of double canvasdrawn separating the crosshairs (auxiliary line) and the main layer, is greatly reduced when the tape quickly moves the crosshairs to calculate the excess drawing. So that the low version androidon mobile devices and webApp can also have a smooth user experience

Scalable data layer

ClChartIndependence of the data layer, which can be preprocessed data, the cache function, data fields FIELDto quickly integrate with existing definitions, and data reading, the user can easily customize the data fields.