什么是 ClChart？
ClChart是一個(gè)基于canvas創(chuàng)建的簡單、高性能和跨平臺(tái)的股票數(shù)據(jù)可視化開源項(xiàng)目。支持PC、webApp以及React Native和Weex等平臺(tái)。在React Native和Weex上完全適配開源項(xiàng)目GCanvas，可輕松使用GCanvas來使得您開發(fā)的應(yīng)用在android和ios上具有原生繪圖的能力。
在現(xiàn)有的開源庫中，不乏有非常不錯(cuò)的開源圖表庫，通用圖表庫有chartjs,echart,highchart等,這些圖表庫具有非常完備的圖表類型以及強(qiáng)大的繪圖能力及速度，但由于這些項(xiàng)目需要有通用性，在繪制有價(jià)證劵交易圖時(shí)我們需要進(jìn)行拓展是比較南。而針對股票等有價(jià)證劵特定的圖表庫有：techanjs和highcharts/highstock等項(xiàng)目，這些圖表庫對股票繪圖已經(jīng)做了一些非常專業(yè)的處理及優(yōu)化了，但是他們均基于svg來繪圖。我們在繪制大量數(shù)據(jù)圖表以及處理跨平臺(tái)時(shí)會(huì)存在性能問題，
以下為我們在使用過程中對各畫圖庫在繪制股票類型的K線圖做的一個(gè)比較
以下所做的比較均為使用這些圖表庫來繪制有價(jià)證劵類型的K線圖的繪圖能力的比較,數(shù)據(jù)為主觀經(jīng)驗(yàn)判定
chartjsecharttechanjshighchartclchart
繪圖元素canvascanvas & svgsvgsvgcanvas
簡單易用☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
繪圖速度☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
擴(kuò)展能力☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
跨平臺(tái)☆☆☆☆☆☆☆☆☆☆☆☆☆☆
因此我們急需一個(gè)具有高性能、跨平臺(tái)、簡單易用的股票類型的圖標(biāo)庫。
在現(xiàn)有的圖標(biāo)庫React Native中可以通過webview來加載html文件，使用window.document.addEventListener('message', function(e) {})以及window.postMessage來完成html與React Natve來通訊繪圖，但是使用實(shí)際的使用過程中，在一些性能較差的android設(shè)備上，特別是android版本小于4.4以下的android系統(tǒng)在繪圖大數(shù)據(jù)量圖表以及用戶交互的時(shí)候表現(xiàn)的特別的糟糕，經(jīng)常發(fā)生卡頓，并且有可能存在加載緩慢等問題。
采用canvas開發(fā)一個(gè)具有高效、跨平臺(tái)的專業(yè)股票圖表庫??
具有能兼容GCanvas提供的canvas接口，實(shí)現(xiàn)在React Native和Weex上達(dá)到原生繪圖，并且在針對股票市場多種的公式系統(tǒng)能過以插件的形式進(jìn)行水平擴(kuò)展，對于有特殊需求的用戶，能夠提供自定義插件及數(shù)據(jù)結(jié)構(gòu)的能力。
?使用eslint實(shí)現(xiàn)代碼規(guī)范
?使用webpack來實(shí)現(xiàn)代碼打包
?編寫示例demo
?使用karma以及mocha編寫代碼測試(進(jìn)行中…)
在研究tradingview的繪圖程序時(shí)，我們發(fā)現(xiàn)其為了達(dá)到快速重繪十字光標(biāo)等輔助線時(shí)，使用雙層canvas分離十字光標(biāo)(等輔助線)與主圖層的繪制，大大減小快速移動(dòng)十字光標(biāo)時(shí)帶來的多余的繪圖計(jì)算。使得在低版本android手機(jī)設(shè)備和webApp上也能有流暢的用戶體驗(yàn)
ClChart實(shí)現(xiàn)獨(dú)立的數(shù)據(jù)層，其能對數(shù)據(jù)進(jìn)行預(yù)處理，緩存的功能，數(shù)據(jù)通過字段FIELD定義以及讀取，用戶可以方便自定義數(shù)據(jù)字段來快速與現(xiàn)有的數(shù)據(jù)進(jìn)行整合使用。
ClChart支持自定義公式系統(tǒng)，開發(fā)者和用戶均可在使用過程中可以自定義公式進(jìn)行繪圖。
ClChart支持自定繪圖插件，現(xiàn)已實(shí)現(xiàn)插件有數(shù)據(jù)標(biāo)簽類型
clchart項(xiàng)目地址：github
HTML5 Demo?可在手機(jī)及PC分別打開體驗(yàn)
