[發明專利]一種基于機器學習的可視化圖表代碼自動生成方法

在審

• 申請號: 202110765312.1
• 申請日: 2021-07-07
• 公開（公告）號: CN113553055A
• 公開（公告）日: 2021-10-26
• 發明（設計）人: 劉思佳;周煉赤;王紅艷;郭旭東;周益周
• 申請（專利權）人: 北京計算機技術及應用研究所
• 主分類號: G06F8/41
• 分類號: G06F8/41;G06F8/38;G06F8/34;G06K9/62;G06N3/08
• 代理公司: 中國兵器工業集團公司專利中心 11011
• 代理人: 辛海明

本發明涉及一種基于機器學習的可視化圖表代碼自動生成方法，屬于計算機科學領域。本發明針對現有技術中設計稿中圖表轉換成代碼的難題，通過開源框架Pipcook獲得設計稿中的組件元素，提煉設計稿中的組件信息和組件樣式，根據組件與數據規則，修正解析圖層、解析布局、解析屬性的偏差，生成視圖樹，并通過UI2DSL輸出經過各層智能化處理好的代碼協議，經過協議轉代碼的引擎輸出各種DSL代碼。該方法極大地提高了設計稿中圖表轉換成代碼的效率，而且準確率高。

技術領域

本發明屬于計算機科學領域，具體涉及一種基于機器學習的可視化圖表代碼自動生成方法。

背景技術

隨著信息化和大數據技術的不斷發展，各行各業對數據深層次應用的需求逐漸增大，數據可視化技術成為了政府、企業分析、展示數據的主要方式。對于軟件開發工程師，尤其是前端工程師而言，數據可視化的開發主要是將UI設計稿中的圖表轉換成HTML、CSS、JavaScript代碼，這部分工作難度一般，但由于存在很多重復性的代碼以及很多自定義元素的處理，所以比較繁瑣耗時。因此，如何提升設計稿中圖表轉換成代碼的效率，是可視化前端開發工程師急需解決的問題。

目前業界處理該問題的方法主要有兩種：一是將不同的圖表分模塊，把每個模塊的代碼封裝為組件，從而提升圖表的可復用性，減少冗余，提高開發效率。但對于企業自身而言，開發人員的技術能力參差不齊，在多人開發的項目中，很容易導致組件碎片化、組件庫維護困難以及代碼冗余的問題，直接或間接的導致代碼運行效率、調試效率降低。另外隨著業務的發展和個性化的驅動，通用封裝的圖表庫無法覆蓋所有應用場景。二是利用各種自動化技術，把設計稿轉為前端代碼，減少前端工程師的工作量，從設計稿直接生成前端代碼，省去中間流程，做到精度還原的同時并節約研發資源。但是該解決方案只是針對通用頁面的，并不能把可視化圖表轉為代碼。

發明內容

(一)要解決的技術問題

本發明要解決的技術問題是如何提供一種基于機器學習的可視化圖表代碼自動生成方法，以解決如何提升設計稿中圖表轉換成代碼的效率的問題。

(二)技術方案

為了解決上述技術問題，本發明提出一種基于機器學習的可視化圖表代碼自動生成方法，該方法包括如下步驟：

步驟1：印記導入

導入文件類型符合規范的設計稿；

步驟2：組件識別

使用開源框架Pipcook，基于神經網絡算法計算，對設計稿圖層進行遍歷，識別每一個圖層，通過解析得到圖層結構、模板結構和圖層信息，切割標注的圖表組件，獲得對應的組件元素；

步驟3：樣式識別

使用UI2DSL多元組件識別提取設計稿中有組件的預打標信息，提煉視圖組件信息和組件樣式；

步驟4：數據合并

分析節點信息、修正信息及語義化信息，根據組件與數據規則，生成數據映射信息、文本數據映射信息和狀態映射信息；

步驟5：轉為視圖樹

由操作人員控制，修正解析圖層、解析布局、解析屬性的偏差；除此之外，對于非組件元素、異常的視圖元素進行指定規則的元素轉化或者拋棄，完成后生成視圖樹；

步驟6：輸出代碼

通過UI2DSL輸出經過各層智能化處理好的代碼協議，經過協議轉代碼的引擎輸出各種DSL代碼。

進一步地，所述步驟1中設計稿的規范的包括標注圖表的類型，標注圖表的類型包括折線圖、柱狀圖、餅圖、散點圖、K線圖、雷達圖、盒須圖、熱力圖、關系圖、路徑圖、樹圖、矩形樹圖、旭日圖、桑葚圖、漏斗圖和儀表盤。