用于終端瀏覽器的網(wǎng)頁中圖表的全屏顯示方法及系統(tǒng)的制作方法
【專利摘要】本發(fā)明是關(guān)于一種用于終端瀏覽器的網(wǎng)頁中圖表的全屏顯示方法及系統(tǒng)，屬于計算機技術(shù)領(lǐng)域。該方法包括：在所述終端瀏覽器中打開網(wǎng)頁標簽，獲取網(wǎng)頁中圖表元素的位置信息；根據(jù)當(dāng)前圖表元素的位置信息，瀏覽器主進程在指定位置處創(chuàng)建并顯示圖表全屏按鈕；當(dāng)接收到用戶對圖表全屏按鈕的觸發(fā)時，判斷圖表元素的狀態(tài)是否為全屏；當(dāng)圖表元素處于非全屏狀態(tài)時，將圖表控件從相應(yīng)的一圖表容器中放入一全屏頁面容器中渲染；全屏頁面容器調(diào)用圖表重繪尺寸接口，將圖表控件的尺寸拉伸至所述全屏頁面容器的大小。本發(fā)明能夠自適應(yīng)的將圖表以瀏覽器的網(wǎng)頁的全屏大小顯示，且同時不影響該終端的其它操作。
【專利說明】
用于終端瀏覽器的網(wǎng)頁中圖表的全屏顯示方法及系統(tǒng)
技術(shù)領(lǐng)域
[0001] 本發(fā)明涉及計算機技術(shù)，尤其涉及一種用于終端瀏覽器的網(wǎng)頁中圖表的全屏顯示 方法及系統(tǒng)。
【背景技術(shù)】
[0002] 在各種數(shù)據(jù)可視化平臺中，都包含各種顯示數(shù)據(jù)的圖表控件，例如:折線圖、柱圖、 餅圖等。但是，絕大多數(shù)的數(shù)據(jù)可視化平臺中的圖表控件，都沒能提供全屏查看的功能。
[0003] 圖表通常只能在其顯示的位置查看，不可單獨全屏查看，如圖1所示。無法全屏查 看，用戶有時無法集中精力查看自己關(guān)注的數(shù)據(jù);用戶在會議中顯示圖表數(shù)據(jù)時無法全屏， 觀眾看數(shù)據(jù)比較費精力；圖表通常沒有針對移動設(shè)備優(yōu)化顯示，比如在手機上看數(shù)據(jù)時很 不方便。
[0004] 因此，需要一種新的用于終端瀏覽器的網(wǎng)頁中圖表的全屏顯示方法及系統(tǒng)。
[0005] 在所述【背景技術(shù)】部分公開的上述信息僅用于加強對本發(fā)明的背景的理解，因此它 可以包括不構(gòu)成對本領(lǐng)域普通技術(shù)人員已知的現(xiàn)有技術(shù)的信息。

【發(fā)明內(nèi)容】

[0006] 本發(fā)明提供一種用于終端瀏覽器的網(wǎng)頁中圖表的全屏顯示方法及系統(tǒng)，使圖表可 支持瀏覽器的網(wǎng)頁全屏查看。
[0007] 本發(fā)明的其他特性和優(yōu)點將通過下面的詳細描述變得顯然，或部分地通過本發(fā)明 的實踐而習(xí)得。
[0008] 根據(jù)本發(fā)明的一方面，提供一種用于終端瀏覽器的網(wǎng)頁中圖表的全屏顯示方法， 包括:在所述終端瀏覽器中打開網(wǎng)頁標簽，獲取網(wǎng)頁中圖表元素的位置信息;根據(jù)所述圖表 元素的位置信息，所述瀏覽器主進程在指定位置處創(chuàng)建并顯示圖表全屏按鈕；當(dāng)接收到用 戶對所述圖表全屏按鈕的觸發(fā)時，判斷所述圖表元素的狀態(tài)是否為全屏；當(dāng)所述圖表元素 處于非全屏狀態(tài)時，將圖表控件從相應(yīng)的一圖表容器中放入一全屏頁面容器中渲染;所述 全屏頁面容器調(diào)用圖表重繪尺寸接口，將所述圖表控件的尺寸拉伸至所述全屏頁面容器的 大小。
[0009] 根據(jù)本發(fā)明的一實施方式，還包括:預(yù)先在網(wǎng)頁中創(chuàng)建所述圖表容器，其中所述圖 表容器用于存放所述圖表控件;預(yù)先在所述網(wǎng)頁中創(chuàng)建所述全屏頁面容器，其中所述全屏 頁面容器用于存放圖表全屏顯示后的相應(yīng)圖表控件，所述全屏顯示是指所述圖表元素以該 網(wǎng)頁的全屏尺寸顯示。
[0010] 根據(jù)本發(fā)明的一實施方式，還包括:當(dāng)所述圖表元素處于全屏狀態(tài)時，將所述圖表 控件從所述全屏頁面容器中放入相應(yīng)的圖表容器中渲染;所述全屏頁面容器調(diào)用所述圖表 重繪尺寸接口，將所述圖表控件的尺寸恢復(fù)至所述圖表容器的大小。
[0011] 根據(jù)本發(fā)明的一實施方式，還包括:檢測所述瀏覽器的窗口尺寸是否發(fā)生變化;當(dāng) 所述瀏覽器的窗口尺寸發(fā)生變化時，且所述圖表元素處于全屏狀態(tài)，所述全屏頁面容器調(diào) 用所述圖表重繪尺寸接口，將所述圖表控件的尺寸拉伸至所述瀏覽器的窗口尺寸改變后的 所述全屏頁面容器的大小。
[0012] 根據(jù)本發(fā)明的一實施方式，還包括:判斷所述終端是否為移動設(shè)備；當(dāng)所述終端是 移動設(shè)備時，判斷所述移動設(shè)備是否處于豎屏狀態(tài)；當(dāng)所述移動設(shè)備處于豎屏狀態(tài)時，且所 述圖表元素處于全屏狀態(tài)時，對所述圖表元素的坐標執(zhí)行圖表坐標轉(zhuǎn)換;所述全屏頁面容 器調(diào)用所述圖表重繪尺寸接口，用于將所述圖表控件的尺寸拉伸至所述移動設(shè)備豎屏狀態(tài) 下的所述全屏頁面容器的大小。
[0013] 根據(jù)本發(fā)明的一實施方式，其中所述判斷所述圖表元素的狀態(tài)是否為全屏或者非 全屏包括:根據(jù)所述全屏頁面容器中的一圖表全屏狀態(tài)參數(shù)的預(yù)設(shè)值來判斷所述圖表元素 的狀態(tài)為全屏狀態(tài)或者非全屏狀態(tài)。
[0014] 根據(jù)本發(fā)明的一實施方式，還包括：當(dāng)所述圖表元素當(dāng)前的全屏狀態(tài)參數(shù)的值指 示為非全屏狀態(tài)，在執(zhí)行完拉伸操作全屏顯示所述圖表元素時，修改所述全屏狀態(tài)參數(shù)的 值指示為全屏狀態(tài)；當(dāng)所述圖表元素當(dāng)前的全屏狀態(tài)參數(shù)的值指示為全屏狀態(tài)，在執(zhí)行完 恢復(fù)操作非全屏顯示所述圖表元素時，修改所述全屏狀態(tài)參數(shù)的值指示為非全屏狀態(tài)。
[0015] 根據(jù)本發(fā)明的一實施方式，其中所述圖表全屏按鈕內(nèi)嵌于所述圖表容器中，當(dāng)用 戶點擊所述圖表全屏按鈕時，切換所述圖表元素以全屏或者非全屏狀態(tài)顯示。
[0016] 根據(jù)本發(fā)明的一實施方式，其中所述指定位置為:所述圖表元素區(qū)域內(nèi)任一位置； 或者為所述圖表元素邊緣處一位置。
[0017] 根據(jù)本發(fā)明的再一個方面，提供一種用于終端瀏覽器的網(wǎng)頁中圖表的全屏顯示系 統(tǒng)，包括:位置信息獲取模塊，用于在所述終端瀏覽器中打開網(wǎng)頁標簽，獲取網(wǎng)頁中圖表元 素的位置信息;創(chuàng)建全屏按鈕模塊，用于根據(jù)所述圖表元素的位置信息，所述瀏覽器主進程 在指定位置處創(chuàng)建并顯示圖表全屏按鈕;第一判斷模塊，用于當(dāng)接收到用戶對所述圖表全 屏按鈕的觸發(fā)時，判斷所述圖表元素的狀態(tài)是否為全屏;第一渲染模塊，用于當(dāng)所述圖表元 素處于非全屏狀態(tài)時，將圖表控件從相應(yīng)的一圖表容器中放入一全屏頁面容器中渲染;第 一拉伸模塊，用于所述全屏頁面容器調(diào)用圖表重繪尺寸接口，將所述圖表控件的尺寸拉伸 至所述全屏頁面容器的大小。
[0018] 根據(jù)本發(fā)明的一實施方式，還包括:圖表容器創(chuàng)建模塊，用于預(yù)先在網(wǎng)頁中創(chuàng)建所 述圖表容器，其中所述圖表容器用于存放所述圖表控件;全屏頁面容器創(chuàng)建模塊，用于預(yù)先 在所述網(wǎng)頁中創(chuàng)建所述全屏頁面容器，其中所述全屏頁面容器用于存放圖表全屏顯示后的 相應(yīng)圖表控件，所述全屏顯示是指所述圖表元素以該網(wǎng)頁的全屏尺寸顯示。
[0019] 根據(jù)本發(fā)明的一實施方式，還包括:第二渲染模塊，用于當(dāng)所述圖表元素處于全屏 狀態(tài)時，將所述圖表控件從所述全屏頁面容器中放入相應(yīng)的圖表容器中渲染;恢復(fù)模塊，用 于所述全屏頁面容器調(diào)用所述圖表重繪尺寸接口，將所述圖表控件的尺寸恢復(fù)至所述圖表 容器的大小。
[0020] 根據(jù)本發(fā)明的一實施方式，還包括:修改狀態(tài)模塊，用于當(dāng)所述圖表元素當(dāng)前的全 屏狀態(tài)參數(shù)的值指示為非全屏狀態(tài)，在執(zhí)行完拉伸操作全屏顯示所述圖表元素時，修改所 述全屏狀態(tài)參數(shù)的值指示為全屏狀態(tài)；當(dāng)所述圖表元素當(dāng)前的全屏狀態(tài)參數(shù)的值指示為全 屏狀態(tài)，在執(zhí)行完恢復(fù)操作非全屏顯示所述圖表元素時，修改所述全屏狀態(tài)參數(shù)的值指示 為非全屏狀態(tài)。
[0021 ]根據(jù)本發(fā)明的一實施方式，還包括:檢測模塊，用于檢測所述瀏覽器的窗口尺寸是 否發(fā)生變化;第二拉伸模塊，用于當(dāng)所述瀏覽器的窗口尺寸發(fā)生變化時，且所述圖表元素處 于全屏狀態(tài)，所述全屏頁面容器調(diào)用所述圖表重繪尺寸接口，將所述圖表控件的尺寸拉伸 至所述瀏覽器的窗口尺寸改變后的所述全屏頁面容器的大小。
[0022]根據(jù)本發(fā)明的一實施方式，還包括:第二判斷模塊，用于判斷所述終端是否為移動 設(shè)備；第三判斷模塊，用于當(dāng)所述終端是移動設(shè)備時，判斷所述移動設(shè)備是否處于豎屏狀 態(tài);坐標變換模塊，用于當(dāng)所述移動設(shè)備處于豎屏狀態(tài)時，且所述圖表元素當(dāng)前處于全屏狀 態(tài)，對所述圖表元素執(zhí)行坐標轉(zhuǎn)換;第三拉伸模塊，用于所述全屏頁面容器調(diào)用所述圖表重 繪尺寸接口，將所述圖表控件的尺寸拉伸至所述移動設(shè)備豎屏狀態(tài)下的所述全屏頁面容器 的大小。
[0023]根據(jù)本發(fā)明的再一個方面，還提供一種終端設(shè)備，包括:處理器；用于存儲處理器 可執(zhí)行指令的存儲器。其中，所述處理器被配置為:在所述終端設(shè)備的瀏覽器中打開網(wǎng)頁標 簽，獲取網(wǎng)頁中圖表元素的位置信息;根據(jù)所述圖表元素的位置信息，在指定位置處創(chuàng)建并 顯示圖表全屏按鈕；當(dāng)接收到用戶對所述圖表全屏按鈕的觸發(fā)時，判斷所述圖表元素的狀 態(tài)是否為全屏；當(dāng)所述圖表元素處于非全屏狀態(tài)時，將圖表控件從相應(yīng)的一圖表容器中放 入一全屏頁面容器中渲染;所述全屏頁面容器調(diào)用圖表重繪尺寸接口，將所述圖表控件的 尺寸拉伸至所述全屏頁面容器的大小。
[0024]根據(jù)本發(fā)明的一實施方式，其中，所述處理器還被配置為:判斷所述終端設(shè)備是否 為移動設(shè)備；當(dāng)所述終端設(shè)備是移動設(shè)備時，判斷所述移動設(shè)備是否處于豎屏狀態(tài)；當(dāng)所述 移動設(shè)備處于豎屏狀態(tài)時，且所述圖表元素處于全屏狀態(tài)時，對所述圖表元素的坐標執(zhí)行 圖表坐標轉(zhuǎn)換;所述全屏頁面容器調(diào)用所述圖表重繪尺寸接口，用于將所述圖表控件的尺 寸拉伸至所述移動設(shè)備豎屏狀態(tài)下的所述全屏頁面容器的大小。
[0025]本發(fā)明公開的用于終端瀏覽器的網(wǎng)頁中圖表的全屏顯示方法及系統(tǒng)，圖表可支持 全屏，用戶可以方便地查看自己關(guān)注的數(shù)據(jù)，為用戶節(jié)省寶貴的時間與精力;在一些公共場 合演示圖表數(shù)據(jù)時，也會使觀眾看數(shù)據(jù)顯得更加直觀。
[0026]應(yīng)當(dāng)理解的是，以上的一般描述和后文的細節(jié)描述僅是示例性和解釋性的，并不 能限制本發(fā)明。
【附圖說明】
[0027]此處的附圖被并入說明書中并構(gòu)成本說明書的一部分，示出了符合本發(fā)明的實施 例，并與說明書一起用于解釋本發(fā)明的原理。
[0028]圖1示意性示出終端瀏覽器的網(wǎng)頁中圖表的非全屏顯示；
[0029] 圖2A-2C示意性示出根據(jù)本發(fā)明示例實施方式的用于終端瀏覽器的網(wǎng)頁中圖表的 全屏顯示方法的流程圖；
[0030] 圖3A-3C示意性示出根據(jù)本發(fā)明示例實施方式的用于終端瀏覽器的網(wǎng)頁中圖表的 全屏顯示方法的流程圖；
[0031] 圖4A-4C示意性示出根據(jù)本發(fā)明示例實施方式的用于終端瀏覽器的網(wǎng)頁中圖表的 全屏顯示方法的流程圖；
[0032] 圖5示意性示出根據(jù)本發(fā)明示例實施方式的用于終端瀏覽器的網(wǎng)頁中的圖表全屏 按鈕的示意圖；
[0033]圖6示意性示出根據(jù)本發(fā)明示例實施方式的用于終端瀏覽器的網(wǎng)頁中圖表的全屏 顯示系統(tǒng)的框圖；
[0034]圖7A-7C示意性示出現(xiàn)有的用于終端瀏覽器的網(wǎng)頁中圖表的全屏顯示方法的流程 圖。
【具體實施方式】
[0035] 現(xiàn)在將參考附圖更全面地描述示例實施方式。然而，示例實施方式能夠以多種形 式實施，且不應(yīng)被理解為限于在此闡述的范例;相反，提供這些實施方式使得本發(fā)明將更加 全面和完整，并將示例實施方式的構(gòu)思全面地傳達給本領(lǐng)域的技術(shù)人員。附圖僅為本發(fā)明 的示意性圖解，并非一定是按比例繪制。圖中相同的附圖標記表示相同或類似的部分，因而 將省略對它們的重復(fù)描述。
[0036] 此外，所描述的特征、結(jié)構(gòu)或特性可以以任何合適的方式結(jié)合在一個或更多實施 方式中。在下面的描述中，提供許多具體細節(jié)從而給出對本發(fā)明的實施方式的充分理解。然 而，本領(lǐng)域技術(shù)人員將意識到，可以實踐本發(fā)明的技術(shù)方案而省略所述特定細節(jié)中的一個 或更多，或者可以采用其它的方法、組元、系統(tǒng)、步驟等。在其它情況下，不詳細示出或描述 公知結(jié)構(gòu)、方法、系統(tǒng)、實現(xiàn)、材料或者操作以避免喧賓奪主而使得本發(fā)明的各方面變得模 糊。
[0037]附圖中所示的一些方框圖是功能實體，不一定必須與物理或邏輯上獨立的實體相 對應(yīng)?？梢圆捎密浖问絹韺崿F(xiàn)這些功能實體，或在一個或多個硬件模塊或集成電路中實 現(xiàn)這些功能實體，或在不同網(wǎng)絡(luò)和/或處理器系統(tǒng)和/或微控制器系統(tǒng)中實現(xiàn)這些功能實 體。
[0038] 以下示例性實施例中所描述的實施方式并不代表與本發(fā)明相一致的所有實施方 式。相反，它們僅是與如所附權(quán)利要求書中所詳述的、本發(fā)明的一些方面相一致的系統(tǒng)和方 法的例子。
[0039] 圖2A-2C示意性示出根據(jù)本發(fā)明示例實施方式的用于終端瀏覽器的網(wǎng)頁中圖表的 全屏顯示方法的流程圖。
[0040] 如圖2A所示，在步驟S110,在所述終端瀏覽器中打開網(wǎng)頁標簽，獲取網(wǎng)頁中圖表元 素的位置信息。
[0041] 例如，打開瀏覽器主進程和網(wǎng)頁子進程，在所述網(wǎng)頁子進程中打開網(wǎng)頁標簽，并獲 取網(wǎng)頁中圖表元素的位置信息。
[0042]本發(fā)明實施例主要針對網(wǎng)頁端全屏顯示圖表控件，包括使用PC或者移動設(shè)備等終 端打開瀏覽器查看網(wǎng)頁、或者在移動設(shè)備APP內(nèi)嵌入的網(wǎng)頁中瀏覽(如微信分享）。
[0043]瀏覽器內(nèi)核負責(zé)對網(wǎng)頁進行加載、顯示、以及JS( javascript)的執(zhí)行的部分，是瀏 覽器的核心。網(wǎng)頁內(nèi)核中包括用于網(wǎng)頁元素排版的排版引擎。瀏覽器顯示網(wǎng)頁時，圖表實際 上是網(wǎng)頁的一個節(jié)點，大小和位置由瀏覽器排版引擎控制。瀏覽器將圖表的網(wǎng)頁節(jié)點當(dāng)作 普通節(jié)點對待。因此，一般情況下，圖表區(qū)域只是作為網(wǎng)頁的一個部分進行顯示，并不會全 屏顯示，用戶除了能看到圖表，還看到了網(wǎng)頁的其它元素。WebView是安卓操作系統(tǒng)上用來 顯示的控件，將其稱為網(wǎng)頁視圖控件。
[0044] 所述圖片元素的位置信息包括:所述圖片元素在所述網(wǎng)頁子進程的頁面可見區(qū)域 中的左上角位置坐標和所述圖片元素的寬和高。
[0045] 在示例性實施例中，還可以獲取所述圖片元素的屬性信息和圖片數(shù)據(jù)。所述圖片 元素的屬性信息包括：圖片大小、圖片在本地緩存的地址、圖片在云端的保存地址和/或所 述圖片元素的URL。
[0046] 在步驟S120,根據(jù)所述圖表元素的位置信息，所述瀏覽器主進程在指定位置處創(chuàng) 建并顯示圖表全屏按鈕。
[0047] 在示例性實施例中，其中所述圖表全屏按鈕內(nèi)嵌于圖表容器中，當(dāng)用戶點擊所述 圖表全屏按鈕時，切換所述圖表元素以全屏或者非全屏狀態(tài)顯示。
[0048] 在示例性實施例中，其中所述指定位置為:所述圖表元素區(qū)域內(nèi)任一位置;或者為 所述圖表元素邊緣處一位置。
[0049] 在步驟S130,當(dāng)接收到用戶對所述圖表全屏按鈕的觸發(fā)時，判斷所述圖表元素的 狀態(tài)是否為全屏。
[0050] 在示例性實施例中，其中所述判斷所述圖表元素的狀態(tài)是否為全屏或者非全屏包 括:根據(jù)所述全屏頁面容器中的一圖表全屏狀態(tài)參數(shù)的預(yù)設(shè)值來判斷所述圖表元素的狀態(tài) 為全屏狀態(tài)或者非全屏狀態(tài)。
[0051] 在示例性實施例中，所述圖表全屏狀態(tài)參數(shù)的值用于記錄當(dāng)前圖表是否處于全屏 狀態(tài)，類型為bool，默認為false(即非全屏狀態(tài)）。
[0052]在步驟S140,當(dāng)所述圖表元素處于非全屏狀態(tài)時，將圖表控件從相應(yīng)的一圖表容 器中放入一全屏頁面容器中渲染。
[0053]在示例性實施例中，還包括:預(yù)先在網(wǎng)頁中創(chuàng)建所述圖表容器，其中所述圖表容器 用于存放所述圖表控件;預(yù)先在所述網(wǎng)頁中創(chuàng)建所述全屏頁面容器，其中所述全屏頁面容 器用于存放圖表全屏顯示后的相應(yīng)圖表控件，所述全屏顯示是指所述圖表元素以該網(wǎng)頁的 全屏尺寸顯示。
[0054]在示例性實施例中，存放所述圖表控件的所述圖表容器在html頁面中通常為某個 div標簽。所述全屏頁面容器在html頁面中為body標簽。
[0055] html即超文本標記語言，開發(fā)網(wǎng)頁都需要使用html 即為html的最新版本。 結(jié)合本發(fā)明實施例的簡單示例如下：
[0056] <!D0CTYPE html> <html> 〈head〉 <meta http-equiv="Content-Type" content="text/html; charset=utf-8f, /> <title></title> <meta charset="utf-8" /> </head> <body> <div>
[0057] 此di v標簽為地圖容器 </div> <div> 此div標簽為餅圖容器 </div> </body> </html>
[0058] 如上例所示，body標簽即為全屏頁面容器，兩個div標簽即為圖表容器。
[0059]在步驟S150,所述全屏頁面容器調(diào)用圖表重繪尺寸接口，將所述圖表控件的尺寸 拉伸至所述全屏頁面容器的大小。
[0060]在示例性實施例中，圖表重繪尺寸方法使所述圖表控件的尺寸自適應(yīng)其當(dāng)前容器 的可執(zhí)行方法，一般提供為javascript API。不同的圖表框架有各自不同的實現(xiàn)。 javascript即為一種可嵌入在html內(nèi)執(zhí)行的腳本語言，通常在網(wǎng)頁開發(fā)中都需要用。
[0061 ]例如：high charts 中為re flow 方法；echarts 中為resize 方法。high charts 及 echarts為第三方實現(xiàn)的javascript圖表控件庫。
[0062] API即為應(yīng)用程序編程接口。如重繪方法ref low及resize，貝lj為highcharts及 echarts分別對外提供的重繪圖表的API接口。
[0063]在網(wǎng)頁全屏顯示所述圖表元素的同時，不隱藏所述移動終端的其它視圖控件，也 不屏蔽所述網(wǎng)頁視圖控件的部分或全部功能。
[0064] 本發(fā)明實施例中，切換圖表當(dāng)前所處容器以達到全屏顯示的效果。使用該方法全 屏顯示圖表前的效果如圖2B所示。用戶點擊圖2B中的右面圖表中的方框標識的圖表全屏按 鈕后，圖表會以該網(wǎng)頁內(nèi)的全屏尺寸顯示(注意，此處并不是以終端屏幕的全屏尺寸顯示）， 全屏顯示圖表后的效果如圖2C所示。
[0065] 在示例性實施例中，在接收到進入全屏指令后，從終端獲取所述網(wǎng)頁視圖控件相 對于所述圖表控件中基準點的偏移量;根據(jù)所述獲取的偏移量以及所述圖表控件的寬和 高，將所述圖表控件的界面拉伸至與所述網(wǎng)頁視圖控件的界面重合;其中，所述網(wǎng)頁視圖控 件用于網(wǎng)頁內(nèi)容顯示，所述圖表控件用于圖表內(nèi)容顯示，以及所述圖表控件在所述網(wǎng)頁視 圖控件中。其中，所述網(wǎng)頁視圖控件相對于所述圖表控件中基準點的偏移量是從移動終端 瀏覽器內(nèi)核中獲取的。
[0066] 其中，所述網(wǎng)頁視圖控件基準點是網(wǎng)頁視圖控件的左上角頂點，所述圖表控件的 基準點是圖表控件的移動左上角頂點。所述偏移量包括X坐標值和Y坐標值，所述坐標值是 基于以所述圖表控件的左上角為原點建立的坐標系確定的，以及根據(jù)所述獲取的偏移量以 及所述網(wǎng)頁視圖控件的寬和高，將所述圖表控件的界面邊界拉伸至與所述網(wǎng)頁視圖控件的 邊界重合包括:將所述圖表控件的左上角頂點的坐標分別設(shè)置為所述偏移量中的X坐標值 和 Y坐標值；以及根據(jù)所設(shè)置的圖表控件左上角頂點的坐標和寬高，在所述圖表控件界面中 重新繪制所述圖表控件界面。
[0067] 在示例性實施例中，還包括：當(dāng)所述圖表元素處于全屏狀態(tài)時，將所述圖表控件從 所述全屏頁面容器中放入相應(yīng)的圖表容器中渲染;所述全屏頁面容器調(diào)用所述圖表重繪尺 寸接口，將所述圖表控件的尺寸恢復(fù)至所述圖表容器的大小。
[0068] 在接收到退出全屏指令后，從所述瀏覽器內(nèi)核中獲取當(dāng)前所述圖表控件的基準點 相對于拉伸前的所述圖表控件的基準點的原始偏移量以及原始寬高值；以及根據(jù)當(dāng)前所述 圖表控件的基準點相對于拉伸前的所述圖表控件的基準點的原始偏移量以及原始寬高值， 將所述圖表控件在所述網(wǎng)頁視圖控件中的位置移回到拉伸前的位置并將所述圖表控件的 寬高設(shè)置為原始寬高值。
[0069] 在示例性實施例中，還包括：當(dāng)所述圖表元素當(dāng)前的全屏狀態(tài)參數(shù)的值指示為非 全屏狀態(tài)，在執(zhí)行完拉伸操作全屏顯示所述圖表元素時，修改所述全屏狀態(tài)參數(shù)的值指示 為全屏狀態(tài)；當(dāng)所述圖表元素當(dāng)前的全屏狀態(tài)參數(shù)的值指示為全屏狀態(tài)，在執(zhí)行完恢復(fù)操 作非全屏顯示所述圖表元素時，修改所述全屏狀態(tài)參數(shù)的值指示為非全屏狀態(tài)。
[0070] 在示例性實施例中，還包括:檢測所述瀏覽器的窗口尺寸是否發(fā)生變化;當(dāng)所述瀏 覽器的窗口尺寸發(fā)生變化時，且所述圖表元素處于全屏狀態(tài)，所述全屏頁面容器調(diào)用所述 圖表重繪尺寸接口，將所述圖表控件的尺寸拉伸至所述瀏覽器的窗口尺寸改變后的所述全 屏頁面容器的大小。
[0071 ]在示例性實施例中，還包括:判斷所述終端是否為移動設(shè)備；當(dāng)所述終端是移動設(shè) 備時，判斷所述移動設(shè)備是否處于豎屏狀態(tài)；當(dāng)所述移動設(shè)備處于豎屏狀態(tài)時，且所述圖表 元素處于全屏狀態(tài)時，對所述圖表元素的坐標執(zhí)行圖表坐標轉(zhuǎn)換;所述全屏頁面容器調(diào)用 所述圖表重繪尺寸接口，用于將所述圖表控件的尺寸拉伸至所述移動設(shè)備豎屏狀態(tài)下的所 述全屏頁面容器的大小。
[0072]圖3A-3C示意性示出根據(jù)本發(fā)明示例實施方式的用于終端瀏覽器的網(wǎng)頁中圖表的 全屏顯示方法的流程圖。
[0073] 如圖3A所示，在步驟S210,預(yù)先在網(wǎng)頁中創(chuàng)建圖表容器和全屏頁面容器。
[0074]在步驟S220,瀏覽器主進程在當(dāng)前網(wǎng)頁的圖表元素的指定位置處創(chuàng)建并顯示圖表 全屏按鈕。
[0075] 在示例性實施例中，首先渲染所述圖表全屏按鈕到相應(yīng)的圖表元素的圖表控件 中。
[0076] 在步驟S230,是否觸發(fā)圖表全屏按鈕?如果沒有檢測到用戶點擊觸發(fā)所述圖表全 屏按鈕，則跳轉(zhuǎn)到步驟S270;如果檢測到用戶點擊觸發(fā)所述圖表全屏按鈕，則進入下一步。
[0077] 判斷用戶是否點擊某一圖表控件內(nèi)的所述圖表全屏按鈕。
[0078] 在步驟S240,該圖表元素是否為全屏狀態(tài)?如果所述圖表元素處于全屏狀態(tài)，則跳 轉(zhuǎn)到步驟S260;如果所述圖表元素處于非全屏狀態(tài)，則進入下一步。
[0079] 在步驟S250,將圖表控件從相應(yīng)的圖表容器中放入該全屏頁面容器中渲染，將圖 表控件的尺寸拉伸至全屏頁面容器的大小。
[0080] 如果所述圖表元素當(dāng)前處于非全屏狀態(tài)，則在接收到用戶點擊所述圖表全屏按鈕 的觸發(fā)操作時，將所述圖表控件由原容器中放入所述全屏頁面容器中渲染。
[0081] 在步驟S260,將圖表控件從全屏頁面容器中放入相應(yīng)的圖表容器中渲染，將圖表 控件的尺寸恢復(fù)至圖表容器的大小。
[0082] 如果所述圖表元素當(dāng)前處于全屏狀態(tài)(如圖3B所示），則在接收到用戶點擊所述圖 表全屏按鈕的觸發(fā)操作時，將所述圖表控件由全屏頁面容器中放入原容器（即相應(yīng)的圖表 容器)中渲染。所述圖表元素會恢復(fù)為非全屏狀態(tài)，如圖3C所示。
[0083] 在步驟S270,結(jié)束。
[0084] 本發(fā)明實施例中的其它內(nèi)容參考上述實施例中的內(nèi)容，在此不再贅述。
[0085] 圖4A-4C示意性示出根據(jù)本發(fā)明示例實施方式的用于終端瀏覽器的網(wǎng)頁中圖表的 全屏顯示方法的流程圖。
[0086] 如圖4A所示，在步驟S310,打開瀏覽器主進程和網(wǎng)頁子進程，在網(wǎng)頁子進程中打開 網(wǎng)頁標簽，并獲取網(wǎng)頁中圖表元素的位置信息。
[0087] 在步驟S320，終端是否為移動設(shè)備?如果該終端是移動設(shè)備，則進入下一步;反之， 跳轉(zhuǎn)到步驟S370。
[0088] 在步驟S330，該移動設(shè)備處于豎屏狀態(tài)?如果所述移動設(shè)備處于豎屏狀態(tài)，則進入 下一步;反之，跳轉(zhuǎn)到步驟S370。
[0089] 在步驟S340，該圖表元素是否為全屏狀態(tài)?如果所述圖表元素處于全屏狀態(tài)，則進 入下一步;反之，跳轉(zhuǎn)到步驟S370。
[0090] 在步驟S350，對圖表元素的坐標執(zhí)行圖表坐標轉(zhuǎn)換。
[0091] 在移動設(shè)備中，用戶使用的設(shè)備通常處于豎屏狀態(tài)。此時就需要進行圖表坐標轉(zhuǎn) 換。例如，
[0092] 當(dāng)用戶將所述移動設(shè)備從橫屏狀態(tài)切換為豎屏狀態(tài)時，如果所述圖表元素當(dāng)前處 于豎屏狀態(tài)，則需要首先將所述圖表元素的坐標進行90度轉(zhuǎn)換，使所述圖表控件全屏后更 好地在豎屏狀態(tài)下的移動設(shè)備中顯示。
[0093] 在示例性實施例中，所述圖表坐標轉(zhuǎn)換可以使用CSS3的transform:rotate來實 現(xiàn)。但本發(fā)明并不以此為限。
[0094] CSS(Cascading StyleSheet)即層疊樣式表，是一種可嵌入的html內(nèi)執(zhí)行的描述 標簽樣式的語言。在網(wǎng)頁制作時采用層疊樣式表技術(shù)，可以有效地對頁面的布局、字體、顏 色、背景和其它效果實現(xiàn)更加精確的控制。只要對相應(yīng)的代碼做一些簡單的修改，就可以改 變同一頁面的不同部分，或者頁數(shù)不同的網(wǎng)頁的外觀和格式。CSS3即為CSS的最新版本。 CSS3語言開發(fā)是朝著模塊化發(fā)展的。以前的規(guī)范作為一個模塊實在是太龐大而且比較復(fù) 雜，所以，把它分解為一些小的模塊，更多新的模塊也被加入進來。這些模塊包括:盒子模 型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等。
[0095]本發(fā)明實施例中的圖表坐標90度轉(zhuǎn)換方式，就可以使用CSS實現(xiàn)，語法為： transform:rotate(90deg)〇
[0096]如果用戶的所述移動設(shè)備當(dāng)前處于橫屏狀態(tài)，則無需坐標轉(zhuǎn)換。
[0097]在步驟S360,全屏頁面容器調(diào)用圖表重繪尺寸接口，將圖表控件的尺寸拉伸至移 動設(shè)備豎屏狀態(tài)下的全屏頁面容器的大小。
[0098]在執(zhí)行完圖表坐標轉(zhuǎn)換操作后，此時圖表尺寸還未自適應(yīng)當(dāng)前容器，須調(diào)用所述 圖表重繪尺寸接口，使所述圖表控件自適應(yīng)當(dāng)前所處容器（原容器或全屏頁面容器）的大 小。完成了全屏顯不圖表。
[0099] 在步驟S370,結(jié)束。
[0100]在移動設(shè)備中全屏顯示后，如手機當(dāng)前處于豎屏狀態(tài)，則會自動轉(zhuǎn)換為豎屏顯示。 例如，全屏顯示如圖4B(對應(yīng)于上圖2C)或者圖4C所示(對應(yīng)于上圖3B)。
[0101] 在另一發(fā)明實施例中，當(dāng)所述終端為PC時，也會有類似情況。例如：在用戶觸發(fā)所 述圖表全屏按鈕后，此時用戶可以在PC端拖動瀏覽器窗口以改變?yōu)g覽器窗口的大小。此時 如果所述圖表全屏狀態(tài)參數(shù)的值為"全屏"，由于瀏覽器窗口尺寸發(fā)生了變化，此時須要調(diào) 用所述圖表重繪尺寸接口再次進行拉伸操作以使所述圖表元素的尺寸適配改變了瀏覽器 窗口尺寸后的全屏頁面容器的大小。具體實現(xiàn)方式可以為監(jiān)聽瀏覽器尺寸改變事件，在該 事件中觸發(fā)上述操作。
[0102] 本發(fā)明實施例中的其它內(nèi)容參考上述實施例中的內(nèi)容，在此不再贅述。
[0103] 圖5示意性示出根據(jù)本發(fā)明示例實施方式的用于終端瀏覽器的網(wǎng)頁中的圖表全屏 按鈕的示意圖。
[0104] 如圖5所示，所述圖表全屏按鈕位于所述圖表元素區(qū)域內(nèi)的左上角。其中，所述圖 表全屏按鈕的形狀為兩個交叉的雙向箭頭(圓圈標識中的符號）。但本發(fā)明并不以此為限。
[0105] 在示例性實施例中，所述圖表全屏按鈕可以為所述圖表元素區(qū)域內(nèi)的某一個角。 例如，可以為圖表的左上角、左下角、右上角、右下角，甚至，可以位于鄰近與所述圖表元素 的區(qū)域的周邊區(qū)域。例如，所述圖表全屏按鈕可以為原點、空心圓圈、對號形、錯號形等。
[0106] 在示例性實施例中，用戶輸入全屏指令或者輸入退出全屏指令均以形狀、位置相 同的所述圖表全屏按鈕并結(jié)合圖表全屏狀態(tài)參數(shù)來識別。在另一實施例中，也可以通過不 同形狀和/或不同位置的按鈕來分別指示全屏指令或者退出全屏指令。
[0107] 另外，關(guān)于用戶輸入全屏或者退出全屏指令的形式，可以有很多種，并不限于上述 的圖表全屏按鈕，也可以是其它可以達到相同目的的技術(shù)手段。例如，系統(tǒng)可以通過預(yù)先設(shè) 置的手勢來其中，用戶可以通過在任一圖表上發(fā)出指定手勢來控制終端從全屏顯示模式切 換至非全屏顯示模式，或者從非全屏顯示模式切換至全屏顯示模式。
[0108] 本發(fā)明實施例中的其它內(nèi)容參考上述實施例中的內(nèi)容，在此不再贅述。
[0109] 圖6示意性示出根據(jù)本發(fā)明示例實施方式的用于終端瀏覽器的網(wǎng)頁中圖表的全屏 顯示系統(tǒng)的框圖。
[0110] 如圖6所示，該系統(tǒng)包括:位置信息獲取模塊610,用于在所述終端瀏覽器中打開網(wǎng) 頁標簽，獲取網(wǎng)頁中圖表元素的位置信息；創(chuàng)建全屏按鈕模塊620,用于根據(jù)所述圖表元素 的位置信息，所述瀏覽器主進程在指定位置處創(chuàng)建并顯示圖表全屏按鈕；第一判斷模塊 630，用于當(dāng)接收到用戶對所述圖表全屏按鈕的觸發(fā)時，判斷所述圖表元素的狀態(tài)是否為全 屏;第一渲染模塊640,用于當(dāng)所述圖表元素處于非全屏狀態(tài)時，將圖表控件從相應(yīng)的一圖 表容器中放入一全屏頁面容器中渲染;第一拉伸模塊650,用于所述全屏頁面容器調(diào)用圖表 重繪尺寸接口，將所述圖表控件的尺寸拉伸至所述全屏頁面容器的大小。
[0111] 在示例性實施例中，還包括：圖表容器創(chuàng)建模塊，用于預(yù)先在網(wǎng)頁中創(chuàng)建所述圖表 容器，其中所述圖表容器用于存放所述圖表控件;全屏頁面容器創(chuàng)建模塊，用于預(yù)先在所述 網(wǎng)頁中創(chuàng)建所述全屏頁面容器，其中所述全屏頁面容器用于存放圖表全屏顯示后的相應(yīng)圖 表控件，所述全屏顯示是指所述圖表元素以該網(wǎng)頁的全屏尺寸顯示。
[0112] 在示例性實施例中，還包括:第二渲染模塊，用于當(dāng)所述圖表元素處于全屏狀態(tài) 時，將所述圖表控件從所述全屏頁面容器中放入相應(yīng)的圖表容器中渲染;恢復(fù)模塊，用于所 述全屏頁面容器調(diào)用所述圖表重繪尺寸接口，將所述圖表控件的尺寸恢復(fù)至所述圖表容器 的大小。
[0113] 在示例性實施例中，還包括:修改狀態(tài)模塊，用于當(dāng)所述圖表元素當(dāng)前的全屏狀態(tài) 參數(shù)的值指示為非全屏狀態(tài)，在執(zhí)行完拉伸操作全屏顯示所述圖表元素時，修改所述全屏 狀態(tài)參數(shù)的值指示為全屏狀態(tài)；當(dāng)所述圖表元素當(dāng)前的全屏狀態(tài)參數(shù)的值指示為全屏狀 態(tài)，在執(zhí)行完恢復(fù)操作非全屏顯示所述圖表元素時，修改所述全屏狀態(tài)參數(shù)的值指示為非 全屏狀態(tài)。
[0114] 在示例性實施例中，還包括:檢測模塊，用于檢測所述瀏覽器的窗口尺寸是否發(fā)生 變化;第二拉伸模塊，用于當(dāng)所述瀏覽器的窗口尺寸發(fā)生變化時，且所述圖表元素處于全屏 狀態(tài)，所述全屏頁面容器調(diào)用所述圖表重繪尺寸接口，將所述圖表控件的尺寸拉伸至所述 瀏覽器的窗口尺寸改變后的所述全屏頁面容器的大小。
[0115] 在示例性實施例中，還包括:第二判斷模塊，用于判斷所述終端是否為移動設(shè)備； 第三判斷模塊，用于當(dāng)所述終端是移動設(shè)備時，判斷所述移動設(shè)備是否處于豎屏狀態(tài);坐標 變換模塊，用于當(dāng)所述移動設(shè)備處于豎屏狀態(tài)時，且所述圖表元素當(dāng)前處于全屏狀態(tài)，對所 述圖表元素執(zhí)行坐標轉(zhuǎn)換；第三拉伸模塊，用于所述全屏頁面容器調(diào)用所述圖表重繪尺寸 接口，將所述圖表控件的尺寸拉伸至所述移動設(shè)備豎屏狀態(tài)下的所述全屏頁面容器的大 小。
[0116] 本發(fā)明實施例中的模塊對應(yīng)上述方法實施例中的內(nèi)容，在此不再詳述。
[0117]本發(fā)明實施例還公開了一種終端設(shè)備，包括:處理器；用于存儲處理器可執(zhí)行指令 的存儲器。
[0118] 其中，所述處理器被配置為:在所述終端設(shè)備的瀏覽器中打開網(wǎng)頁標簽，獲取網(wǎng)頁 中圖表元素的位置信息;根據(jù)所述圖表元素的位置信息，在指定位置處創(chuàng)建并顯示圖表全 屏按鈕；當(dāng)接收到用戶對所述圖表全屏按鈕的觸發(fā)時，判斷所述圖表元素的狀態(tài)是否為全 屏；當(dāng)所述圖表元素處于非全屏狀態(tài)時，將圖表控件從相應(yīng)的一圖表容器中放入一全屏頁 面容器中渲染;所述全屏頁面容器調(diào)用圖表重繪尺寸接口，將所述圖表控件的尺寸拉伸至 所述全屏頁面容器的大小。
[0119] 例如，所述終端設(shè)備可以是智能手機，計算機，數(shù)字廣播終端，消息收發(fā)設(shè)備，游戲 控制臺，平板設(shè)備，醫(yī)療設(shè)備，健身設(shè)備，個人數(shù)字助理等。
[0120] 在示例性實施例，所述處理器還被配置為:判斷所述終端設(shè)備是否為移動設(shè)備；當(dāng) 所述終端設(shè)備是移動設(shè)備時，判斷所述移動設(shè)備是否處于豎屏狀態(tài)；當(dāng)所述移動設(shè)備處于 豎屏狀態(tài)時，且所述圖表元素處于全屏狀態(tài)時，對所述圖表元素的坐標執(zhí)行圖表坐標轉(zhuǎn)換； 所述全屏頁面容器調(diào)用所述圖表重繪尺寸接口，用于將所述圖表控件的尺寸拉伸至所述移 動設(shè)備豎屏狀態(tài)下的所述全屏頁面容器的大小。
[0121] 所述終端設(shè)備可以包括以下一個或多個組件：處理組件，存儲器，電源組件，多媒 體組件，音頻組件，輸入/輸出（I/O)的接口，傳感器組件，以及通信組件。
[0122] 處理組件通?？刂扑鼋K端設(shè)備的整體操作，諸如與顯示，數(shù)據(jù)通信，相機操作和 記錄操作相關(guān)聯(lián)的操作。處理組件可以包括一個或多個處理器來執(zhí)行指令，以完成上述的 方法的全部或部分步驟。此外，處理組件可以包括一個或多個模塊，便于處理組件和其他組 件之間的交互。例如，處理組件可以包括多媒體模塊，以方便多媒體組件和處理組件之間的 交互。
[0123] 存儲器被配置為存儲各種類型的數(shù)據(jù)以支持在設(shè)備的操作。這些數(shù)據(jù)的示例包括 用于在所述終端設(shè)備上操作的任何應(yīng)用程序或方法的指令，消息，圖片，視頻等。存儲器可 以由任何類型的易失性或非易失性存儲設(shè)備或者它們的組合實現(xiàn)，如靜態(tài)隨機存取存儲器 (SRAM)，電可擦除可編程只讀存儲器(EEPR0M)，可擦除可編程只讀存儲器(EPROM)，可編程 只讀存儲器(PR0M)，只讀存儲器(ROM)，磁存儲器，快閃存儲器，磁盤或光盤。
[0124] 電源組件為所述終端設(shè)備的各種組件提供電力。電源組件可以包括電源管理系 統(tǒng)，一個或多個電源，及其他與為所述終端設(shè)備生成、管理和分配電力相關(guān)聯(lián)的組件。
[0125] 多媒體組件包括在所述所述終端設(shè)備和用戶之間的提供一個輸出接口的屏幕。在 一些實施例中，屏幕可以包括液晶顯示器(LCD)和觸摸面板(TP)。如果屏幕包括觸摸面板， 屏幕可以被實現(xiàn)為觸摸屏，以接收來自用戶的輸入信號。觸摸面板包括一個或多個觸摸傳 感器以感測觸摸、滑動和觸摸面板上的手勢。所述觸摸傳感器可以不僅感測觸摸或滑動動 作的邊界，而且還檢測與所述觸摸或滑動操作相關(guān)的持續(xù)時間和壓力。在一些實施例中，多 媒體組件包括一個前置攝像頭和/或后置攝像頭。當(dāng)終端設(shè)備處于操作模式，如拍攝模式或 視頻模式時，前置攝像頭和/或后置攝像頭可以接收外部的多媒體數(shù)據(jù)。每個前置攝像頭和 后置攝像頭可以是一個固定的光學(xué)透鏡系統(tǒng)或具有焦距和光學(xué)變焦能力。
[0126] 音頻組件被配置為輸出和/或輸入音頻信號。例如，音頻組件包括一個麥克風(fēng) (MIC)，當(dāng)所述終端設(shè)備處于操作模式，如呼叫模式、記錄模式和語音識別模式時，麥克風(fēng)被 配置為接收外部音頻信號。所接收的音頻信號可以被進一步存儲在存儲器或經(jīng)由通信組件 發(fā)送。在一些實施例中，音頻組件還包括一個揚聲器，用于輸出音頻信號。
[0127] I/O接口為處理組件和外圍接口模塊之間提供接口，上述外圍接口模塊可以是鍵 盤，點擊輪，按鈕等。這些按鈕可包括但不限于:主頁按鈕、音量按鈕、啟動按鈕和鎖定按鈕。
[0128] 傳感器組件包括一個或多個傳感器，用于為所述終端設(shè)備提供各個方面的狀態(tài)評 估。例如，傳感器組件可以檢測到設(shè)備的打開/關(guān)閉狀態(tài)，組件的相對定位，例如所述組件為 所述終端設(shè)備的顯示器和小鍵盤，傳感器組件還可以檢測所述終端設(shè)備或所述終端設(shè)備一 個組件的位置改變，用戶與所述終端設(shè)備接觸的存在或不存在，所述終端設(shè)備方位或加速/ 減速和所述終端設(shè)備的溫度變化。傳感器組件可以包括接近傳感器，被配置用來在沒有任 何的物理接觸時檢測附近物體的存在。傳感器組件還可以包括光傳感器，如CMOS或CCD圖像 傳感器，用于在成像應(yīng)用中使用。在一些實施例中，該傳感器組件還可以包括加速度傳感 器，陀螺儀傳感器，磁傳感器，壓力傳感器或溫度傳感器。
[0129] 通信組件被配置為便于所述終端設(shè)備和其他設(shè)備之間有線或無線方式的通信。所 述終端設(shè)備可以接入基于通信標準的無線網(wǎng)絡(luò)，如WiFi，2G或3G，或它們的組合。在一個示 例性實施例中，通信組件經(jīng)由廣播信道接收來自外部廣播管理系統(tǒng)的廣播信號或廣播相關(guān) 信息。在一個示例性實施例中，所述通信組件還包括近場通信(NFC)模塊，以促進短程通信。 例如，在NFC模塊可基于射頻識別（RFID)技術(shù)，紅外數(shù)據(jù)協(xié)會（IrDA)技術(shù)，超寬帶(UWB)技 術(shù)，藍牙(BT)技術(shù)和其他技術(shù)來實現(xiàn)。
[0130]此外，根據(jù)本發(fā)明的方法還可以被實現(xiàn)為由CPU執(zhí)行的計算機程序。在該計算機程 序被CPU執(zhí)行時，執(zhí)行本發(fā)明的方法中限定的上述功能。此外，上述方法步驟以及系統(tǒng)單元 也可以利用控制器以及用于存儲使得控制器實現(xiàn)上述步驟或單元功能的計算機程序的計 算機可讀存儲設(shè)備實現(xiàn)。
[0131 ]本發(fā)明實施例中的其它內(nèi)容參考上述實施例中的內(nèi)容，在此不再贅述。
[0132] 圖7A-7C示意性示出現(xiàn)有的用于終端瀏覽器的網(wǎng)頁中圖表的全屏顯示方法的流程 圖。
[0133] 現(xiàn)有的在網(wǎng)頁端實現(xiàn)全屏的技術(shù)方案通常為使用javascript調(diào)用 html5fullScreen API，使得網(wǎng)頁中某個元素（比如圖表控件）以整個終端的尺寸全屏顯示， 可以參考如圖7A中的網(wǎng)頁示例。
[0134] 如圖7A所示，點擊該網(wǎng)頁中的圖片，該圖片會以整個終端的尺寸顯示，效果如圖7B 所示。
[0135] 采用這種方案，用戶在退出全屏前不可以做其它操作（比如在PC端拖動改變?yōu)g覽 器尺寸或最小化瀏覽器;在手機端切換至其它APP等等）；在執(zhí)行全屏及退出全屏?xí)r無法插 入一些動畫效果;在移動設(shè)備豎屏狀態(tài)下不會自適應(yīng)以橫屏全屏顯示，而是圖片上下會出 現(xiàn)黑色部分，如圖7C所示。
[0136] 這種以html5fullScreen API方式實現(xiàn)的全屏對用戶終端的瀏覽器版本及手機版 本有限制，一些稍舊的瀏覽器(比如IE9)或移動設(shè)備（比如部分安卓4.2版手機)無法用這種 方式執(zhí)行全屏。
[0137] 其中，html5fullscreen API即為html5提供的全屏javascript API。
[0138] 本領(lǐng)域技術(shù)人員還將明白的是，結(jié)合這里的公開所描述的各種示例性邏輯塊、單 元、電路和算法步驟可以被實現(xiàn)為電子硬件、計算機軟件或兩者的組合。為了清楚地說明硬 件和軟件的這種可互換性，已經(jīng)就各種示意性組件、方塊、單元、電路和步驟的功能對其進 行了一般性的描述。這種功能是被實現(xiàn)為軟件還是被實現(xiàn)為硬件取決于具體應(yīng)用以及施加 給整個系統(tǒng)的設(shè)計約束。本領(lǐng)域技術(shù)人員可以針對每種具體應(yīng)用以各種方式來實現(xiàn)所述的 功能，但是這種實現(xiàn)決定不應(yīng)被解釋為導(dǎo)致脫離本發(fā)明的范圍。
[0139] 結(jié)合這里的公開所描述的各種示例性邏輯塊、單元和電路可以利用被設(shè)計成用于 執(zhí)行這里所述功能的下列部件來實現(xiàn)或執(zhí)行:通用處理器、數(shù)字信號處理器(DSP)、專用集 成電路(ASIC)、現(xiàn)場可編程門陣列(FPGA)或其它可編程邏輯器件、分立門或晶體管邏輯、分 立的硬件組件或者這些部件的任何組合。通用處理器可以是微處理器，但是可替換地，處理 器可以是任何傳統(tǒng)處理器、控制器、微控制器或狀態(tài)機。處理器也可以被實現(xiàn)為計算設(shè)備的 組合，例如，DSP和微處理器的組合、多個微處理器、一個或多個微處理器結(jié)合DSP核、或任何 其它這種配置。
[0140] 上述所有可選技術(shù)方案，可以采用任意結(jié)合形成本發(fā)明的可選實施例，在此不再 --贅述。
[0141] 圖1、2和3示出根據(jù)本發(fā)明示例實施方式的用于終端瀏覽器的網(wǎng)頁中圖表的全屏 顯示方法的流程圖。該方法可例如利用如圖4或5所示的用于終端瀏覽器的網(wǎng)頁中圖表的全 屏顯示系統(tǒng)實現(xiàn)，但本發(fā)明不限于此。需要注意的是，圖1、2和3僅是根據(jù)本發(fā)明示例實施方 式的方法所包括的處理的示意性說明，而不是限制目的。易于理解，圖1、2和3所示的處理并 不表明或限制這些處理的時間順序。另外，也易于理解，這些處理可以是例如在多個模塊/ 進程/線程中同步或異步執(zhí)行的。
[0142] 本發(fā)明公開的用于終端瀏覽器的網(wǎng)頁中圖表的全屏顯示方法及系統(tǒng)，通過將圖表 控件在圖表容器和全屏頁面容器之間的切換，可以實現(xiàn)圖表以網(wǎng)頁的全屏大小顯示，這樣， 用戶在退出全屏前可做任意操作，如縮放瀏覽器大小、最小化瀏覽器等;在執(zhí)行全屏及退出 全屏?xí)r可以再插入一些特效動畫，如在圖表原始容器內(nèi)以逐漸變大的效果切換至全屏顯 示;該方案可以支持一些較舊的瀏覽器及移動設(shè)備，如IE6-10,安卓4.0-4.2等。此外，通過 針對移動設(shè)備橫豎屏狀態(tài)切換時的坐標轉(zhuǎn)換，使得移動設(shè)備豎屏狀態(tài)下會自動變?yōu)樨Q屏全 屏顯示。使圖表可支持全屏查看，全屏后也可支持取消全屏；圖表全屏查看支持針對移動設(shè) 備優(yōu)化。圖表可全屏查看后，用戶可以更方便地查看自己最關(guān)注的數(shù)據(jù)。用戶在會議等公共 場合顯示圖表數(shù)據(jù)時，可以使觀眾看得更直觀。使用移動設(shè)備的用戶也可以更好地查看圖 表數(shù)據(jù)。
[0143] 本領(lǐng)域技術(shù)人員在考慮說明書及實踐這里公開的發(fā)明后，將容易想到本發(fā)明的其 它實施方案。本申請旨在涵蓋本發(fā)明的任何變型、用途或者適應(yīng)性變化，這些變型、用途或 者適應(yīng)性變化遵循本發(fā)明的一般性原理并包括本發(fā)明未公開的本技術(shù)領(lǐng)域中的公知常識 或慣用技術(shù)手段。說明書和實施例僅被視為示例性的，本發(fā)明的真正范圍和精神由下面的 權(quán)利要求指出。
[0144] 以上具體地示出和描述了本發(fā)明的示例性實施方式。應(yīng)可理解的是，本發(fā)明不限 于這里描述的詳細結(jié)構(gòu)、設(shè)置方式或?qū)崿F(xiàn)方法;相反，本發(fā)明意圖涵蓋包含在所附權(quán)利要求 的精神和范圍內(nèi)的各種修改和等效設(shè)置。
【主權(quán)項】
1. 一種用于終端瀏覽器的網(wǎng)頁中圖表的全屏顯示方法，其特征在于，包括： 在所述終端瀏覽器中打開網(wǎng)頁標簽，獲取網(wǎng)頁中圖表元素的位置信息； 根據(jù)所述圖表元素的位置信息，在指定位置處創(chuàng)建并顯示圖表全屏按鈕； 當(dāng)接收到用戶對所述圖表全屏按鈕的觸發(fā)時，判斷所述圖表元素的狀態(tài)是否為全屏； 當(dāng)所述圖表元素處于非全屏狀態(tài)時，將圖表控件從相應(yīng)的一圖表容器中放入一全屏頁 面容器中渲染； 所述全屏頁面容器調(diào)用圖表重繪尺寸接口，將所述圖表控件的尺寸拉伸至所述全屏頁 面容器的大小。2. 根據(jù)權(quán)利要求1所述的方法，其特征在于，還包括： 預(yù)先在網(wǎng)頁中創(chuàng)建所述圖表容器，其中所述圖表容器用于存放所述圖表控件； 預(yù)先在所述網(wǎng)頁中創(chuàng)建所述全屏頁面容器，其中所述全屏頁面容器用于存放圖表全屏 顯示后的相應(yīng)圖表控件，所述全屏顯示是指所述圖表元素以該網(wǎng)頁的全屏尺寸顯示。3. 根據(jù)權(quán)利要求1所述的方法，其特征在于，還包括： 當(dāng)所述圖表元素處于全屏狀態(tài)時，將所述圖表控件從所述全屏頁面容器中放入相應(yīng)的 圖表容器中植染； 所述全屏頁面容器調(diào)用所述圖表重繪尺寸接口，將所述圖表控件的尺寸恢復(fù)至所述圖 表容器的大小。4. 根據(jù)權(quán)利要求1所述的方法，其特征在于，還包括： 檢測所述瀏覽器的窗口尺寸是否發(fā)生變化； 當(dāng)所述瀏覽器的窗口尺寸發(fā)生變化時，且所述圖表元素處于全屏狀態(tài)，所述全屏頁面 容器調(diào)用所述圖表重繪尺寸接口，將所述圖表控件的尺寸拉伸至所述瀏覽器的窗口尺寸改 變后的所述全屏頁面容器的大小。5. 根據(jù)權(quán)利要求1所述的方法，其特征在于，還包括： 判斷所述終端是否為移動設(shè)備； 當(dāng)所述終端是移動設(shè)備時，判斷所述移動設(shè)備是否處于豎屏狀態(tài)； 當(dāng)所述移動設(shè)備處于豎屏狀態(tài)時，且所述圖表元素處于全屏狀態(tài)時，對所述圖表元素 的坐標執(zhí)行圖表坐標轉(zhuǎn)換； 所述全屏頁面容器調(diào)用所述圖表重繪尺寸接口，用于將所述圖表控件的尺寸拉伸至所 述移動設(shè)備豎屏狀態(tài)下的所述全屏頁面容器的大小。6. 根據(jù)權(quán)利要求3所述的方法，其特征在于，其中所述判斷所述圖表元素的狀態(tài)是否為 全屏或者非全屏包括： 根據(jù)所述全屏頁面容器中的一圖表全屏狀態(tài)參數(shù)的預(yù)設(shè)值來判斷所述圖表元素的狀 態(tài)為全屏狀態(tài)或者非全屏狀態(tài)。7. 根據(jù)權(quán)利要求6所述的方法，其特征在于，還包括： 當(dāng)所述圖表元素當(dāng)前的全屏狀態(tài)參數(shù)的值指示為非全屏狀態(tài)，在執(zhí)行完拉伸操作全屏 顯示所述圖表元素時，修改所述全屏狀態(tài)參數(shù)的值指示為全屏狀態(tài)； 當(dāng)所述圖表元素當(dāng)前的全屏狀態(tài)參數(shù)的值指示為全屏狀態(tài)，在執(zhí)行完恢復(fù)操作非全屏 顯示所述圖表元素時，修改所述全屏狀態(tài)參數(shù)的值指示為非全屏狀態(tài)。8. 根據(jù)權(quán)利要求1所述的方法，其特征在于，其中所述圖表全屏按鈕內(nèi)嵌于所述圖表容 器中，當(dāng)用戶點擊所述圖表全屏按鈕時，切換所述圖表元素以全屏或者非全屏狀態(tài)顯示。9. 根據(jù)權(quán)利要求1所述的方法，其特征在于，其中所述指定位置為： 所述圖表元素區(qū)域內(nèi)任一位置;或者 為所述圖表元素邊緣處一位置。10. -種用于終端瀏覽器的網(wǎng)頁中圖表的全屏顯示系統(tǒng)，其特征在于，包括： 位置信息獲取模塊，用于在所述終端瀏覽器中打開網(wǎng)頁標簽，獲取網(wǎng)頁中圖表元素的 位置信息； 創(chuàng)建全屏按鈕模塊，用于根據(jù)所述圖表元素的位置信息，所述瀏覽器主進程在指定位 置處創(chuàng)建并顯示圖表全屏按鈕； 第一判斷模塊，用于當(dāng)接收到用戶對所述圖表全屏按鈕的觸發(fā)時，判斷所述圖表元素 的狀態(tài)是否為全屏； 第一渲染模塊，用于當(dāng)所述圖表元素處于非全屏狀態(tài)時，將圖表控件從相應(yīng)的一圖表 容器中放入一全屏頁面容器中渲染； 第一拉伸模塊，用于所述全屏頁面容器調(diào)用圖表重繪尺寸接口，將所述圖表控件的尺 寸拉伸至所述全屏頁面容器的大小。11. 根據(jù)權(quán)利要求10所述的系統(tǒng)，其特征在于，還包括： 圖表容器創(chuàng)建模塊，用于預(yù)先在網(wǎng)頁中創(chuàng)建所述圖表容器，其中所述圖表容器用于存 放所述圖表控件； 全屏頁面容器創(chuàng)建模塊，用于預(yù)先在所述網(wǎng)頁中創(chuàng)建所述全屏頁面容器，其中所述全 屏頁面容器用于存放圖表全屏顯示后的相應(yīng)圖表控件，所述全屏顯示是指所述圖表元素以 該網(wǎng)頁的全屏尺寸顯示。12. 根據(jù)權(quán)利要求10所述的系統(tǒng)，其特征在于，還包括： 第二渲染模塊，用于當(dāng)所述圖表元素處于全屏狀態(tài)時，將所述圖表控件從所述全屏頁 面容器中放入相應(yīng)的圖表容器中渲染； 恢復(fù)模塊，用于所述全屏頁面容器調(diào)用所述圖表重繪尺寸接口，將所述圖表控件的尺 寸恢復(fù)至所述圖表容器的大小。13. 根據(jù)權(quán)利要求12所述的系統(tǒng)，其特征在于，還包括： 修改狀態(tài)模塊，用于當(dāng)所述圖表元素當(dāng)前的全屏狀態(tài)參數(shù)的值指示為非全屏狀態(tài)，在 執(zhí)行完拉伸操作全屏顯示所述圖表元素時，修改所述全屏狀態(tài)參數(shù)的值指示為全屏狀態(tài)； 當(dāng)所述圖表元素當(dāng)前的全屏狀態(tài)參數(shù)的值指示為全屏狀態(tài)，在執(zhí)行完恢復(fù)操作非全屏顯示 所述圖表元素時，修改所述全屏狀態(tài)參數(shù)的值指示為非全屏狀態(tài)。14. 根據(jù)權(quán)利要求10所述的系統(tǒng)，其特征在于，還包括： 檢測模塊，用于檢測所述瀏覽器的窗口尺寸是否發(fā)生變化； 第二拉伸模塊，用于當(dāng)所述瀏覽器的窗口尺寸發(fā)生變化時，且所述圖表元素處于全屏 狀態(tài)，所述全屏頁面容器調(diào)用所述圖表重繪尺寸接口，將所述圖表控件的尺寸拉伸至所述 瀏覽器的窗口尺寸改變后的所述全屏頁面容器的大小。15. 根據(jù)權(quán)利要求10所述的系統(tǒng)，其特征在于，還包括： 第二判斷模塊，用于判斷所述終端是否為移動設(shè)備； 第三判斷模塊，用于當(dāng)所述終端是移動設(shè)備時，判斷所述移動設(shè)備是否處于豎屏狀態(tài)； 坐標變換模塊，用于當(dāng)所述移動設(shè)備處于豎屏狀態(tài)時，且所述圖表元素當(dāng)前處于全屏 狀態(tài)，對所述圖表元素執(zhí)行坐標轉(zhuǎn)換； 第三拉伸模塊，用于所述全屏頁面容器調(diào)用所述圖表重繪尺寸接口，將所述圖表控件 的尺寸拉伸至所述移動設(shè)備豎屏狀態(tài)下的所述全屏頁面容器的大小。16. -種終端設(shè)備，其特征在于，包括： 處理器； 用于存儲處理器可執(zhí)行指令的存儲器； 其中，所述處理器被配置為： 在所述終端設(shè)備的瀏覽器中打開網(wǎng)頁標簽，獲取網(wǎng)頁中圖表元素的位置信息； 根據(jù)所述圖表元素的位置信息，在指定位置處創(chuàng)建并顯示圖表全屏按鈕； 當(dāng)接收到用戶對所述圖表全屏按鈕的觸發(fā)時，判斷所述圖表元素的狀態(tài)是否為全屏； 當(dāng)所述圖表元素處于非全屏狀態(tài)時，將圖表控件從相應(yīng)的一圖表容器中放入一全屏頁 面容器中渲染； 所述全屏頁面容器調(diào)用圖表重繪尺寸接口，將所述圖表控件的尺寸拉伸至所述全屏頁 面容器的大小。17. 根據(jù)權(quán)利要求16所述的終端設(shè)備，其特征在于，其中，所述處理器還被配置為： 判斷所述終端設(shè)備是否為移動設(shè)備； 當(dāng)所述終端設(shè)備是移動設(shè)備時，判斷所述移動設(shè)備是否處于豎屏狀態(tài)； 當(dāng)所述移動設(shè)備處于豎屏狀態(tài)時，且所述圖表元素處于全屏狀態(tài)時，對所述圖表元素 的坐標執(zhí)行圖表坐標轉(zhuǎn)換； 所述全屏頁面容器調(diào)用所述圖表重繪尺寸接口，用于將所述圖表控件的尺寸拉伸至所 述移動設(shè)備豎屏狀態(tài)下的所述全屏頁面容器的大小。
【文檔編號】G06F17/30GK105893602SQ201610252215
【公開日】2016年8月24日
【申請日】2016年4月21日
【發(fā)明人】周濤
【申請人】北京京東尚科信息技術(shù)有限公司, 北京京東世紀貿(mào)易有限公司