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