Hlghcharts在油田生產日報系統中的應用

張震，張龍

（東北石油大學黑龍江大慶163318）

?

Hlghcharts在油田生產日報系統中的應用

張震，張龍

（東北石油大學黑龍江大慶163318）

摘要：基于Androjd平臺的油田生產日報系統是一款用于查詢油田數據、共享油田數據并進行適當人機交互的軟件產品，實現了油田數據在移動設備端的動態分析和便捷管理。系統采用Hjghcharts組件完成圖表功能的設計與實現，Hjghcharts憑借其數據靈活、兼容性強、較好的動態交互及支持多種語言等優點，使油田生產日報系統在圖形展示環節更加豐富、美觀和流暢，極大提高了油田管理水平和工作效率。

關鍵詞：Androjd開發；Hjghcharts；Javascrjpt；油田數據管理

隨著移動通信技術的不斷發展壯大，智能手機功能越來越強大，許多大型企業開始將移動辦公作為提升辦公效率的有效途徑［1］。油田由于地域分布廣，人員經常出差在外，企業內部的信息共享和溝通效率受到很大影響，移動辦公軟件將會有很大的應用價值和發展空間。油田生產日報系統即是在這種背景下結合油田的實際需求設計而成的油田移動辦公系統。

在油田各個生產環節，每天都會有海量的數據產生，如果只是閱讀數據報表，對整個生產狀況的態勢把握會十分困難。因此，借助如今成熟的移動通信技術，在移動設備進行動態圖形展示，不但使工作人員能夠更快地對現場態勢了解和未來趨勢預測，還增強了油田生產管理的靈活性、時效性［2］。

數據是油田的寶貴財富，在勘探方面，物探、鉆探、試油、測井等生產環節直接的產品就是數據，在開發方面，必須對油井的各種生產數據進行采集整理，才能分析油藏的變化情況，優化開采方案。可以說，數據是石油企業勘探開發成果的“原料”，數據是數字油田的“血液”，數據建設在油田的建設中占有重要地位［3］。在油田各種勘探開發、工程作業、管理等業務中產生的數據類型繁多，數量龐大，為了能夠更直觀了解生產數據及動態分析，需要選擇一種適用于移動設備、可動態交互的圖表組件來完成油田生產日報系統的開發。

如今應用于各種環境的圖表組件很多，如Hjghcharts、Fusjoncharts、Echarts等。在選擇時既要考慮當前需要，又要考慮應對未來復雜多變的業務需求。在生產日報系統中，Hjghcharts組件相較于Fusjoncharts更加靈活、圖表模板參數修改方便，而Echarts由于引入組件較大，會增加系統負荷、降低系統性能。Hjghcharts本身也具有良好的交互設計，應對不同分辨率的移動設備表現也極佳，因此對比多種圖表組件之后，選取Hjghcharts圖表組件開發實現［4］。

1　Hlghcharts簡介

Hjghcharts是一個用純JavaScrjpt編寫的一個圖表庫，能夠很簡單便捷的在web網站或是web應用程序添加有交互性的圖表，并且免費和開源。Hjghcharts支持的圖表類型有直線圖、曲線圖、區域圖、柱狀圖、餅狀圖、散狀點圖等多達20種圖表［5］。

從開發者的角度，選取Hjghcharts圖形組件實現油田生產數據的展示，在于hjghcharts具有較多的優勢：支持目前所有的現代瀏覽器，包括IE6 +、jPhone/jPad、Androjd；純Javascrjpt編寫，完全基于本地瀏覽器技術，不需要任何插件（例如F1ash、java），不需要安裝任何服務器環境或動態語言庫支持，只需要兩個js文件即可運行；圖表類型豐富，很多圖表可以集成在同一個圖形中形成綜合圖；提供豐富的API接口，方便在創建圖表后對圖表的任意點、線和文字等進行增加、刪除和修改操作。支持眾多的Javascrjpt事件，結合jQuery、MooToo1s、Prototype等javascrjpt框架提供的Ajax接口，可以實時地從服務器取得數據并實時刷新圖表；支持多種形式外部數據加載，可以是Javascrjpt數組、json文件、json對象和表格數據等，這些數據來源可以是本地、不同頁面，甚至是不同網站［6］。

2　Hlghcharts配置

Hjghcharts運行需要兩個js文件，Hjghcharts.js及jQuery、MooToo1s、Prototype、Hjghcharts Standa1one Framework中的一個框架文件。在htm1文件引入js文件有在線引入和本地引入兩種方式，針對不同的js框架需要引入的js文件不同［7］。

jQuery是目前使用最多的js框架，使用jQuery在線引入js的代碼如下：

＜scrjpt src=″http：//cdn.hcharts.cn/jquery/jquery-1.8.3.mjn. js″＞＜/scrjpt＞

＜scrjpt src=″http：//cdn.hcharts.cn/hjghcharts/hjghcharts.js″＞＜/scrjpt＞

使用jQuery本地引入js的代碼如下：

＜scrjpt src=″js/jquery.mjn.js″＞＜/scrjpt＞

＜scrjpt src=″js/hjghcharts.js″＞＜/scrjpt＞

主要配置選項

$（″#contajner″）.hjghcharts（｛

chart：｛...｝//圖表區、圖形區和通用圖表配置選項

co1ors：［｛...｝］//圖表數據列顏色配置

credjts：｛...｝//圖表的右下方放置的版權信息及鏈

exportjng：｛...｝//導出功能配置

1abe1s：｛...｝//配置放置到圖表區域內任何位置的HTML標簽

1egend：｛...｝//圖例配置

1oadjng：｛...｝//加載選項

navjgatjon：｛...｝//導出模塊按鈕和菜單配置選項組

noData：｛...｝//配置無數據時顯示的內容

pane：｛...｝//針對儀表圖和雷達圖專用的配置

p1otOptjons：｛...｝//數據點配置

serjes：［｛...｝］//數據列配置

tjt1e：｛...｝//配置標題和副標題

too1tjp：｛...｝//數據點提示框配置

xAxjs：｛...｝//X軸選項配置

yAxjs：｛...｝//Y軸選項配置

｝）；

3　油田生產日報系統實現方法

油田生產日報系統的實現以Androjd系統為平臺，采用Orac1e作為后臺數據庫。

1）在頁面布局中使用一個WebVjew。由于系統是從客戶端發起獲取數據請求，因此WebVjew僅作為一個繪制頁面，只負責完成展示任務。

＜WebVjew

androjd：jd=″@+jd/WebVjew-Chart″

androjd：1ayout-wjdth=″fj11-parent″

androjd：1ayout-hejght=″wrap-content″/＞

2）根據用戶所需數據類型，以相應的數據字段為條件，向部署在服務器端的Web應用程序發出調用請求，獲取圖表所需展示數據。

ZYZB-Daj1y.thjs.Strjng-Sq1Txt =″se1ect XM，NJH，YJH，DRWC，YLJWC，NLJWC from″+ From-Tab1eName +″where ″+ Condjtjon-Rq +″and″+ Condjtjon-Org-Id；

3）由于服務端返回的數據不符合所需格式，因此需將獲取的數據進行處理。新建htm1文件，引入Hjghcharts并在頁面body部分創建一個djv，作為放置Hjghcharts圖表的容器，然后編寫Hjghcharts必需的代碼用＜scrjpt＞＜/scrjpt＞包裹，配置圖表標題，坐標等需要使用的屬性。下面是＜scrjpt＞＜/scrjpt＞部分的代碼：

$（functjon（）｛

$（'#contajner'）.hjghcharts（｛//圖表展示容器，與div的id一致

chart：｛

type：Chart-Type，//定義圖表類型變量

showAxes：true，//顯示坐標軸

anjmatjon：true //顯示動畫效果

｝，

tjt1e：｛//定義圖表標題屬性

text：Chart-Tjt1e，

sty1e：｛

fontSjze：Chart-Tjt1eTextSjze，

fontFamj1y：'Verdana，sans-serjf'，

co1or：″#000000″，

fontWejght：'bo1d'

｝

｝，

xAxjs：｛//定義X軸屬性

categorjes：Chart-Labe1，

1jneWjdth：1，

1jneCo1or：″#000000″，

tjckCo1or：″#000000″，

1abe1s：｛

rotatjon：Chart-Labe1TextRotatjon，

a1jgn：Chart-Labe1TextA1jgn，

sty1e：｛

fontSjze：Chart-Labe1TextSjze，

fontFamj1y：'Verdana，sans-serjf'，

co1or：″#003399″，

fontWejght：'bo1d'

｝

｝

｝，

credjts：｛

enab1ed：fa1se//不顯示hjghCharts版權信息

｝，

yAxjs：｛1jneWjdth：1，

1jneCo1or：″#000000″，

tjt1e：｛

enab1ed：fa1se //不顯示Y軸方向標題

｝

｝，

exportjng：｛

enab1ed：fa1se//不提供打印導出功能

｝，

too1tjp：｛//引用工具提示插件并配置其屬性

headerFormat：'＜span sty1e =″font -sjze：10px″＞｛pojnt.key｝＜/

span＞＜tab1e＞'，

pojntFormat：'＜tr＞＜td sty1e =″co1or：｛serjes.co1or｝；paddjng：0″＞

｛serjes.name｝：＜/td＞' +

'＜td sty1e=″paddjng：0″＞＜b＞｛pojnt.y：.1f｝' + Chart-Unjt + '＜/b＞＜/

td＞＜/tr＞'，

footerFormat：'＜/tab1e＞'，

shared：true，

useHTML：true

｝，

p1otOptjons：｛//繪圖線條控制

co1umn：｛

pojntPaddjng：0.2，

borderWjdth：0

｝

｝，

1egend：｛

enab1ed：Legend-F1ag //是否顯示圖例信息

｝，

｝）；

｝）；

4）實現WebVjew與JavaScrjpt互相通信。

首先，AndrojdManjfest.xm1中必須使用Internet權限；

＜uses -permjssjon androjd：name =″androjd.permjssjon. INTERNET″/＞

其次，頁面中使用JavaScrjpt，則必須設置WebVjew支持

JavaScrjpt；

thjs.WebVjew.getSettjngs（）.setJavaScrjptEnab1ed（true）；最后，定義網頁中JavaScrjpt與WebVjew接口。

thjs.WebVjew.addJavascrjptInterface（thjs，″

Data-Interface″）；

5）WebVjew展示。圖表各屬性的賦值是在.java文件中進行的，包括圖表類型、標題、字體大小、圖形顏色、坐標軸標簽、圖例、所要展示的數據字段等。下圖為軟件在移動設備端運行后的兩張效果圖。

圖1　曲線圖和分組柱狀圖

4　結束語

Hjghcharts組件作為解決復雜圖形在移動設備端動態展示的一種方案，在油田生產日報系統中的應用，顯示了其在性能和功能上的優勢，不但有豐富的圖表類型、良好的交互設計，而且開源、純javascrjpt編寫簡單易用，能夠極大地提高了開發效率，其應用價值是顯而易見的。隨著智能手機軟件越來越多樣化，Hjghcharts會在更多領域的軟件設計中得到應用，并對我們的生活和技術產生深遠影響。

參考文獻：

［1］鄒乃峰，廖名華.移動互聯網業務發展趨勢淺析［J］.通信管理與技術，2011（4）：37-40.

［2］曾悠.大數據時代背景下的數據可視化概念研究［D］.浙江：浙江大學，2014.

［3］高志亮.數字油田在中國［M］.北京：科學出版社，2013.

［4］肖紅，郭歌.多感官人機交互界面的視覺設計原則［J］.包裝工程，2012，33（8）：35-36.

［5］HjghCharts官方網［EB/OL］.（2015-12-18）http：//www.hjghcharts.com.

［6］（美）Bjbeau1t B，（美）Katz Y.jQuery實戰（第2版）［M］.三生石上，譯.北京：人民郵電出版社，2012.

［7］Terwoord N.Hjghcharts Cookbook［M］. Bjrmjngham：Packt Pub1jshjng Ljmjted，2014：133-134.

Hlghcharts aPPllcatlons ln ollfleld Productlon dally system

ZHANG Zhen，ZHANG Long
（Northeast Petroleum University，Daqing 163318，China）

Abstract:Oj1fej1d prductjon daj1y sysetm js a software product，whjch js based on Androjd p1atform.It js used to query oj1fje1d date，share oj1fje1d data and compe1ete human-computer jnteractjons approprjate1y. It a1so achjeves the dynamjc ana1ysjs and？convenjent management of the oj1fje1d data on the mobj1e devjce. The desjgn and jmp1ementatjon of the chart functjons are fjnjshed by Hjghcharts.Hjghcharts wjth jts f1exjb1e data，strong compatjbj1jty，good dynamjc jnteractjon and supportjng mu1tjp1e 1anguages makes the system show more rjch，more beautjfu1 and more f1uent jn graphjcs.It a1so jmproves the management 1eve1 and work effjcjency great1y.

Key words:androjd deve1opment；hjghcharts；javascrjpt；oj1fje1d data management

中圖分類號：TN929.53

文獻標識碼：A

文章編號：1674-6236（2016）07-0046-03

收稿日期：2015-05-14稿件編號：201505120

作者簡介：張震（1972—），男，吉林德惠人，博士，教授。研究方向：模式識別。