锛岄€氳繃璺ㄧCanvas灏嗗熀浜嶫avascript鐨勫浘褰㈣娉曞簱ChartSpace鎵╁睍鍒癋lutter绔綔鑰咃細瀛楄妭璺冲姩缁堢鎶€鏈?Hooper鑳屾櫙璧勬枡骞冲彴鎷ユ湁鍩轰簬鍥惧舰璇硶鐨勫浘琛ㄥ簱ChartSpace锛屾敮鎸亀eb/h5/灏忕▼搴忋€傜幇鍦ㄦ帴鍒颁笟鍔￠渶姹傦紝闇€瑕佸湪Flutter绔敮鎸併€備负浜嗘柟渚跨悊瑙ｏ紝鎴戠畝鍗曡В閲婁竴涓嬪浘鏂囨硶鐨勬蹇碉紝宸茬粡鐞嗚В鐨勫彲浠ヨ烦杩囪繖涓€娈点€侴rammarofGraphics锛堝浘褰㈣娉曪級鏄竴濂楁弿杩颁换鎰忓浘褰㈢殑璇硶锛屼富瑕佹潵鑷猈ilkinson鐨勩€奣he Grammar of Graphics銆嬶紝璇峰弬鑰冩枃绔狅細https://zhuanlan.zhihu.com/p/...GraphicGrammarandGeneral鍥捐〃鐨勪富瑕佸尯鍒槸锛氬浘褰㈣娉曞彧闇€瑕佷慨鏀硅娉曟弿杩帮紝灏卞彲浠ュ緱鍒板畬鍏ㄤ笉鍚岀殑鍥惧舰锛岃€屾櫘閫氬浘琛ㄩ渶瑕佹坊鍔犲浘琛ㄧ被鍨嬨€傚浘褰㈣娉曟墍鑳芥弿杩扮殑鍥惧舰鍑犱箮鏄棤绌锋棤灏界殑锛岃€屽浘琛ㄧ殑绉嶇被鍗存槸鏈夐檺鐨勩€備緥濡傦紙鎴彇鑷細https://segmentfault.com/a/11...锛夛細濡傛灉鎴戜滑鏍规嵁鍥惧舰璇硶缁樺埗鐩存柟鍥撅紝灏嗚娉曚腑鐨勫潗鏍囩郴鎹㈡垚鏋佸潗鏍囷紝灏变細鍙樻垚鐜懓鍥捐娉曡皟鏁村潗鏍囨祴閲忓苟娣诲姞涓嶅悓鐨勯鑹插悗锛屽氨鍙樻垚浜嗕竴涓洿瀹屾暣鐨勭帿鐟板浘銆傜户缁皟鏁磋娉曞弬鏁帮紝缁堜簬鍙互寰楀埌楗煎浘浜嗐€傛湰渚嬩腑锛屽鏋滀娇鐢ㄩ€氱敤鍥捐〃锛堝ECharts锛夛紝鑷冲皯闇€瑕?绉嶅浘琛ㄧ被鍨嬶紝鍥捐〃鏁版嵁鐨勬牸寮忎篃鍙兘瀛樺湪宸紓銆傝€屼娇鐢ㄥ浘鏂囨硶鎻忚堪锛屽彧闇€瑕佽皟鏁翠笉鍚岀殑鏂囨硶鍙傛暟灏卞彲浠ュ緱鍒颁笉鍚岀殑鍥俱€傚浘鏂囨硶鍙互閫氳繃璋冩暣鏂囨硶鍙傛暟寰楀埌涓嶅悓鐨勫浘锛屼负鏁版嵁琛ㄨ揪鎻愪緵浜嗘洿澶х殑绌洪棿銆傚畠灞炰簬鏇翠笓涓氱殑鍥捐〃寮曟搸锛屼絾涔熷甫鏉ヤ簡鏇村鏉傜殑璇硶瑙勫垯銆傚熀浜庡浘褰㈣娉曪紝鍓嶇甯哥敤鐨勫浘琛ㄥ簱锛圝S璇硶锛夛細G2锛氳殏铓侀噾鏈嶅熀浜庡浘褰㈣娉曠殑鍥捐〃搴擄紝鍥惧舰璇硶浣跨敤constds=newDataSet();constchart=newChart({...});...constdv2=ds.createView().source(dv1.rows);dv2.transform({type:'regression',method:'polynomial',fields:['year','death']锛屽甫瀹斤細0.1锛屽锛歔'year','death']});constview2=chart.createView();view2.axis(false);view2.data(dv2.rows);...鍥捐〃銆俽ender();Vega:寮€婧愬浘鏂囨硶妗嗘灦锛岄€氳繃json閰嶇疆浣跨敤鍥炬枃娉晎width:500,height:200,config:{axis:{grid:true,gridColor:#dedede}},...}ChartSpace锛歸ordsSectionbeat鏄竴涓熀浜庡浘褰㈣娉曠殑鍥惧舰搴撱€傞€氳繃json閰嶇疆浣跨敤鍥惧舰璇硶锛岃娉曠被浼糣ega{type:line,data:[],labels:{visible:false},axes:[{orient:left},{orient:bottom}],xField:x,yField:y}鍦ㄨ法缁堢銆佽法璇█鐨勬儏鍐典笅锛宩son閰嶇疆鐨勮娉曞叿鏈夋洿濂界殑澶氱粓绔竴鑷存€с€傚悗绔繚瀛樺悓涓€濂梛son閰嶇疆锛屽彲浠ュ湪澶氫釜缁堢缁樺埗鐩稿悓鐨勫浘褰€傚浘琛ㄥ簱ChartSpaceChartSpace鏄瓧鑺傛暟鎹钩鍙扮殑鍩轰簬鍥惧舰璇硶鐨勫浘琛ㄥ簱銆傚凡缁忔敮鎸亀eb/h5/灏忕▼搴忥紝鐜板湪灏嗘敮鎸乫lutter绔€傚湪涓氬姟鏂归潰锛屾湡鏈涘缁堢鍗忓悓锛屽悓涓€浠芥暟鎹湪涓嶅悓缁堢琛ㄧ幇涓€鑷淬€備互鎶樼嚎鍥句负渚嬶細甯歌鐨勬柟妗堟槸瀹炵幇涓€濂梖lutter鐗堢殑鍥惧舰璇箟锛屽垎鏋恈hartspace鐨勮涔夐厤缃紝灏嗗畠浠粯鍒舵垚鍚屼竴涓鑼冦€傚浘褰€備絾鏄繖绉嶆柟妗堝甫鏉ョ殑寮€鍙戞垚鏈瘮杈冮珮锛屾墍浠ユ垜浠€夋嫨浜嗗彟涓€绉嶆柟妗堬細璺ㄧcanvas銆傚叾鍘熺悊鏄皢chartspace(js)浣跨敤鐨剋ebcanvas涓婄粯鍒剁殑鍐呭锛岄€氳繃璺ㄧ鎶€鏈憟鐜扮粰fluttercanvas銆傝瀹炵幇杩欎釜瑙ｅ喅鏂规锛屾垜浠渶瑕佽В鍐充袱涓棶棰橈細缁樺埗浜嬬墿銆佽繛鎺ヤ氦浜掑拰缁樺埗浜嬬墿銆傛牳蹇冩€濇兂锛氬皢chartspace(js)canvas缁樺浘鎸囦护鐨勬墽琛屼粠js杞Щ鍒癴lutter鎵ц锛岀洰鏍囨槸瀵归綈FlutterCanvas鍜學ebCanvas銆傚疄鐜版柟寮忔槸锛氬湪JS涓瀯閫燤ockCanvas瀵硅薄锛岃褰昪anvas鎸囦护锛岀劧鍚庡彂閫佺粰Flutter绔紝閫氳繃FlutterCanvas瀹炵幇杩欎簺鎸囦护銆備富瑕佸伐浣滈噺鏄敤FlutterCanvas瀹炵幇涓€濂梂ebCanvasAPI銆備覆璧蜂氦浜掔敤鎴蜂氦浜掔殑杈撳叆鏄Е鎽镐簨浠躲€傛偍鍙渶瑕佸皢FlutterPointerEvent杞崲涓篧ebTouchEvent骞跺皢鍏惰緭鍏ュ埌鍥捐〃绌洪棿涓嵆鍙€備箣鍚庯紝chartspace浼氱敓鎴愪竴涓柊鐨刢anvas鍛戒护锛岀敤浜庡湪FlutterCanvas涓粯鍒舵柊鐨勫唴瀹广€傝繃绋嬩笌绗竴娆℃覆鏌撶浉鍚岋紝鑷虫浜や簰瀹屾垚銆傛晥鏋滃畬鎴愬悗鏁堟灉濡備笅銆倀ooltip鐨勬晥鏋滄槸鍦ㄦ墜鎸囩偣鍑诲悗浜х敓鐨勩€傝幏寰楃殑濂藉鏄細浣庢垚鏈疄鏂姐€佷綆鎴愭湰缁存姢銆佽法缁堢涓€鑷存€с€傛覆鏌撴€ц兘瀵规瘮锛氬紑鍙戞湡闂村仛浜嗗緢澶氫紭鍖栥€傚浘褰㈡覆鏌撴椂闂村凡浠?0姣浼樺寲鍒?0姣銆傛垜浠粛鍦ㄤ紭鍖栦互瀹炵幇鎺ヨ繎鍘熺敓鐨勪綋楠屻€傚悗缁垜浠殑鍏朵粬灏忎紮浼翠細鍒嗕韩浼樺寲鎬濊矾鍜屽疄璺点€傝法绔疌anvas绾疐luttergraph娓叉煋52ms20mstooltip娓叉煋9ms0ms璺ㄧCanvas鏁版嵁浠庣敤鎴疯緭鍏ュ埌鍥惧舰娓叉煋缁撴潫锛屽寘鎷ˉ鎺ヤ紶杈擄紝chartspace(js)鐢熸垚canvas鍛戒护鏃堕棿銆侾ureFlutter鏄皢鐩稿悓鐨刢anvas鎸囦护杞负Flutter浠ｇ爜鍚庣殑鎵ц鏃堕棿銆傚彲浠ョ湅鍒版覆鏌撴€ц兘鍜岀函Flutter妯″紡鏈変竴瀹氱殑宸窛锛屼絾鏄篃鍦ㄥ彲浠ユ帴鍙楃殑鑼冨洿鍐呫€傜敤鎴峰湪涓庢櫘閫氬浘琛ㄤ氦浜掓椂寰堥毦瀵熻鍒板樊寮傘€傛垜浠涓哄悓鏍风殑鍥捐〃濡傛灉鑷繁缁樺埗锛屽簲璇ヤ細鏈夋洿濂界殑琛ㄧ幇銆傚湪canvas鎸囦护鐨勪紭鍖栧拰WebCanvasAPI鐨勫疄鐜颁笂杩樻湁浼樺寲绌洪棿銆傚湪韪╁潙&瑙ｅ喅鏂规鐨勮繃绋嬩腑锛岄亣鍒颁簡寰堝闂銆備笅闈㈠垎浜竴浜涙湁浠ｈ〃鎬х殑绫诲瀷銆侰anvas涓嶅悓鐢熷懡鍛ㄦ湡鐨勫尯鍒涓嬶細FlutterCanvasWebCanvas娓叉煋涓嶄細淇濆瓨canvas姣忔娓叉煋閮戒細淇濆瓨canvasDrawing鍦ㄤ笂娆＄殑鍩虹涓婄户缁粯鍒舵垜浠殑瑙ｅ喅鏂规硶鏄繚瀛樻覆鏌撶粨鏋滅户缁粯鍒跺湪涓婃娓叉煋缁撴灉涓夽overridevoidpaint(Canvascanvas,Sizesize){finalpaintList=_repaint.consume();ui.Picturepicture=canvasRecorder.record(canvasId,size,_repaint.reverse,paintList);濡傛灉锛堝浘鐗囷紒=null锛墈canvas.drawPicture锛堝浘鐗囷級;}}CanvasContext涓嶅悓鐨凜ontext濡備笅锛欶lutterCanvasWebCanvascanvas.saveSavedcontent:鍦╯avestack.ctx.save涓婁繚瀛樺綋鍓峵ransform鍜宑lip鐨勫壇鏈琒avedcontent:鐢诲竷鍒涘缓鍚庢瘡娆aint閮芥槸涓€涓柊鐨刢anvas瀹炰緥锛屽疄渚嬩繚鎸佷笉鍙樸€傞拡瀵圭涓€涓棶棰橈紝淇濆瓨/鎭㈠鍐呭涓嶄竴鑷达紝鎴戜滑鍒涘缓浜嗕竴涓猈ebCanvas瀵硅薄鏉ユā鎷焀eb涓婄殑Canvas锛屾墜鍔ㄧ鐞嗕繚瀛?鎭㈠鐨勫唴瀹筩lassWebCanvas{...SaveStacksaveStack=SaveStack();SaveInfo鑾峰彇褰撳墠=>saveStack.current;...}瀵逛簬绗簩涓棶棰橈紝鎴戜滑鍒涘缓涓€涓狢anvasRecorder瀵硅薄锛屽苟鍦ㄥ璞′腑鎸佹湁WebCanvas瀹炰緥锛岃繖涓嶹eb涓奀anvas瀹炰緥鐨勭敓鍛藉懆鏈熸槸涓€鑷寸殑classCanvasRecorder{...CanvasHistorygetCanvasHistory(StringcanvasId){濡傛灉(!hisMap.containsKey(canvasId)){hisMap.putIfAbsent(canvasId,()=>CanvasHistory(canvasId));}杩斿洖hisMap[canvasId];}...}classCanvasHistory{...finalChartSpaceCanvaschartSpaceCanvas=ChartSpaceCanvas();...}classChartSpaceCanvas{...finalWebCanvaswebcanvas=WebCanvas();...}Canvas鏈変笉鍚岀殑榛樿鍊笺€侰anvas榛樿鍊兼湁寰堝涓嶅悓鐨勫湴鏂广€傛垜浠洿鎺ユ寜鐓ebCanvas鏍囧噯璁剧疆榛樿鍊笺€傛垜娌℃湁浠旂粏璁＄畻宸紓銆傚ぇ鑷存潵璇达紝鏈変互涓嬪嚑涓睘鎬х殑鍖哄埆锛歵ransformfillStylestrokeStylestrokeMiterLimitfont浠ransform涓轰緥銆俆ransform瀹為檯涓婄淮鎶や簡涓€涓?*4鐨勫彉鎹㈢煩闃碉紙DOMMatrix瀵硅薄锛夈€倃eb涓婄殑setTransform鏂规硶璁剧疆鍙樻崲鐭╅樀鐨勪笉鍚屼綅缃瓼lutter涓婄殑鍊兼槸鐩存帴鎿嶄綔鍙樻崲鐭╅樀锛屼絾鏄疻ebCanvas鍜孎lutterCanvas鐨勫彉鎹㈢煩闃甸粯璁ゅ€间笉涓€鑷淬€侳lutterCanvasWebCanvas00000000000000001000010000100001浜庢槸瑙ｅ喅鏂规濡備笅锛歝lassMatrix4Builder{staticMatrix4webDefault(){finalmatrix4=Matrix4.zero();matrix4.setEntry(0,0,1.0);matrix4.setEntry(1,1,1.0);matrix4.setEntry(2,2,1.0);matrix4.setEntry(3,3,1.0);杩斿洖鐭╅樀4锛泒}Bridge闇€瑕佹垜浠紶閫掔殑鍚屾APIMockCanvasRenderdingContext瀵硅薄锛岃揪鍒拌褰昪anvas鎸囦护鐨勭洰鐨勶紝浣嗘槸CanvasRenderdingContext瀵硅薄涓婃湁寰堝鏂规硶闇€瑕佸悓姝PI锛屾瘮濡俶easureText锛屼絾鏄父瑙勭殑Bridge閫氫俊鏄疐lutter鍜宨OS/Android閫氫俊寮傛鐨勫湴鏂癸紝鎵€浠ヨ繖閲屼娇鐢‵FI鐩存帴涓嶫SRuntime閫氫俊锛屼繚璇佸悓姝ユ嫤鎴儴鍒嗕唬鐮佸疄鐜帮細(measObject)(_globalContext,_globalObject,jSStringCreateWithUTF8CString(funcMeasureTextCString),measureTextFunctionObject,jsObject.JSPropertyAttributes.kJSPropertyAttributeNone,nullptr);free(funcMeasureTextCString);鎬荤粨&灞曟湜鑹ソ鐨勬€ц兘銆傝繖涔熸槸鐢变簬鍚堢悊鐨勬灦鏋凜hartSpace鏈韩鐨勮璁°€傞€氳繃json閰嶇疆瀹氫箟鍥惧舰璇箟锛屽彲浠ユ湁鏁堝睆钄戒笉鍚屽钩鍙板拰璇█鐨勫樊寮傘€傜敱浜嶤hartSpace鏄熀浜庡浘褰㈣涔夌殑瀹炵幇锛屽洜姝ら渶瑕佹瘮鑷畾涔夊浘琛ㄧ被鍨嬫洿澶х殑璁＄畻閲忥紝浼氬奖鍝嶆覆鏌撴€ц兘銆備笉杩囩幇鍦ㄤ篃鏀寔鍒嗘娓叉煋浜嗐€傚湪澶ф暟鎹拰澶嶆潅鍥惧舰涓嬶紝瀹屾暣鐨勫浘褰㈠彲浠ユ笎鍙樻笎鍙樻晥鏋滐紝涓嶆崯瀹崇敤鎴蜂綋楠屻€侳lutterChartSpace鐩墠杩樹笉鏀寔鍒嗘娓叉煋銆傜洰鍓嶇殑鏂规杩樻湁寰堝ぇ鐨勪紭鍖栫┖闂达紝鎴戜滑浼氱户缁帰绱€傛湭鏉ユ垜浠細缁х画鍚戜袱涓柟鍚戞嫇灞曪細璁捐鏄撶敤鎬ф洿楂樼殑API銆傚浘褰㈣娉曡櫧鐒跺緢寮哄ぇ锛屼絾涔熷甫鏉ヤ簡浣跨敤涓婄殑澶嶆潅鎬с€傛垜浠彲浠ュ湪鍥惧舰璇硶涓婂寘瑁逛竴灞侫PI锛屽皢甯哥敤鐨勫浘褰㈠墺绂诲嚭鏉ワ紝闄嶄綆浣跨敤鎴愭湰銆備緥濡傝殏铓侀泦鍥㈢殑g鈥嬧€?plot鏄熀浜巊2鐨勫皝瑁咃紝鎻愪緵浜嗘洿绠€娲佺殑璇硶銆俫2plot鐨勬弿杩板紩鐢ㄨ嚜锛歨ttps://zhuanlan.zhihu.com/p/...constline=newLine('container',{data,xField:'year',yField:'value',});line.render();浣犲彲浠ュ姣攇2plot鐨勮娉曚緥瀛愬拰g2鐨勮娉曚緥瀛愶紝g2鐨勮娉曞湪Graphicgrammar涓€鏈熶竴鏂囥€傛墿灞曟洿澶氱粓绔?鎶€鏈爤缁忚繃瀹炶返锛屾垜浠彂鐜板悓鏍风殑鎶€鏈彲浠ユ墿灞曞埌鏇村鐨勬妧鏈爤锛屼緥濡傦細iOS/Android/RN寮€婧愮殑ChartSpace鍜孎lutterChartSpace閮芥槸Byte鐨勫唴閮ㄤ骇鍝併€侰hartSpace鍦ㄥぇ閲忔暟鎹骇鍝佸拰鍏朵粬涓氬姟涓笉鏂墦纾紝缁忓彈浣忎簡涓嶅悓鍦烘櫙鐨勮€冮獙锛屽寘鎷姈闊崇殑鏁版嵁鍒嗘瀽锛岀幇宸叉湁寮€婧愯鍒掋€侳lutterChartSpace鍦ㄦ墦纾ㄥ畬鍐呴儴鍦烘櫙鍚庝篃闇€瑕佽€冭檻寮€婧愩€侳lutterChartSpace灏嗙户ChartSpace涔嬪悗寮€婧愶紝棰勮浠婂勾骞村簳銆傪煍olcanoEngineAPMPlusApplicationPerformanceMonitoring鏄疺olcanoEngine搴旂敤寮€鍙戝浠禡ARS涓嬬殑涓€娆炬€ц兘鐩戞帶浜у搧銆傞€氳繃鍏堣繘鐨勬暟鎹噰闆嗗拰鐩戞帶鎶€鏈紝涓轰紒涓氭彁渚涘叏閾捐矾鐨勫簲鐢ㄦ€ц兘鐩戞帶鏈嶅姟锛屽府鍔╀紒涓氭彁楂樻晠闅滄帓闄ゅ拰瑙ｅ喅寮傚父闂鐨勬晥鐜囥€傜洰鍓嶏紝鎴戜滑鐗瑰埆鎺ㄥ嚭浜嗛潰鍚戜腑灏忎紒涓氱殑鈥淎PMPlus搴旂敤鎬ц兘鐩戞帶浼佷笟鎵舵寔琛屽姩鈥濓紝鍏嶈垂涓轰腑灏忎紒涓氭彁渚涘簲鐢ㄦ€ц兘鐩戞帶璧勬簮鍖呫€傜幇鍦ㄧ敵璇凤紝鏈夋満浼氳幏寰?0澶╁厤璐规€ц兘鐩戞帶鏈嶅姟锛屾渶楂?000涓囦簨浠躲€傪煈夌偣鍑昏繖閲岀珛鍗崇敵璇?/p>
