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

張震，張龍

（東北石油大學(xué)黑龍江大慶163318）

?

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

張震，張龍

（東北石油大學(xué)黑龍江大慶163318）

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

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

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

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

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

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

1　Hlghcharts簡介

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

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

2　Hlghcharts配置

Hjghcharts運(yùn)行需要兩個(gè)js文件，Hjghcharts.js及jQuery、MooToo1s、Prototype、Hjghcharts Standa1one Framework中的一個(gè)框架文件。在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＞

主要配置選項(xiàng)

$（″#contajner″）.hjghcharts（｛

chart：｛...｝//圖表區(qū)、圖形區(qū)和通用圖表配置選項(xiàng)

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

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

exportjng：｛...｝//導(dǎo)出功能配置

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

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

1oadjng：｛...｝//加載選項(xiàng)

navjgatjon：｛...｝//導(dǎo)出模塊按鈕和菜單配置選項(xiàng)組

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

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

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

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

tjt1e：｛...｝//配置標(biāo)題和副標(biāo)題

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

xAxjs：｛...｝//X軸選項(xiàng)配置

yAxjs：｛...｝//Y軸選項(xiàng)配置

｝）；

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

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

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

＜WebVjew

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

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

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

2）根據(jù)用戶所需數(shù)據(jù)類型，以相應(yīng)的數(shù)據(jù)字段為條件，向部署在服務(wù)器端的Web應(yīng)用程序發(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）由于服務(wù)端返回的數(shù)據(jù)不符合所需格式，因此需將獲取的數(shù)據(jù)進(jìn)行處理。新建htm1文件，引入Hjghcharts并在頁面body部分創(chuàng)建一個(gè)djv，作為放置Hjghcharts圖表的容器，然后編寫Hjghcharts必需的代碼用＜scrjpt＞＜/scrjpt＞包裹，配置圖表標(biāo)題，坐標(biāo)等需要使用的屬性。下面是＜scrjpt＞＜/scrjpt＞部分的代碼：

$（functjon（）｛

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

chart：｛

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

showAxes：true，//顯示坐標(biāo)軸

anjmatjon：true //顯示動畫效果

｝，

tjt1e：｛//定義圖表標(biāo)題屬性

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版權(quán)信息

｝，

yAxjs：｛1jneWjdth：1，

1jneCo1or：″#000000″，

tjt1e：｛

enab1ed：fa1se //不顯示Y軸方向標(biāo)題

｝

｝，

exportjng：｛

enab1ed：fa1se//不提供打印導(dǎo)出功能

｝，

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）實(shí)現(xiàn)WebVjew與JavaScrjpt互相通信。

首先，AndrojdManjfest.xm1中必須使用Internet權(quán)限；

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

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

JavaScrjpt；

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

thjs.WebVjew.addJavascrjptInterface（thjs，″

Data-Interface″）；

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

圖1　曲線圖和分組柱狀圖

4　結(jié)束語

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

參考文獻(xiàn)：

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

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

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

［4］肖紅，郭歌.多感官人機(jī)交互界面的視覺設(shè)計(jì)原則［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實(shí)戰(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

文獻(xiàn)標(biāo)識碼：A

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

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

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