資訊專欄INFORMATION COLUMN
摘要：什么是是一個(gè)基于創(chuàng)建的簡(jiǎn)單高性能和跨平臺(tái)的股票數(shù)據(jù)可視化開源項(xiàng)目。支持以及和等平臺(tái)。而針對(duì)股票等有價(jià)證劵特定的圖表庫(kù)有和等項(xiàng)目，這些圖表庫(kù)對(duì)股票繪圖已經(jīng)做了一些非常專業(yè)的處理及優(yōu)化了，但是他們均基于來(lái)繪圖。
什么是 ClChart？
ClChart是一個(gè)基于canvas創(chuàng)建的簡(jiǎn)單、高性能和跨平臺(tái)的股票數(shù)據(jù)可視化開源項(xiàng)目。支持PC、webApp以及React Native和Weex等平臺(tái)。在React Native和Weex上完全適配開源項(xiàng)目GCanvas，可輕松使用GCanvas來(lái)使得您開發(fā)的應(yīng)用在android和ios上具有原生繪圖的能力。
為什么需要ClChart在現(xiàn)有的開源庫(kù)中，不乏有非常不錯(cuò)的開源圖表庫(kù)，通用圖表庫(kù)有chartjs,echart,highchart等,這些圖表庫(kù)具有非常完備的圖表類型以及強(qiáng)大的繪圖能力及速度，但由于這些項(xiàng)目需要有通用性，在繪制有價(jià)證劵交易圖時(shí)我們需要進(jìn)行拓展是比較南。而針對(duì)股票等有價(jià)證劵特定的圖表庫(kù)有：techanjs和highcharts/highstock等項(xiàng)目，這些圖表庫(kù)對(duì)股票繪圖已經(jīng)做了一些非常專業(yè)的處理及優(yōu)化了，但是他們均基于svg來(lái)繪圖。我們?cè)诶L制大量數(shù)據(jù)圖表以及處理跨平臺(tái)時(shí)會(huì)存在性能問(wèn)題，
以下為我們?cè)谑褂眠^(guò)程中對(duì)各畫圖庫(kù)在繪制股票類型的K線圖做的一個(gè)比較以下所做的比較均為使用這些圖表庫(kù)來(lái)繪制有價(jià)證劵類型的K線圖的繪圖能力的比較,數(shù)據(jù)為主觀經(jīng)驗(yàn)判定
| chartjs | echart | techanjs | highchart | clchart | |
|---|---|---|---|---|---|
| 繪圖元素 | canvas | canvas & svg | svg | svg | canvas |
| 簡(jiǎn)單易用 | ☆☆☆☆☆ | ☆☆☆ | ☆☆☆☆ | ☆☆☆☆ | ☆☆☆☆☆ |
| 繪圖速度 | ☆☆☆☆☆ | ☆☆☆ | ☆☆ | ☆☆ | ☆☆☆☆☆ |
| 擴(kuò)展能力 | ☆☆☆ | ☆☆☆☆ | ☆☆☆☆ | ☆☆☆☆ | ☆☆☆☆☆ |
| 跨平臺(tái) | ☆☆☆ | ☆☆☆ | ☆☆ | ☆ | ☆☆☆☆☆ |
因此我們急需一個(gè)具有高性能、跨平臺(tái)、簡(jiǎn)單易用的股票類型的圖標(biāo)庫(kù)。
在現(xiàn)有的圖標(biāo)庫(kù)React Native中可以通過(guò)webview來(lái)加載html文件，使用window.document.addEventListener("message", function(e) {})以及window.postMessage來(lái)完成html與React Natve來(lái)通訊繪圖，但是使用實(shí)際的使用過(guò)程中，在一些性能較差的android設(shè)備上，特別是android版本小于4.4以下的android系統(tǒng)在繪圖大數(shù)據(jù)量圖表以及用戶交互的時(shí)候表現(xiàn)的特別的糟糕，經(jīng)常發(fā)生卡頓，并且有可能存在加載緩慢等問(wèn)題。
ClChart設(shè)計(jì)目標(biāo)
采用canvas開發(fā)一個(gè)具有高效、跨平臺(tái)的專業(yè)股票圖表庫(kù)
具有能兼容GCanvas提供的canvas接口，實(shí)現(xiàn)在React Native和Weex上達(dá)到原生繪圖，并且在針對(duì)股票市場(chǎng)多種的公式系統(tǒng)能過(guò)以插件的形式進(jìn)行水平擴(kuò)展，對(duì)于有特殊需求的用戶，能夠提供自定義插件及數(shù)據(jù)結(jié)構(gòu)的能力。
ClChart開發(fā)與實(shí)現(xiàn) 構(gòu)建開發(fā)環(huán)境[x] 使用eslint實(shí)現(xiàn)代碼規(guī)范
[x] 使用webpack來(lái)實(shí)現(xiàn)代碼打包
[x] 編寫示例demo
[ ] 使用karma以及mocha編寫代碼測(cè)試(進(jìn)行中...)
雙層canvas，主次圖層分離，高效繪圖在研究tradingview的繪圖程序時(shí)，我們發(fā)現(xiàn)其為了達(dá)到快速重繪十字光標(biāo)等輔助線時(shí)，使用雙層canvas分離十字光標(biāo)(等輔助線)與主圖層的繪制，大大減小快速移動(dòng)十字光標(biāo)時(shí)帶來(lái)的多余的繪圖計(jì)算。使得在低版本android手機(jī)設(shè)備和webApp上也能有流暢的用戶體驗(yàn)
可擴(kuò)展數(shù)據(jù)層ClChart實(shí)現(xiàn)獨(dú)立的數(shù)據(jù)層，其能對(duì)數(shù)據(jù)進(jìn)行預(yù)處理，緩存的功能，數(shù)據(jù)通過(guò)字段FIELD定義以及讀取，用戶可以方便自定義數(shù)據(jù)字段來(lái)快速與現(xiàn)有的數(shù)據(jù)進(jìn)行整合使用。
自定義公式系統(tǒng)ClChart支持自定義公式系統(tǒng)，開發(fā)者和用戶均可在使用過(guò)程中可以自定義公式進(jìn)行繪圖。
插件ClChart支持自定繪圖插件，現(xiàn)已實(shí)現(xiàn)插件有數(shù)據(jù)標(biāo)簽類型
?各平臺(tái)預(yù)覽 ClChart項(xiàng)目地址、文檔及測(cè)試用例clchart項(xiàng)目地址：github
中文文檔
English docs
HTML5 Demo 可在手機(jī)及PC分別打開體驗(yàn)
React Native Demo
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/52242.html
摘要：什么是是一個(gè)基于創(chuàng)建的簡(jiǎn)單高性能和跨平臺(tái)的股票數(shù)據(jù)可視化開源項(xiàng)目。支持以及和等平臺(tái)。而針對(duì)股票等有價(jià)證劵特定的圖表庫(kù)有和等項(xiàng)目，這些圖表庫(kù)對(duì)股票繪圖已經(jīng)做了一些非常專業(yè)的處理及優(yōu)化了，但是他們均基于來(lái)繪圖。 什么是 ClChart？ ClChart是一個(gè)基于canvas創(chuàng)建的簡(jiǎn)單、高性能和跨平臺(tái)的股票數(shù)據(jù)可視化開源項(xiàng)目。支持PC、webApp以及React Native和Weex等平臺(tái)...
摘要：什么是是一個(gè)基于創(chuàng)建的簡(jiǎn)單高性能和跨平臺(tái)的股票數(shù)據(jù)可視化開源項(xiàng)目。支持以及和等平臺(tái)。而針對(duì)股票等有價(jià)證劵特定的圖表庫(kù)有和等項(xiàng)目，這些圖表庫(kù)對(duì)股票繪圖已經(jīng)做了一些非常專業(yè)的處理及優(yōu)化了，但是他們均基于來(lái)繪圖。 什么是 ClChart？ ClChart是一個(gè)基于canvas創(chuàng)建的簡(jiǎn)單、高性能和跨平臺(tái)的股票數(shù)據(jù)可視化開源項(xiàng)目。支持PC、webApp以及React Native和Weex等平臺(tái)...
摘要：適用于，演示這是開發(fā)的一個(gè)簡(jiǎn)單的可視化庫(kù)，它允許你創(chuàng)建所有常用的圖表類型條形圖，樹形圖，折線圖，面積圖等。可以輕松地對(duì)折線圖和條形圖進(jìn)行混合和匹配以組合不同的數(shù)據(jù)集，這是非常棒的功能。 翻譯：瘋狂的技術(shù)宅原文：https://www.monterail.com/blo... 本文首發(fā)微信公眾號(hào)：jingchengyideng歡迎關(guān)注，每天都給你推送新鮮的前端技術(shù)文章 你的程序有多...
閱讀 2395·2019-08-30 15:56
閱讀 1052·2019-08-30 15:55
閱讀 3215·2019-08-30 15:44
閱讀 943·2019-08-30 10:53
閱讀 1899·2019-08-29 16:33
閱讀 2506·2019-08-29 16:13
閱讀 729·2019-08-29 12:41
閱讀 887·2019-08-26 13:56
