一種通過自定義圖形組合在SVG中展示數據的方法技術

本發明專利技術涉及一種通過自定義圖形組合在SVG中展示數據的方法，屬于計算機應用領域。該方法包括：將待展示數據按照擬采用的圖形化展示形式的數據格式進行組織；結合擬采用的圖形化展示形式與數據格式，確定所應用的子圖形組合，并計算各個子圖形的坐標與屬性；采用DOM編程接口訪問SVG文檔，在SVG文檔中根據設定的畫布左上角坐標與畫布大小新建畫布；在新建的SVG畫布上繪制圓角矩形背景、文字標題（可選）；在SVG畫布上按照層次關系依次創建子圖形組合中包含的子圖形；對SVG畫布上的子圖形添加鼠標和鍵盤交互事件響應；將SVG畫布的更改應用到SVG文檔，刷新界面顯示。本發明專利技術可適用于個性化的圖形展示需求，擴展性強、開發難度小、開發效率高，具有很強的實用性。

【技術實現步驟摘要】

本專利技術屬于計算機應用領域，特別提供了一種通過自定義圖形組合在SVG中展示數據的方法。
技術介紹
目前，可縮放矢量圖形SVG (Scalable Vector Graphics)作為ー種擴展性較強的圖形格式，在互聯網、圖形、可視化展示等領域的應用越來越廣泛。SVG作為ー種基于XML開放標準的文本式矢量圖形描述語言，支持矩形、圓形、線條、路徑等基本幾何形狀的繪制與組合，以及漸變、濾鏡、動畫、圖層管理、人機交互等高級功能。實際上，SVG與傳統圖形格式相比，其突出的優勢在于支持腳本代碼以及DOM (—種處理XML的標準編程接ロ)，因此用戶能夠按照DOM接ロ標準訪問SVG文檔中的各類圖形元素，井能夠動態改變各元素的屬性、添加簡單或復雜的動畫，或者添加鼠標移入、鼠標移出、鼠標點擊等交互事件的響應方法。隨著自動化技術的發展，爆炸性增長的信息量對數據展示方法的要求日益提高，圖形化是進行數據展示的最佳思路。SVG優異的自身特性為此提供了無限的可能。然而，目前基于SVG的應用主要利用其矢量化的特點，集中在網絡拓撲及空間關系的表達等方面；卻忽略了 SVG區別于其他圖形格式的最大優勢，即支持腳本與編程控制，從而很容易在SVG中通過DOM接ロ函數生成圖形組合用以展示數據，并添加交互響應。專利技術專利200610033862. X利用SVG支持動畫的特性，將SVG支持的動畫類型進行組合，實現了若干類動畫效果庫。然而，目前仍未有通過自定義圖形組合在SVG中進行數據展示的案例。
技術實現思路
本專利技術的目的在于為克服已有技術的不足之處，提供一種通過自定義圖形組合在SVG中展示數據的方法，充分利用SVG圖形格式的可編程優勢，快速開發出形式多祥、交互靈活的SVG數據展示界面。本專利技術的技術方案如下I)將待展示數據按照擬采用的圖形化展示形式(包括表格、指示燈、進度條、柱條形圖、曲線圖)的數據格式進行組織；2)結合擬采用的圖形化展示形式與數據格式，確定所應用的子圖形組合，并計算各個子圖形的坐標與屬性；3)采用DOM編程接ロ訪問SVG文檔，在SVG文檔中根據設定的畫布左上角坐標與畫布大小新建畫布；4)在SVG畫布上按照層次關系依次創建子圖形組合中所包含的子圖形；5)對SVG畫布上的子圖形添加鼠標和鍵盤交互事件響應；6)將SVG畫布的更改應用到SVG文檔，刷新界面顯示。上述步驟3)中還可包括在新建的SVG畫布上繪制圓角矩形背景與文字標題。本專利技術的特點及有益效果如下本專利技術根據擬采用的圖形化展示形式，將數據按照類別、時間、數值等要素進行組織整理；通過若干子圖形的組合來表現數據，計算這些子圖形的坐標與屬性；采用DOM編程接ロ在SVG文檔中新建畫布，按照層次關系創建這些子圖形，并添加設定的交互事件響應，從而得到豐富美觀的圖形化數據展示界面。本專利技術采用DOM編程接ロ在新建畫布上動態繪制自定義的圖形組合并添加交互事件，提供了多祥化的在SVG中展示數據的圖形形式以及統一的SVG自定義圖形組合繪制框架。按照本專利技術所提供的方法，可以在具備DOM接ロ函數與SVG渲染器的編程語言平臺上(如Java、C++)快速開發出表現形式豐富美觀、交互方法靈活、可嵌入至B/S或C/S軟件系統中的數據圖形化展示界面，在本地應用或網絡應用中均可實施。該方法所提出的實施步驟可適用于個性化的圖形展示需求，擴展性強、開發難度小、開發效率高，具有很強的實用性。附圖說明圖1是本專利技術的一種通過自定義圖形組合在SVG中展示數據的方法的實施例流程 框圖。具體實施例方式下面結合附圖及實施方式對本專利技術作進ー步詳細的說明。應當理解，此處所描述的具體實施方式可用以解釋本專利技術，但并不限定本專利技術。本專利技術基于SVG圖形格式，提供了一種將數據轉換為自定義的子圖形組合，并結合界面控件與自定義交互事件進行展示的方法。本專利技術的具體實施例流程如圖1所示，包括以下步驟I)將待展示數據按照擬采用的圖形化展示形式(包括表格、指示燈、進度條、柱條形圖、曲線圖)的數據格式進行組織；具體方法如下使用編程語言從數據庫或文件查詢或讀入待展示的數據，對該數據進行重新組織，組織后的數據應至少包括如下部分(I)數據標題，即數據內容的說明文字；(2)進行數據展示的SVG畫布的左上角坐標與大?。?3)按類別、數值或者時間要素區分的數據集；其中第(3)部分與擬采用的圖形化展示形式相關，分別為表格所規定的格式為ニ維數據；指示燈所規定的格式為ー組布爾型數據；進度條所規定的格式為ー組浮點型數據；X軸為類別軸、Y軸為數值軸的柱條形圖、曲線圖所規定的格式為ー組類別說明及對應的整型或浮點數值；X軸為時間軸、Y軸為數值軸的柱條形圖、曲線圖所規定的格式為ー組時間序列及對應的整型或浮點數值；2)結合擬采用的圖形化展示形式與數據格式，確定所應用的子圖形組合，并計算各個子圖形的坐標與屬性；具體方法如下本專利技術提供了表格、指示燈、進度條、柱條形圖、曲線圖共五種圖形化展示形式，并且可以在本專利技術所提及的實施框架下進行擴展；各種圖形化展示形式用以表現輸入數據的自定義子圖形組合不同，具體如下(I)表格所應用的子圖形組合是若干個矩形(表格中每個單元格對應ー個矩形)；(2)指示燈所應用的子圖形組合是若干個圓形(每個指示燈對應ー個圓形);(3)進度條所應用的子圖形組合是兩個疊加的圓角矩形；(4)柱條形圖所應用的子圖形組合是直線(坐標軸)和圓角矩形(每ー個柱形或條形對應ー個圓角矩形)；(5)曲線圖所應用的子圖形組合是是直線(坐標軸)和路徑(每一條曲線對應一條路徑)；根據步驟I)中得到的待展示數據，計算子圖形組合中各個子圖形(矩形、圓形、圓角矩形、直線、路徑)的坐標與屬性，包括如下內容 (I)矩形的左上角坐標及寬高；(2)圓形的圓心坐標及半徑；(3)直線的起點坐標、終點坐標；(4)路徑的各個折點坐標。此步驟需實現計算坐標與屬性的initParameters函數，Java示例代碼如下Il計算表格各單元格的關鍵坐標與屬性protected void initParameters() tsuper.1nitParameters();int widthRatioSum = 0;for (int i = 0; i < columnCount; i++) {widthRatioSum += CelIWidthRatio[i]; } avgCeIIWidth = contentffidth / widthRatioSum;int heightRatioSum = 0; for (int i = 0; i < rowCount; i++) { heightRatioSum +ニ CelIHeightRatio[i]; } avgCeIIHeight = contentHeight / heightRatioSum;}3)采用DOM編程接ロ訪問SVG文檔，在SVG文檔中根據設定的畫布左上角坐標與畫布大小新建SVG畫布；具體方法如下根據步驟I)中得到的畫布左上角坐標與大小，采用DOM編程接ロ在SVG文檔中動態新建ー塊空白畫布，即調用DOM函數新建ー個g元素，其id由程序生成并確保唯一。此步驟需實現新建畫布的initComponentGroup函數，Java示例代碼如下本文檔來自技高網...

【技術保護點】
一種通過自定義圖形組合在SVG?中展示數據的方法，其特征在于，該方法主要包括以下步驟：1)將待展示數據按照擬采用的圖形化展示形式的數據格式進行組織；2)結合擬采用的圖形化展示形式與數據格式，確定所應用的子圖形組合，并計算各個子圖形的坐標與屬性；3)采用DOM編程接口訪問SVG文檔，在SVG文檔中根據設定的畫布左上角坐標與畫布大小新建SVG畫布；4)在SVG畫布上按照層次關系依次創建子圖形組合中包含的子圖形；5)對SVG畫布上的子圖形添加鼠標和鍵盤交互事件響應；6)將SVG畫布的更改應用到SVG文檔，刷新界面顯示。

【技術特征摘要】
1.一種通過自定義圖形組合在SVG中展示數據的方法，其特征在于，該方法主要包括以下步驟1)將待展示數據按照擬采用的圖形化展示形式的數據格式進行組織；2)結合擬采用的圖形化展示形式與數據格式，確定所應用的子圖形組合，并計算各個子圖形的坐標與屬性；3)采用DOM編程接口訪問SVG文檔，在SVG文檔中根據設定的畫布左上...

【專利技術屬性】
技術研發人員：陳啟鑫，賴曉文，夏清，康重慶，
申請(專利權)人：清華大學，
類型：發明
國別省市：