專利名稱：：一種基于網(wǎng)頁的動態(tài)圖表生成方法
技術領域：
：本發(fā)明涉及一種基于網(wǎng)頁的動態(tài)圖表生成方法，具體涉及一種基于0FC(0penFlashChart)的網(wǎng)頁動態(tài)圖表生成方法。
背景技術：
：隨著網(wǎng)絡技術的發(fā)展，基于網(wǎng)頁的應用越來越多，很多企業(yè)業(yè)務管理系統(tǒng)以及企業(yè)管理信息系統(tǒng)都是利用基于網(wǎng)頁的形式開發(fā)。這些應用中，很多需要統(tǒng)計功能，并需要向用戶展示動態(tài)統(tǒng)計的數(shù)據(jù)，同時，由于圖表作為最為直觀形象的數(shù)據(jù)展示方式，常常需要出現(xiàn)在這樣的應用開發(fā)需求中，因此，網(wǎng)頁應用開發(fā)者在不斷地尋找方便、實用，且能夠生成美觀圖表的方法。由此，OFC(OpenFlashChart)應運而生。OFC是基于Adobe公司的網(wǎng)頁動畫Flash標準利用其專用描述語言Actionscript3.O開發(fā)的免費開源圖表生成組件(具體可參見http://teethgrinder.co.uk/open-flash_chart2/)。該組件包括一個名為open-flash-chart.swf的Flash動畫文件以及可供該文件調(diào)用的若干庫文件和用于將該動畫文件嵌入網(wǎng)頁供下載調(diào)用swfobject.js文件,使用時，將該動畫文件嵌入網(wǎng)頁應用中，當用戶瀏覽到該網(wǎng)頁時，通過調(diào)用將動畫文件下載本地，同時客戶下載包含根據(jù)要表示的數(shù)據(jù)限定圖表參數(shù)的數(shù)據(jù)文件，動畫文件讀取數(shù)據(jù)文件并在嵌入網(wǎng)頁的Flash播放器中渲染圖表，從而網(wǎng)頁瀏覽器中生成顯示美觀的三維圖表。在數(shù)據(jù)文件方面，0FC1.X版本僅支持讀取文本文件(txt)，而0FC2.O版本支持讀取JSON(JavaScriptObjectNotation)格式的數(shù)據(jù)交換文件。JSON(JavaScriptObjectNotation)是一種輕量級的數(shù)據(jù)交換格式。它基于JavaScript(StandardECMA-2623rdEdition-December1999)的一個子集。JSON采用完全獨立于語言的文本格式,但是也使用了類似于C語言家族的習慣。這些特性使JSON成為理想的數(shù)據(jù)交換語言。易于人閱讀和編寫，同時也易于機器解析和生成。在此基礎上，JSON格式文件特別適于用于傳遞圖表數(shù)據(jù)的數(shù)據(jù)交換文件。而當前基于OFC的網(wǎng)頁報表開發(fā)，主要是采用通過open-flash-chart.swf和swfobject.js來讀取某個JSON格式的文本文件，而JSON格式的文件，只能開發(fā)者自己編寫或者一點點通過程序進行拼裝，這種方式，既造成了大量的開發(fā)工作，其次也無法滿足用戶想要自動變化flash的要求。也難以根據(jù)網(wǎng)頁應用動態(tài)地生成圖表。因此，亟需一種基于網(wǎng)頁的動態(tài)圖表生成方法。
發(fā)明內(nèi)容本發(fā)明為了方便網(wǎng)頁應用中對于圖表的開發(fā)，提供了一種基于網(wǎng)頁的動態(tài)圖表生成方法，利用Flash動態(tài)圖表生成組件在客戶端生成動態(tài)圖表，其特征在于包括以下步驟A.客戶端向服務器端請求顯示動態(tài)圖表，請求中包括要求顯示的圖表類型；B.服務器端的動態(tài)頁面根據(jù)客戶端的請求調(diào)用面向對象編程語言類模塊，所述類模塊中按照Flash動態(tài)圖表生成組件支持的圖表類型對應地定義多個圖表業(yè)務類，并根據(jù)圖表類型中的不同設置項目在對應的圖表業(yè)務類中定義多個設置項目子類，該多個設置項目子類包括與設置項目相關的各項屬性；C.所述類模塊判斷客戶端請求生成的圖表類型，并根據(jù)客戶端請求的圖表類型生成對應的圖表業(yè)務類的對象D.生成完畢后，由業(yè)務類對象向數(shù)據(jù)庫請求圖表所需數(shù)據(jù)；E.數(shù)據(jù)庫根據(jù)業(yè)務類對象的請求返回所述圖表所需數(shù)據(jù)；F.所述類模塊根據(jù)所述圖表所需數(shù)據(jù)以及預先設定的默認值計算并設置所述圖表業(yè)務類對象的各子類屬性；G.屬性設置完畢后，所述類模塊根據(jù)所述圖表業(yè)務類對象生成對應的圖表描述數(shù)據(jù)并返回給動態(tài)頁面，所述圖表描述數(shù)據(jù)與Flash動態(tài)圖表生成組件兼容，用于向所述Flash動態(tài)圖表生成組件傳遞圖表信息；H.動態(tài)頁面生成并向客戶端返回嵌入了Flash動態(tài)圖表生成組件以及所述圖表描述數(shù)據(jù)的頁面；I.Flash動態(tài)圖表生成組件在客戶端網(wǎng)頁瀏覽器中根據(jù)所述圖表描述數(shù)據(jù)生成并展示動態(tài)圖表。其中，所述圖表類型包括餅狀圖、垂直柱狀圖、水平柱狀圖、折線圖和點圖。其中，所述餅狀圖對應餅狀圖業(yè)務類，該類包括標題子類和元素子類，所述元素子類用于定義餅狀圖的顯示內(nèi)容，元素子類包括第一切片開始角度屬性和切片角度值屬性。其中，所述垂直柱狀圖對應垂直柱狀圖業(yè)務類，該類包括用于定義圖表標題的標題子類、用于定義X軸屬性的X軸子類、用于定義Y軸屬性的Y軸子類以及用于定義垂直柱狀圖內(nèi)容的元素子類，所述X軸子類包括X軸最大值以及數(shù)值元素；所述Y軸子類包括Y軸最大值以及數(shù)值元素；所述元素子類包括各數(shù)據(jù)柱的Y軸坐標值。其中，所述Flash動態(tài)圖表生成組件為OpenFlashChart組件。其中，所述動態(tài)頁面使用Javascript、PHP、ASP.NET或Perl實現(xiàn)。其中，所述面向對象語目為C++、C#或Java。其中，所述圖表描述數(shù)據(jù)為JSON格式數(shù)據(jù)。本發(fā)明通過面向對象思想建立Flash圖表生成組件的數(shù)據(jù)描述文件與面向對象類封裝之間的映射關系，實現(xiàn)了動態(tài)讀取生成圖表的功能，大大提高了基于網(wǎng)頁的網(wǎng)絡應用開發(fā)的效率。圖I為本發(fā)明實施例的對象封裝示例圖；圖2為本發(fā)明的分層原理圖；圖3為本發(fā)明實施例所述方法的流程圖。具體實施例方式以下結合附圖對本發(fā)明的具體實施方式作進一步說明。應當理解本部分僅僅選取部分實施例對于本發(fā)明的原理進行示例性說明，而非用于限制本發(fā)明。凡在本發(fā)明原理和原則之內(nèi)所做的任何修改、等同替換和改進等，均包含于本發(fā)明的保護范圍之內(nèi)。OFC組件需要從JSON文件讀取需要顯示的信息,包括例如圖表類型、圖表標題、圖表圖形顏色、數(shù)值說明等等，OFC組件再根據(jù)這些參數(shù)來生成所需要的圖形。JSON建構于兩種結構1、“名稱/值”對的集合。不同的語言中，它被理解為對象(object)，紀錄(record),結構(struct),字典(dictionary),哈希表(hashtable),有鍵列表(keyedlist),或者關聯(lián)數(shù)組(associativearray)。2、值的有序列表(Anorderedlistofvalues)。在大部分語言中，它被理解為數(shù)組(array)。上述兩種結構可以相互嵌套。這些都是常見的數(shù)據(jù)結構。事實上大部分現(xiàn)代計算機語言都以某種形式支持它們。這使得一種數(shù)據(jù)格式在同樣基于這些結構的編程語言之間交換成為可能。JSON具有以下這些形式對象是一個無序的“‘名稱/值’對”集合。一個對象以“{”(左括號)開始，(右括號)結束。每個“名稱”后跟一個“”(冒號)‘名稱/值’對”之間使用“，”(逗號)分隔。數(shù)組是值(value)的有序集合。一個數(shù)組以“[”(左中括號)開始，“]”(右中括號)結束。值之間使用“，”(逗號)分隔。值(value)可以是雙引號括起來的字符串(string)、數(shù)值(number)、true、false、null、對象(object)或者數(shù)組(array)。這些結構可以嵌套以表達復雜的配置含義。在0FC2.O組件中，把所有對象都編寫在{}里面.讓它看起來像下面JSON數(shù)據(jù)格式{"title":{"text":"Manydatalines","style":"{font-size:20px;color:#0000ff;font-family:Verdana;text-align:center;}"上述JSON文件對于圖表的標題文字以及文字格式進行了設置。又例如，可以通過如下JSON設置圖表的X軸的格式參數(shù){"x_axis":{"stroke":I,"tick-height":10,"colour":"#d000d0","grid-colour":"#00ff00","labels":["January,"February","March","April","May","June","July","August","Spetember"]}}其中，stroke為X軸線的寬度；tick_height為X軸刻度線高度值；colour為線的顏色offset為柱狀圖表中X軸的偏移最小值是O;grid-C0l0r為表格線顏色；3d為設置是否使用3D圖形；labels為一數(shù)組表示每個X點的標簽。又例如，需要對顯示的內(nèi)容進行描述時，JSON對Element對象進行描述{"elements":[{"type":"bar","alpha":0.5,"colour":"#9933CC","text":"Pageviews","font-size":10,"values":[9,6,7,9,5,7,6,9,7]}]}其中type為字符串，這里’bar’表示圖形類型為柱狀圖；alpha為0(透明)和1(不透明)之間的值表示柱狀圖的透明度colour為字符串，表示柱狀圖顏色；text為字符串，限定圖例說明文本；font_size為數(shù)字,用于設置圖例文本字體大??；values為要顯示的柱狀圖數(shù)據(jù)。以柱狀圖為例，只要在JSON中按上面所述格式對標題(title)、X軸屬性(x_axis)、Y軸屬性(y_axis)、以及圖表內(nèi)容(element)屬性進行設置，即可以向0FC2.O組件描述所要顯示圖表，該0FC2.O組件即可據(jù)此生成所需要的圖表。要動態(tài)地在客戶端網(wǎng)頁瀏覽器生成圖表，就需要動態(tài)地在服務器端生成基于統(tǒng)計數(shù)據(jù)的JSON文件。6圖I示出了本發(fā)明實施例的對象封裝示例圖。本發(fā)明使用面向對象的編程方法，在面向對象編程語言中，按照0FC2.O組件中所支持的圖表類型(例如，垂直柱狀圖bar，水平柱狀圖hbar，餅狀圖pie等等)一一對應地進行類封裝，即，按照支持的圖表類型分別定義多個圖表業(yè)務類。在這些類中按照圖表中包含的設置項目定義多個子類，例如，由于生成垂直柱狀圖包括標題、X軸、Y軸以及元素四個設置項目，則對應地在垂直柱狀圖類定義標題、X軸、Y軸和元素四個子類，該四個子類中均包含與設置項目屬性對應的屬性。舉例來說，對于X軸設置項目，定義類X_Axis，該類具有具體的例如線寬(stroke)、顏色(color)等屬性。由此，通過面向對象的方式，將JSON對于圖表數(shù)據(jù)的描述與面向對象編程語言的數(shù)據(jù)結構建立映射關系。在建立映射關系后，在圖表業(yè)務類中還至少定義兩個方法，一個用于執(zhí)行讀取數(shù)據(jù)庫，另一個根據(jù)數(shù)據(jù)庫數(shù)據(jù)設置圖表屬性，并根據(jù)所設置的圖表屬性輸出返回JSON文件。由此，完成了對于圖表業(yè)務類的定義。面向對象編程語言所定義的圖表業(yè)務類由此構成動態(tài)頁面和數(shù)據(jù)庫之間的中間層，完成上下聯(lián)系的溝通作用，幫助進行基于網(wǎng)頁的動態(tài)圖表生成。圖2示出了本發(fā)明的分層原理圖。最上層為動態(tài)網(wǎng)頁，本實施例中使用javascript頁面實現(xiàn)，中間層為面向對象編程語言定義的圖表業(yè)務類，這些類可被動態(tài)網(wǎng)頁調(diào)用執(zhí)行，在本實施例中所述的圖表業(yè)務類通過JAVA實現(xiàn)；最下層為包括動態(tài)數(shù)據(jù)的數(shù)據(jù)庫，其用于為圖表提供動態(tài)數(shù)據(jù)。在本實施例中，JSP動態(tài)頁面中嵌入了0FC2.0的動畫組件，并能夠根據(jù)動態(tài)網(wǎng)頁訪問參數(shù)(例如用戶對于某一類數(shù)據(jù)的圖表顯示請求)調(diào)用中間層的JAVA類模塊的方法，JAVA類模塊首先調(diào)用方法向數(shù)據(jù)庫請求需要的數(shù)據(jù)，數(shù)據(jù)庫向JAVA類模塊返回統(tǒng)計的動態(tài)數(shù)據(jù)后，JAVA類模塊調(diào)用所請求的圖表類型所對應的類，生成具體的對象并根據(jù)數(shù)據(jù)庫返回的圖表動態(tài)數(shù)據(jù)設置對象的具體屬性(例如元素、圖表名稱、X軸、Y軸最大值等等)。設置完畢后，JAVA類模塊根據(jù)設置好的對象生成用于告知OFC組件的JSON文件返回給JSP頁面，JSP頁面生成將帶有該JSON文件記憶OFC動畫組件的網(wǎng)頁返回給用戶(客戶端)。在客戶端的瀏覽器中，該返回的網(wǎng)頁中的OFC動畫組件讀取動態(tài)生成的JSON文件由此生成動態(tài)的圖表向用戶展示。圖3示出了本發(fā)明的流程圖。在步驟301，客戶端向服務器端請求顯示動態(tài)圖表，請求中包括要求顯示的圖表類型。在步驟302，服務器端的動態(tài)頁面根據(jù)客戶端的請求調(diào)用面向對象編程語言類模塊。該類模塊中按照支持的圖表類型一一對應地定義多個圖表業(yè)務類，并根據(jù)圖表類型中的不同設置項目在對應的圖表業(yè)務類中定義多個設置項目子類，該多個設置項目子類包括與設置項目相關的各項屬性。在步驟303，類模塊判斷客戶端請求生成的圖表類型。在步驟304，類模塊根據(jù)客戶端請求的圖表類型生成對應的圖表業(yè)務類的對象。在圖3中，如果客戶請求顯示餅圖，則生成餅圖業(yè)務類對象，若客戶請求顯示柱狀圖，則生成柱狀圖業(yè)務類對象，如果客戶請求顯示線狀圖，則生成線狀圖業(yè)務類對象。生成完畢后，由業(yè)務類對象執(zhí)行方法向數(shù)據(jù)庫請求數(shù)據(jù)。在步驟305，數(shù)據(jù)庫根據(jù)業(yè)務類對象的請求返回所需數(shù)據(jù)。在步驟306，所述類模塊根據(jù)數(shù)據(jù)庫數(shù)據(jù)計算并設置業(yè)務類對象的各子類屬性。在步驟307，屬性設置完畢后，類模塊根據(jù)業(yè)務類對象生成對應的圖表描述數(shù)據(jù)(JS0N格式)并返回給動態(tài)頁面。在步驟308，動態(tài)頁面生成嵌入了OFC動畫組件以及該圖表描述數(shù)據(jù)的頁面給客戶端。在步驟309，客戶端下載所返回網(wǎng)頁中的OFC動畫組件以及圖表描述數(shù)據(jù)，OFC動畫組件在客戶端網(wǎng)頁瀏覽器中根據(jù)所述圖表描述數(shù)據(jù)生成并展示動態(tài)圖表。采用本發(fā)明提供的方法，無需編寫繁瑣的JSON格式文件，輕松調(diào)用，輕松設置，即可出現(xiàn)漂亮的三維flash效果的報表。大大提高了基于網(wǎng)頁的網(wǎng)絡應用開發(fā)的效率。權利要求1.一種基于網(wǎng)頁的動態(tài)圖表生成方法，利用Flash動態(tài)圖表生成組件在客戶端生成動態(tài)圖表，其特征在于包括以下步驟A.客戶端向服務器端請求顯示動態(tài)圖表，請求中包括要求顯示的圖表類型；B.服務器端的動態(tài)頁面根據(jù)客戶端的請求調(diào)用面向對象編程語言類模塊，所述類模塊中按照Flash動態(tài)圖表生成組件支持的圖表類型一一對應地定義多個圖表業(yè)務類，并根據(jù)圖表類型中的不同設置項目在對應的圖表業(yè)務類中定義多個設置項目子類，該多個設置項目子類包括與設置項目相關的各項屬性；C.所述類模塊判斷客戶端請求生成的圖表類型，并根據(jù)客戶端請求的圖表類型生成對應的圖表業(yè)務類的對象；D.生成完畢后，由所述圖表業(yè)務類對象向數(shù)據(jù)庫請求圖表所需數(shù)據(jù)；E.數(shù)據(jù)庫根據(jù)所述業(yè)務類對象的請求返回所述圖表所需數(shù)據(jù)；F.所述類模塊根據(jù)所述圖表所需數(shù)據(jù)以及預先設定的默認值計算并設置所述圖表業(yè)務類對象的各子類屬性；G.屬性設置完畢后，所述類模塊根據(jù)所述圖表業(yè)務類對象生成對應的圖表描述數(shù)據(jù)并返回給動態(tài)頁面，所述圖表描述數(shù)據(jù)與Flash動態(tài)圖表生成組件兼容，用于向所述Flash動態(tài)圖表生成組件傳遞圖表信息；H.動態(tài)頁面生成并向客戶端返回嵌入了Flash動態(tài)圖表生成組件以及所述圖表描述數(shù)據(jù)的頁面；I.Flash動態(tài)圖表生成組件在客戶端網(wǎng)頁瀏覽器中根據(jù)所述圖表描述數(shù)據(jù)生成并展示動態(tài)圖表。2.根據(jù)權利要求I所述的基于網(wǎng)頁的動態(tài)圖表生成方法，其特征在于所述圖表類型包括餅狀圖、垂直柱狀圖、水平柱狀圖、折線圖和點圖。3.根據(jù)權利要求2所述的基于網(wǎng)頁的動態(tài)圖表生成方法，其特征在于所述餅狀圖對應餅狀圖業(yè)務類，該類包括標題子類和元素子類，所述元素子類用于定義餅狀圖的顯示內(nèi)容，元素子類包括第一切片開始角度屬性和切片角度值屬性。4.根據(jù)權利要求2所述的基于網(wǎng)頁的動態(tài)圖表生成方法，其特征在于所述垂直柱狀圖對應垂直柱狀圖業(yè)務類，該類包括用于定義圖表標題的標題子類、用于定義X軸屬性的X軸子類、用于定義Y軸屬性的Y軸子類以及用于定義垂直柱狀圖內(nèi)容的元素子類，所述X軸子類包括X軸最大值以及數(shù)值元素；所述Y軸子類包括Y軸最大值以及數(shù)值元素；所述元素子類包括各數(shù)據(jù)柱的Y軸坐標值。5.根據(jù)權利要求I所述的基于網(wǎng)頁的動態(tài)圖表生成方法，其特征在于所述Flash動態(tài)圖表生成組件為OpenFlashChart組件。6.根據(jù)權利要求I所述的基于網(wǎng)頁的動態(tài)圖表生成方法，其特征在于所述動態(tài)頁面使用Javascript、PHP、ASP.NET或Perl實現(xiàn)。7.據(jù)權利要求I所述的基于網(wǎng)頁的動態(tài)圖表生成方法，其特征在于所述面向對象語言為C++、C#或Java。8.根據(jù)權利要求5所述的基于網(wǎng)頁的動態(tài)圖表生成方法，其特征在于所述圖表描述數(shù)據(jù)為JSON格式數(shù)據(jù)。全文摘要本發(fā)明涉及一種基于網(wǎng)頁的動態(tài)圖表生成方法，具體涉及一種基于Flash動態(tài)圖表生成組件的網(wǎng)頁動態(tài)圖表生成方法。通過面向對象編程語言按照Flash動態(tài)圖表生成組件支持的圖表類型一一對應地定義多個圖表業(yè)務類，并根據(jù)圖表類型中的不同設置項目在對應的圖表業(yè)務類中定義多個設置項目子類，該多個設置項目子類包括與設置項目相關的各項屬性，從而在Flash動態(tài)圖表的圖表描述數(shù)據(jù)和面向對象數(shù)據(jù)結構之間建立映射關系，實現(xiàn)基于網(wǎng)頁的動態(tài)圖表生成。文檔編號G06F9/44GK102609256SQ20121001818公開日2012年7月25日申請日期2012年1月19日優(yōu)先權日2012年1月19日發(fā)明者張清鎖,朱盼盼申請人:北京神州數(shù)碼思特奇信息技術股份有限公司