專利名稱：一種通過自定義圖形組合在svg中展示數(shù)據(jù)的方法
技術(shù)領(lǐng)域：
本發(fā)明屬于計(jì)算機(jī)應(yīng)用領(lǐng)域，特別提供了一種通過自定義圖形組合在SVG中展示數(shù)據(jù)的方法。
背景技術(shù)：
目前，可縮放矢量圖形SVG (Scalable Vector Graphics)作為ー種擴(kuò)展性較強(qiáng)的圖形格式，在互聯(lián)網(wǎng)、圖形、可視化展示等領(lǐng)域的應(yīng)用越來越廣泛。SVG作為ー種基于XML開放標(biāo)準(zhǔn)的文本式矢量圖形描述語言，支持矩形、圓形、線條、路徑等基本幾何形狀的繪制與組合，以及漸變、濾鏡、動(dòng)畫、圖層管理、人機(jī)交互等高級(jí)功能。實(shí)際上，SVG與傳統(tǒng)圖形格式相比，其突出的優(yōu)勢在于支持腳本代碼以及DOM (—種處理XML的標(biāo)準(zhǔn)編程接ロ)，因此用戶能夠按照DOM接ロ標(biāo)準(zhǔn)訪問SVG文檔中的各類圖形元素，井能夠動(dòng)態(tài)改變各元素的屬性、添加簡單或復(fù)雜的動(dòng)畫，或者添加鼠標(biāo)移入、鼠標(biāo)移出、鼠標(biāo)點(diǎn)擊等交互事件的響應(yīng)方法。隨著自動(dòng)化技術(shù)的發(fā)展，爆炸性增長的信息量對數(shù)據(jù)展示方法的要求日益提高，圖形化是進(jìn)行數(shù)據(jù)展示的最佳思路。SVG優(yōu)異的自身特性為此提供了無限的可能。然而，目前基于SVG的應(yīng)用主要利用其矢量化的特點(diǎn)，集中在網(wǎng)絡(luò)拓?fù)浼翱臻g關(guān)系的表達(dá)等方面；卻忽略了 SVG區(qū)別于其他圖形格式的最大優(yōu)勢，即支持腳本與編程控制，從而很容易在SVG中通過DOM接ロ函數(shù)生成圖形組合用以展示數(shù)據(jù)，并添加交互響應(yīng)。發(fā)明專利200610033862. X利用SVG支持動(dòng)畫的特性，將SVG支持的動(dòng)畫類型進(jìn)行組合，實(shí)現(xiàn)了若干類動(dòng)畫效果庫。然而，目前仍未有通過自定義圖形組合在SVG中進(jìn)行數(shù)據(jù)展示的案例。

發(fā)明內(nèi)容
本發(fā)明的目的在于為克服已有技術(shù)的不足之處，提供一種通過自定義圖形組合在SVG中展示數(shù)據(jù)的方法，充分利用SVG圖形格式的可編程優(yōu)勢，快速開發(fā)出形式多祥、交互靈活的SVG數(shù)據(jù)展示界面。本發(fā)明的技術(shù)方案如下I)將待展示數(shù)據(jù)按照擬采用的圖形化展示形式(包括表格、指示燈、進(jìn)度條、柱條形圖、曲線圖)的數(shù)據(jù)格式進(jìn)行組織；2)結(jié)合擬采用的圖形化展示形式與數(shù)據(jù)格式，確定所應(yīng)用的子圖形組合，并計(jì)算各個(gè)子圖形的坐標(biāo)與屬性；3)采用DOM編程接ロ訪問SVG文檔，在SVG文檔中根據(jù)設(shè)定的畫布左上角坐標(biāo)與畫布大小新建畫布；4)在SVG畫布上按照層次關(guān)系依次創(chuàng)建子圖形組合中所包含的子圖形；5)對SVG畫布上的子圖形添加鼠標(biāo)和鍵盤交互事件響應(yīng)；6)將SVG畫布的更改應(yīng)用到SVG文檔，刷新界面顯示。上述步驟3)中還可包括在新建的SVG畫布上繪制圓角矩形背景與文字標(biāo)題。本發(fā)明的特點(diǎn)及有益效果如下
本發(fā)明根據(jù)擬采用的圖形化展示形式，將數(shù)據(jù)按照類別、時(shí)間、數(shù)值等要素進(jìn)行組織整理；通過若干子圖形的組合來表現(xiàn)數(shù)據(jù)，計(jì)算這些子圖形的坐標(biāo)與屬性；采用DOM編程接ロ在SVG文檔中新建畫布，按照層次關(guān)系創(chuàng)建這些子圖形，并添加設(shè)定的交互事件響應(yīng)，從而得到豐富美觀的圖形化數(shù)據(jù)展示界面。本發(fā)明采用DOM編程接ロ在新建畫布上動(dòng)態(tài)繪制自定義的圖形組合并添加交互事件，提供了多祥化的在SVG中展示數(shù)據(jù)的圖形形式以及統(tǒng)一的SVG自定義圖形組合繪制框架。按照本發(fā)明所提供的方法，可以在具備DOM接ロ函數(shù)與SVG渲染器的編程語言平臺(tái)上(如Java、C++)快速開發(fā)出表現(xiàn)形式豐富美觀、交互方法靈活、可嵌入至B/S或C/S軟件系統(tǒng)中的數(shù)據(jù)圖形化展示界面，在本地應(yīng)用或網(wǎng)絡(luò)應(yīng)用中均可實(shí)施。該方法所提出的實(shí)施步驟可適用于個(gè)性化的圖形展示需求，擴(kuò)展性強(qiáng)、開發(fā)難度小、開發(fā)效率高，具有很強(qiáng)的實(shí)用性。


圖1是本發(fā)明的一種通過自定義圖形組合在SVG中展示數(shù)據(jù)的方法的實(shí)施例流程 框圖。
具體實(shí)施例方式下面結(jié)合附圖及實(shí)施方式對本發(fā)明作進(jìn)ー步詳細(xì)的說明。應(yīng)當(dāng)理解，此處所描述的具體實(shí)施方式
可用以解釋本發(fā)明，但并不限定本發(fā)明。本發(fā)明基于SVG圖形格式，提供了一種將數(shù)據(jù)轉(zhuǎn)換為自定義的子圖形組合，并結(jié)合界面控件與自定義交互事件進(jìn)行展示的方法。本發(fā)明的具體實(shí)施例流程如圖1所示，包括以下步驟I)將待展示數(shù)據(jù)按照擬采用的圖形化展示形式(包括表格、指示燈、進(jìn)度條、柱條形圖、曲線圖)的數(shù)據(jù)格式進(jìn)行組織；具體方法如下使用編程語言從數(shù)據(jù)庫或文件查詢或讀入待展示的數(shù)據(jù)，對該數(shù)據(jù)進(jìn)行重新組織，組織后的數(shù)據(jù)應(yīng)至少包括如下部分(I)數(shù)據(jù)標(biāo)題，即數(shù)據(jù)內(nèi)容的說明文字；(2)進(jìn)行數(shù)據(jù)展示的SVG畫布的左上角坐標(biāo)與大??；(3)按類別、數(shù)值或者時(shí)間要素區(qū)分的數(shù)據(jù)集；其中第(3)部分與擬采用的圖形化展示形式相關(guān)，分別為表格所規(guī)定的格式為ニ維數(shù)據(jù)；指示燈所規(guī)定的格式為ー組布爾型數(shù)據(jù)；進(jìn)度條所規(guī)定的格式為ー組浮點(diǎn)型數(shù)據(jù)；X軸為類別軸、Y軸為數(shù)值軸的柱條形圖、曲線圖所規(guī)定的格式為ー組類別說明及對應(yīng)的整型或浮點(diǎn)數(shù)值；X軸為時(shí)間軸、Y軸為數(shù)值軸的柱條形圖、曲線圖所規(guī)定的格式為ー組時(shí)間序列及對應(yīng)的整型或浮點(diǎn)數(shù)值；2)結(jié)合擬采用的圖形化展示形式與數(shù)據(jù)格式，確定所應(yīng)用的子圖形組合，并計(jì)算各個(gè)子圖形的坐標(biāo)與屬性；具體方法如下本發(fā)明提供了表格、指示燈、進(jìn)度條、柱條形圖、曲線圖共五種圖形化展示形式，并且可以在本發(fā)明所提及的實(shí)施框架下進(jìn)行擴(kuò)展；各種圖形化展示形式用以表現(xiàn)輸入數(shù)據(jù)的自定義子圖形組合不同，具體如下
(I)表格所應(yīng)用的子圖形組合是若干個(gè)矩形(表格中每個(gè)單元格對應(yīng)ー個(gè)矩形)；(2)指示燈所應(yīng)用的子圖形組合是若干個(gè)圓形(每個(gè)指示燈對應(yīng)ー個(gè)圓形);(3)進(jìn)度條所應(yīng)用的子圖形組合是兩個(gè)疊加的圓角矩形；(4)柱條形圖所應(yīng)用的子圖形組合是直線(坐標(biāo)軸)和圓角矩形(每ー個(gè)柱形或條形對應(yīng)ー個(gè)圓角矩形)；(5)曲線圖所應(yīng)用的子圖形組合是是直線(坐標(biāo)軸)和路徑(每一條曲線對應(yīng)一條路徑)；根據(jù)步驟I)中得到的待展示數(shù)據(jù)，計(jì)算子圖形組合中各個(gè)子圖形(矩形、圓形、圓角矩形、直線、路徑)的坐標(biāo)與屬性，包括如下內(nèi)容
(I)矩形的左上角坐標(biāo)及寬高；(2)圓形的圓心坐標(biāo)及半徑；(3)直線的起點(diǎn)坐標(biāo)、終點(diǎn)坐標(biāo)；(4)路徑的各個(gè)折點(diǎn)坐標(biāo)。此步驟需實(shí)現(xiàn)計(jì)算坐標(biāo)與屬性的initParameters函數(shù)，Java示例代碼如下
Il計(jì)算表格各單元格的關(guān)鍵坐標(biāo)與屬性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文檔中根據(jù)設(shè)定的畫布左上角坐標(biāo)與畫布大小新建SVG畫布；具體方法如下根據(jù)步驟I)中得到的畫布左上角坐標(biāo)與大小，采用DOM編程接ロ在SVG文檔中動(dòng)態(tài)新建ー塊空白畫布，即調(diào)用DOM函數(shù)新建ー個(gè)g元素，其id由程序生成并確保唯一。此步驟需實(shí)現(xiàn)新建畫布的initComponentGroup函數(shù)，Java示例代碼如下
權(quán)利要求
1.一種通過自定義圖形組合在SVG中展示數(shù)據(jù)的方法，其特征在于，該方法主要包括以下步驟1)將待展示數(shù)據(jù)按照擬采用的圖形化展示形式的數(shù)據(jù)格式進(jìn)行組織；2)結(jié)合擬采用的圖形化展示形式與數(shù)據(jù)格式，確定所應(yīng)用的子圖形組合，并計(jì)算各個(gè)子圖形的坐標(biāo)與屬性；3)采用DOM編程接口訪問SVG文檔，在SVG文檔中根據(jù)設(shè)定的畫布左上角坐標(biāo)與畫布大小新建SVG畫布；4)在SVG畫布上按照層次關(guān)系依次創(chuàng)建子圖形組合中包含的子圖形；5)對SVG畫布上的子圖形添加鼠標(biāo)和鍵盤交互事件響應(yīng)；6)將SVG畫布的更改應(yīng)用到SVG文檔，刷新界面顯示。
2.根據(jù)權(quán)利要求1所述的方法，其特征在于，所述步驟3)中還包括在新建的SVG畫布上繪制圓角矩形背景、文字標(biāo)題。
全文摘要
本發(fā)明涉及一種通過自定義圖形組合在SVG中展示數(shù)據(jù)的方法，屬于計(jì)算機(jī)應(yīng)用領(lǐng)域。該方法包括將待展示數(shù)據(jù)按照擬采用的圖形化展示形式的數(shù)據(jù)格式進(jìn)行組織；結(jié)合擬采用的圖形化展示形式與數(shù)據(jù)格式，確定所應(yīng)用的子圖形組合，并計(jì)算各個(gè)子圖形的坐標(biāo)與屬性；采用DOM編程接口訪問SVG文檔，在SVG文檔中根據(jù)設(shè)定的畫布左上角坐標(biāo)與畫布大小新建畫布；在新建的SVG畫布上繪制圓角矩形背景、文字標(biāo)題(可選)；在SVG畫布上按照層次關(guān)系依次創(chuàng)建子圖形組合中包含的子圖形；對SVG畫布上的子圖形添加鼠標(biāo)和鍵盤交互事件響應(yīng)；將SVG畫布的更改應(yīng)用到SVG文檔，刷新界面顯示。本發(fā)明可適用于個(gè)性化的圖形展示需求，擴(kuò)展性強(qiáng)、開發(fā)難度小、開發(fā)效率高，具有很強(qiáng)的實(shí)用性。
文檔編號(hào)G06F9/44GK103019682SQ20121047299
公開日2013年4月3日 申請日期2012年11月20日 優(yōu)先權(quán)日2012年11月20日
發(fā)明者陳啟鑫, 賴曉文, 夏清, 康重慶 申請人:清華大學(xué)