High-performance, cross-platform stock chart library based on the canvas - clchart

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册户请登录

推荐关注

Meteor

JSLint - a Javascript code quality tool

jsFiddle

D3.js

WebStorm

推荐书目

Javascript 权威指南第 5 版

Closure: The Definitive Guide

这是一个创建于 2793 天前的主题，其中的信息可能已经有所发展或是发生改变。

##WhatisClChart

ClChartisasimple,high-performanceandcross-platformopensourceprojectforstockdatavisualizationcreatedbasedonthecanvas.SupportPC,webAppandReactNativeandWeexplatforms.FullyadaptingtheopensourceprojectGCanvasonReactNativeandWeexmakesiteasytouseGCanvastoenableyourdevelopedapplicationstohavenativedrawingcapabilitiesonandroidandios.

##WhydoyouneedClChart

Intheexistingopensourcelibraries,therearenoshortageofverygoodopensourcechartlibraries.Thegeneralchartlibrariesincludechartjs,echart,highchart,etc.Thesechartlibrarieshaveverycompletecharttypesandpowerfuldrawingcapabilitiesandspeeds,butduetotheneedoftheseitemsThereisgenerality,andweneedtoexpandwhenwedrawthetradingdocument.Thespecificchartlibrariesforstockssuchasstocksare:techanjsandhighcharts/highstock.Thesechartinglibrarieshavedonesomeveryprofessionalprocessingandoptimizationofthestockdrawing,buttheyareallbasedonsvgdrawing.Wehaveperformanceissueswhendrawinglargenumbersofdatagraphsanddealingwithcross-platforms.

ThefollowingisacomparisonoftheK-chartsdrawnbythestocksofeachgalleryintheuseprocess. Thefollowingcomparisonsarebasedontheuseofthesechartinglibrariestodrawcomparisonsofthemappingcapabilitiesofthesecuritiesofthesecuritiestype,andthedatasubjectiveexperiencedetermination.

||chartjs|echart|techanjs|highchart|clchart| |---|---|---|---|---|---| |Drawingelement|canvas|canvas&svg|svg|svg|canvas| |Easytouse|☆☆☆☆☆|☆☆☆|☆☆☆☆|☆☆☆☆|☆☆☆☆☆| |Drawingspeed|☆☆☆☆☆|☆☆☆|☆☆|☆☆|☆☆☆☆☆| |Expandingability|☆☆☆|☆☆☆☆|☆☆☆☆|☆☆☆☆|☆☆☆☆☆| |Cross-platform|☆☆☆|☆☆☆|☆☆|☆|☆☆☆☆☆|

Therefore,weurgentlyneedaniconlibrarywithhigh-performance,cross-platform,andeasy-to-usestocktypes.

IntheexistingiconlibraryReactNative,youcanloadhtmlfilesviawebview,usewindow.document.addEventListener('message',function(e){})andwindow.postMessagetocompletethehtmlandReactNatvecommunicationdrawing,butusetheactualuseprocess,insomepoorperformanceandroiddevices,especiallyandroidAndroidsystemswithversionslowerthan4.4performparticularlybadlywhenplottinglargedatavolumegraphsanduserinteractions.Catonoftenoccurs,andtheremaybeissuessuchasslowloading. ##ClChartdesigngoals

Theuseofcanvasdevelopmenthasahighlyefficient,cross-platformofprofessionalstockchartinglibrary

HavingcompatibleGCanvasprovidedcanvasinterface,inReactNativeandWeexreachnativedrawingon,andabletolivehorizontallyextendedformorestockmarketequationsystemintheformofplug-ins,foruserswithspecialneeds,itispossibletoprovidecustomPlug-inanddatastructurecapabilities.

##ClChartdevelopmentandimplementation

###Builddevelopmentenvironment

*[x]Usingeslinttoimplementcodespecification *[x]Usingwebpackforcodepackaging *[x]Writeanexampledemo *[]Usekarmaandmochatowritecodetests(inprogress...)

###Double-layercanvas,separationofprimaryandsecondarylayers,efficientdrawing

Whenstudyingthedrawingprogramoftradingview,wefoundthatinordertoquicklyredrawtheauxiliarylinessuchascrosshairs,theuseofdouble-layeredcanvasseparationcrosshairs(suchasauxiliarylines)andthedrawingofthemainlayergreatlyreducesthetimeneededtoquicklymovethecrosshairs.Theextradrawingcalculationscome.Enablesandroidasmoothuserexperienceonlow-endmobiledevicesandwebapps

###Scalabledatalayer

ClChartImplementationofanindependentdatalayer,whichcanpreprocessthedata,cachefunctions,dataFIELDdefinitionandreadthroughthefield,theusercaneasilycustomizethedatafieldtoquicklyintegratewiththeexistingdata.

###Customformulasystem

ClChartSupportscustomformulasystems.Bothdevelopersanduserscancustomizeformulasfordrawingduringuse.

###Plugin

ClChartSupportscustomdrawingplug-ins,nowhasplug-indatatagtypes

##Screenshot