基于canvas实现的高性能、跨平台的股票图表库--clchart

什么是 ClChart?

ClChart是一个基于canvas创建的简单、高性能和跨平台的股票数据可视化开源项目。支持PC、webApp以及React NativeWeex等平台。在React NativeWeex上完全适配开源项目GCanvas,可轻松使用GCanvas来使得您开发的应用在android和ios上具有原生绘图的能力。

为什么需要ClChart

在现有的开源库中,不乏有非常不错的开源图表库,通用图表库有chartjs,echart,highchart等,这些图表库具有非常完备的图表类型以及强大的绘图能力及速度,但由于这些项目需要有通用性,在绘制有价证劵交易图时我们需要进行拓展是比较南。而针对股票等有价证劵特定的图表库有:techanjshighcharts/highstock等项目,这些图表库对股票绘图已经做了一些非常专业的处理及优化了,但是他们均基于svg来绘图。我们在绘制大量数据图表以及处理跨平台时会存在性能问题,

以下为我们在使用过程中对各画图库在绘制股票类型的K线图做的一个比较

以下所做的比较均为使用这些图表库来绘制有价证劵类型的K线图的绘图能力的比较,数据为主观经验判定

chartjsecharttechanjshighchartclchart

绘图元素canvascanvas & svgsvgsvgcanvas

简单易用☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆

绘图速度☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆

扩展能力☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆

跨平台☆☆☆☆☆☆☆☆☆☆☆☆☆☆

因此我们急需一个具有高性能、跨平台、简单易用的股票类型的图标库。

在现有的图标库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 NativeWeex上达到原生绘图,并且在针对股票市场多种的公式系统能过以插件的形式进行水平扩展,对于有特殊需求的用户,能够提供自定义插件及数据结构的能力。

ClChart开发与实现

构建开发环境

 使用eslint实现代码规范

 使用webpack来实现代码打包

 编写示例demo

 使用karma以及mocha编写代码测试(进行中…)

双层canvas,主次图层分离,高效绘图

在研究tradingview的绘图程序时,我们发现其为了达到快速重绘十字光标等辅助线时,使用双层canvas分离十字光标(等辅助线)与主图层的绘制,大大减小快速移动十字光标时带来的多余的绘图计算。使得在低版本android手机设备和webApp上也能有流畅的用户体验

可扩展数据层

ClChart实现独立的数据层,其能对数据进行预处理,缓存的功能,数据通过字段FIELD定义以及读取,用户可以方便自定义数据字段来快速与现有的数据进行整合使用。

自定义公式系统

ClChart支持自定义公式系统,开发者和用户均可在使用过程中可以自定义公式进行绘图。

插件

ClChart支持自定绘图插件,现已实现插件有数据标签类型

各平台预览

ClChart项目地址、文档及测试用例

clchart项目地址:github

中文文档

English docs

HTML5 Demo 可在手机及PC分别打开体验

React Native Demo

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,033评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,725评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,473评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,846评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,848评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,691评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,053评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,700评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,856评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,430评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,034评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2 343

推荐阅读更多精彩内容