基于canvas实现的高性能、跨平台的股票图表库--clchart

什么是 ClChart？

ClChart是一个基于canvas创建的简单、高性能和跨平台的股票数据可视化开源项目。支持PC、webApp以及React Native和Weex等平台。在React Native和Weex上完全适配开源项目GCanvas，可轻松使用GCanvas来使得您开发的应用在android和ios上具有原生绘图的能力。

为什么需要ClChart

在现有的开源库中，不乏有非常不错的开源图表库，通用图表库有chartjs,echart,highchart等,这些图表库具有非常完备的图表类型以及强大的绘图能力及速度，但由于这些项目需要有通用性，在绘制有价证劵交易图时我们需要进行拓展是比较南。而针对股票等有价证劵特定的图表库有：techanjs和highcharts/highstock等项目，这些图表库对股票绘图已经做了一些非常专业的处理及优化了，但是他们均基于svg来绘图。我们在绘制大量数据图表以及处理跨平台时会存在性能问题，

以下为我们在使用过程中对各画图库在绘制股票类型的K线图做的一个比较

以下所做的比较均为使用这些图表库来绘制有价证劵类型的K线图的绘图能力的比较,数据为主观经验判定

	chartjs	echart	techanjs	highchart	clchart
绘图元素	canvas	canvas & svg	svg	svg	canvas
简单易用	☆☆☆☆☆	☆☆☆	☆☆☆☆	☆☆☆☆	☆☆☆☆☆
绘图速度	☆☆☆☆☆	☆☆☆	☆☆	☆☆	☆☆☆☆☆
扩展能力	☆☆☆	☆☆☆☆	☆☆☆☆	☆☆☆☆	☆☆☆☆☆
跨平台	☆☆☆	☆☆☆	☆☆	☆	☆☆☆☆☆

因此我们急需一个具有高性能、跨平台、简单易用的股票类型的图标库。

在现有的图标库React Native中可以通过webview来加载html文件，使用window.document.addEventListener(‘message‘, function(e) {})以及window.postMessage来完成html与React Natve来通讯绘图，但是使用实际的使用过程中，在一些性能较差的android设备上，特别是android版本小于4.4以下的android系统在绘图大数据量图表以及用户交互的时候表现的特别的糟糕，经常发生卡顿，并且有可能存在加载缓慢等问题。