什麼是 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
HTML5 Demo 可在手機及PC分別開啟體驗