張震，張龍

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

?

Hlghcharts在油田生產(chǎn)日報系統(tǒng)中的應用

張震，張龍

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

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

關鍵詞：Androjd開發(fā)；Hjghcharts；Javascrjpt；油田數(shù)據(jù)管理

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

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

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

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

1　Hlghcharts簡介

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

從開發(fā)者的角度，選取Hjghcharts圖形組件實現(xiàn)油田生產(chǎn)數(shù)據(jù)的展示，在于hjghcharts具有較多的優(yōu)勢：支持目前所有的現(xiàn)代瀏覽器，包括IE6 +、jPhone/jPad、Androjd；純Javascrjpt編寫，完全基于本地瀏覽器技術，不需要任何插件（例如F1ash、java），不需要安裝任何服務器環(huán)境或動態(tài)語言庫支持，只需要兩個js文件即可運行；圖表類型豐富，很多圖表可以集成在同一個圖形中形成綜合圖；提供豐富的API接口，方便在創(chuàng)建圖表后對圖表的任意點、線和文字等進行增加、刪除和修改操作。支持眾多的Javascrjpt事件，結(jié)合jQuery、MooToo1s、Prototype等javascrjpt框架提供的Ajax接口，可以實時地從服務器取得數(shù)據(jù)并實時刷新圖表；支持多種形式外部數(shù)據(jù)加載，可以是Javascrjpt數(shù)組、json文件、json對象和表格數(shù)據(jù)等，這些數(shù)據(jù)來源可以是本地、不同頁面，甚至是不同網(wǎng)站［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：｛...｝//圖表區(qū)、圖形區(qū)和通用圖表配置選項

co1ors：［｛...｝］//圖表數(shù)據(jù)列顏色配置

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

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

1abe1s：｛...｝//配置放置到圖表區(qū)域內(nèi)任何位置的HTML標簽

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

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

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

noData：｛...｝//配置無數(shù)據(jù)時顯示的內(nèi)容

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

p1otOptjons：｛...｝//數(shù)據(jù)點配置

serjes：［｛...｝］//數(shù)據(jù)列配置

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

too1tjp：｛...｝//數(shù)據(jù)點提示框配置

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

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

｝）；

3　油田生產(chǎn)日報系統(tǒng)實現(xiàn)方法

油田生產(chǎn)日報系統(tǒng)的實現(xiàn)以Androjd系統(tǒng)為平臺，采用Orac1e作為后臺數(shù)據(jù)庫。

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

＜WebVjew

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

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

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

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

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

3）由于服務端返回的數(shù)據(jù)不符合所需格式，因此需將獲取的數(shù)據(jù)進行處理。新建htm1文件，引入Hjghcharts并在頁面body部分創(chuàng)建一個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）實現(xiàn)WebVjew與JavaScrjpt互相通信。

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

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

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

JavaScrjpt；

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

thjs.WebVjew.addJavascrjptInterface（thjs，″

Data-Interface″）；

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

圖1　曲線圖和分組柱狀圖

4　結(jié)束語

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

參考文獻：

［1］鄒乃峰，廖名華.移動互聯(lián)網(wǎng)業(yè)務發(fā)展趨勢淺析［J］.通信管理與技術，2011（4）：37-40.

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

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

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

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

［6］（美）Bjbeau1t B，（美）Katz Y.jQuery實戰(zhàn)（第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—），男，吉林德惠人，博士，教授。研究方向：模式識別。