基於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系統在繪圖大數據量圖表以及用戶交互的時候表現的特別的糟糕，常常發生卡頓，而且有可能存在加載緩慢等問題。

ClChart設計目標

採用canvas開發一個具備高效、跨平臺的專業股票圖表庫📈

具備能兼容GCanvas提供的canvas接口，實如今React Native和Weex上達到原生繪圖，而且在針對股票市場多種的公式系統能過以插件的形式進行水平擴展，對於有特殊需求的用戶，可以提供自定義插件及數據結構的能力。

ClChart開發與實現

構建開發環境

• [x] 使用eslint實現代碼規範
• [x] 使用webpack來實現代碼打包
• [x] 編寫示例demo
• [ ] 使用karma以及mocha編寫代碼測試(進行中...)

雙層canvas，主次圖層分離，高效繪圖

在研究tradingview的繪圖程序時，咱們發現其爲了達到快速重繪十字光標等輔助線時，使用雙層canvas分離十字光標(等輔助線)與主圖層的繪製，大大減少快速移動十字光標時帶來的多餘的繪圖計算。使得在低版本android手機設備和webApp上也能有流暢的用戶體驗

可擴展數據層

ClChart實現獨立的數據層，其能對數據進行預處理，緩存的功能，數據經過字段FIELD定義以及讀取，用戶能夠方便自定義數據字段來快速與現有的數據進行整合使用。

自定義公式系統

ClChart支持自定義公式系統，開發者和用戶都可在使用過程當中能夠自定義公式進行繪圖。

插件

ClChart支持自定繪圖插件，現已實現插件有數據標籤類型

示例

mobile web

pc web

小程序

react native

ClChart項目地址、文檔及測試用例

clchart項目地址：github

中文文檔

English docs

HTML5 Demo 可在手機及PC分別打開體驗

React Native Demo

Wechat applet demo