基于canvas實(shí)現(xiàn)的高性能、跨平臺的股票圖表庫--clchart

SnaiLiu 發(fā)布于2019-08-29 15:09 / 1343人閱讀

摘要：什么是是一個基于創(chuàng)建的簡單高性能和跨平臺的股票數(shù)據(jù)可視化開源項(xiàng)目。支持以及和等平臺。而針對股票等有價證劵特定的圖表庫有和等項(xiàng)目，這些圖表庫對股票繪圖已經(jīng)做了一些非常專業(yè)的處理及優(yōu)化了，但是他們均基于來繪圖。

什么是 ClChart？

ClChart是一個基于canvas創(chuàng)建的簡單、高性能和跨平臺的股票數(shù)據(jù)可視化開源項(xiàng)目。支持PC、webApp以及React Native和Weex等平臺。在React Native和Weex上完全適配開源項(xiàng)目GCanvas，可輕松使用GCanvas來使得您開發(fā)的應(yīng)用在android和ios上具有原生繪圖的能力。

為什么需要ClChart

在現(xiàn)有的開源庫中，不乏有非常不錯的開源圖表庫，通用圖表庫有chartjs,echart,highchart等,這些圖表庫具有非常完備的圖表類型以及強(qiáng)大的繪圖能力及速度，但由于這些項(xiàng)目需要有通用性，在繪制有價證劵交易圖時我們需要進(jìn)行拓展是比較南。而針對股票等有價證劵特定的圖表庫有：techanjs和highcharts/highstock等項(xiàng)目，這些圖表庫對股票繪圖已經(jīng)做了一些非常專業(yè)的處理及優(yōu)化了，但是他們均基于svg來繪圖。我們在繪制大量數(shù)據(jù)圖表以及處理跨平臺時會存在性能問題，

以下為我們在使用過程中對各畫圖庫在繪制股票類型的K線圖做的一個比較

以下所做的比較均為使用這些圖表庫來繪制有價證劵類型的K線圖的繪圖能力的比較,數(shù)據(jù)為主觀經(jīng)驗(yàn)判定

	chartjs	echart	techanjs	highchart	clchart
繪圖元素	canvas	canvas & svg	svg	svg	canvas
簡單易用	☆☆☆☆☆	☆☆☆	☆☆☆☆	☆☆☆☆	☆☆☆☆☆
繪圖速度	☆☆☆☆☆	☆☆☆	☆☆	☆☆	☆☆☆☆☆
擴(kuò)展能力	☆☆☆	☆☆☆☆	☆☆☆☆	☆☆☆☆	☆☆☆☆☆
跨平臺	☆☆☆	☆☆☆	☆☆	☆	☆☆☆☆☆

因此我們急需一個具有高性能、跨平臺、簡單易用的股票類型的圖標(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ù)量圖表以及用戶交互的時候表現(xiàn)的特別的糟糕，經(jīng)常發(fā)生卡頓，并且有可能存在加載緩慢等問題。

ClChart設(shè)計(jì)目標(biāo)

采用canvas開發(fā)一個具有高效、跨平臺的專業(yè)股票圖表庫

具有能兼容GCanvas提供的canvas接口，實(shí)現(xiàn)在React Native和Weex上達(dá)到原生繪圖，并且在針對股票市場多種的公式系統(tǒng)能過以插件的形式進(jìn)行水平擴(kuò)展，對于有特殊需求的用戶，能夠提供自定義插件及數(shù)據(jù)結(jié)構(gòu)的能力。

ClChart開發(fā)與實(shí)現(xiàn) 構(gòu)建開發(fā)環(huán)境

[x] 使用eslint實(shí)現(xiàn)代碼規(guī)范

[x] 使用webpack來實(shí)現(xiàn)代碼打包

[x] 編寫示例demo

[ ] 使用karma以及mocha編寫代碼測試(進(jìn)行中...)

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

在研究tradingview的繪圖程序時，我們發(fā)現(xiàn)其為了達(dá)到快速重繪十字光標(biāo)等輔助線時，使用雙層canvas分離十字光標(biāo)(等輔助線)與主圖層的繪制，大大減小快速移動十字光標(biāo)時帶來的多余的繪圖計(jì)算。使得在低版本android手機(jī)設(shè)備和webApp上也能有流暢的用戶體驗(yàn)

可擴(kuò)展數(shù)據(jù)層

ClChart實(shí)現(xiàn)獨(dú)立的數(shù)據(jù)層，其能對數(shù)據(jù)進(jìn)行預(yù)處理，緩存的功能，數(shù)據(jù)通過字段FIELD定義以及讀取，用戶可以方便自定義數(shù)據(jù)字段來快速與現(xiàn)有的數(shù)據(jù)進(jìn)行整合使用。

自定義公式系統(tǒng)

ClChart支持自定義公式系統(tǒng)，開發(fā)者和用戶均可在使用過程中可以自定義公式進(jìn)行繪圖。

插件

ClChart支持自定繪圖插件，現(xiàn)已實(shí)現(xiàn)插件有數(shù)據(jù)標(biāo)簽類型

?各平臺預(yù)覽

ClChart項(xiàng)目地址、文檔及測試用例

clchart項(xiàng)目地址：github

中文文檔

English docs

HTML5 Demo 可在手機(jī)及PC分別打開體驗(yàn)

React Native Demo

云服務(wù)器 GPU云服務(wù)器基于webrtc的電話回聲消除的研究與實(shí)現(xiàn) 基于webrtc的視頻會議系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn) 基于云計(jì)算的平臺基于防火墻技術(shù)的校園網(wǎng)絡(luò)安全設(shè)計(jì)與實(shí)現(xiàn)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/113130.html