基于ECharts Library和File API的本地数据绘图技术

DOI： 10.13669/j.cnki.33-1276/z.2016.083

基于ECharts Library和File API的本地数据

绘图技术

庞聪，杜瑞林，王磊

(中国地震局地震研究所，武汉430071)

[摘要]为解决web绘图每次更改图形绘制均需修改代码，且反复修改易造成代码编写错误的弊端，提出

一种针对本地TXT文忤，利用ECharts Library和File API简化数据处理程序的绘图技术。该绘图技术可以直接 对TXT文件进行修改，简单方便，易于操作。

[关键词]本地数描；绘图技术；ECharts Library; File API[中图分类号]TP393.09

[文献标识码]A

[文章编号]1671-4326(2016)04-0053-03

Local Data Drawing Technique Based on ECharts Library

and File API

PANG Cong, DU Ruilin, WANG Lei

(Institute of Seismology, CEA, Wuhan, 430071, China)

Abstract: As it is known, every drawing modification in WEB drawing requires code revising and repeated

modifications, which tends to bring about errors in code writing. In order to solve this disadvantage, a drawing technique, which uses ECharts Library and JavaScript File API to simplify data processing programs, is put forward just for local TXT files and it can revise TXT files directly. This drawing technique is simple and easily operated.

Key words: Local data; Drawing technique; ECharts Library; File API

fKECharts绘罔库的基础上，如果要更改罔形绘

〇引言

Web绘图区别于传统的本地绘图，具轻载体、跨 f台、M示形式多样等特点。不论是I:程科研方面的 MATLAB和AutoCAD，还是UI设计领域的Photoshop和 CorelDRAW,它们在操作系统h的运行都依靠专业软件 环境的支持，且安装、升级都需要耗费大童的时间和 精力。依靠Web技术发展起来的Canvas继承J* HTML脚 本语H的兼容怍好、易操作等优点，但代码-经发布 就几乎尤法修改，尽管可以通过设置初始数据为随机 类型，从而保M图形具有一定的动态性，仍远远无法 满足专业用广对绘图的易操作、可维护等需求1|]。

制所需数据，必须重新修改原始代码和数据。对于专

业技术人M而H，许多工程数据都以TXT的形式保 存，如果运用这®数据绘图就存在毎次均需修改代 码、反复修改易造成代码编写错误的弊端。利ffl优化 后的File API对本地数据进行处埋，实现本地数据的 可视化；直接对TXT文件进行修改，简中.方便，易于 操作。

1常见的Web绘图技术

Canvas作为IITML5新川现的特忭之

LL被用来

1.1 Canvas

[收稿日期]2〇〗6-〇8-〇2

[作者简介]庞聪（ 1 992 —)，男，湖北襄m人，屮国地震局地震研究所硕十研究小；

杜瑞林（1970 —)，男，陕西宝鸡人，屮国地震局地震研究所研究员，硕十小5师； 千磊（ 1990 —），男，安徽黄山人，屮围地震局地震研究所硕十研究屮，

54溫州职收技术学院学报2016年12月

绘制各种阁形，包括阁标、折线阌、渐变阌等。Canvas

他H TML标签一样具有ft d的方法和K性。如绘制 •个图形操作如丨、':利ffl canvas . getContext ()狄取绘 W功能对象，通过 context. f illStyle () *context. s tr okeSty 1 e ()进行填充样式和边框样式的具体设置，然后调用context, fill和context, stroke方法进行具 体的填充和边框设置同时，Canvas支持坐标点的 绘制。如(：〇的6)(1;.1'丨111<6(：1;(2，14,60,40)，即表示平_标 点（2,14)为起始端点进行绘制长度、宽度分别为6 0 和40的填充矩形。1.2 C#

C#通过.net的chart控件实现对曲线图的绘制和 编写，并调用SW.WriteLine语句把C#内容写入网页。 如绘制时首先调用 System.Windows.Forms.DataVi sual- ization.Charting,通过DataBindXY(listX,listY)方 法绘制x-y坐标点[3]。

2 ECharts绘图原理

ECharts library 是一个依赖于 Canvas 类库 ZRender、 完全采JavaScr i pt编写的数据可视化图表1 i brary。 ECharts的主要优势如K: •是图衣类ECharts支持几乎所有主流阁表类型，包括treemap、K线阌、折线 图、柱状图及地图、热力图等，同时也支持不同炎型图

行的混合绘制。二是兼容性。ECharts +仅兼#大多数 主流浏览器（IE11，Firef ox，chrome等)，也支持移动端 的流畅运行.完整地体现交互性、可定制性、直观性等 丰富特性。三是坐标系。最新的ECharts 3增加f “坐 标系”这一维度埋念，同时支持地埋坐标系（geo)、极 AK标系（polar )和直免來标系（cates i an )。四是交互 式数振操作。ECharts 提供的 legend，visualMap， dataZoom，tooltip等组件，借助漫游、选取等W表工 具实现数裾筛取、图形缩放等功能。五是动态数据。 ECharts根梠fflP输入数椐的变化而调用timeline组 件驱动阁表产十.相应改变，如数值人小的可视化变化 和图形位置随数值改变而发生移动。

引入 ECharts

在使用相关方法和属忭前，必须在< s c r i p t >标签内部 声明ECharts文件的引入，标签则放置在< /head>fe签内部，作为提前卢明而应ffi;新-代ECharts 不强制代码内置AMD加载器的U入方式。ECharts文件<

/head>

2.2 环境初始化

在编W绘制图衣代码前.必须对DOM进行设W，即 是阁表在屏幕h的覆孟范围。在HTML5中，布Mi设置

依靠DIV和CSS技术，即在标签内部定义 id属性，作为绘图区域的索引0标，同时设置绘图区域 的宽（width)和高（height)。其具体代码如|、':

var myChart^echarts.init(document.getElement- Byld(\"main\"));2.3 绘制图表

•个完整的图形主要包括标题、副标题、提示信 息、阁例、横轴、纵轴、绘制类型等，分别通过定义

text,subtext.tooltip,legend,xAxis,yAxis,type M

设W,其屮subtext..tooltip +是必需的，最后调用 myChart • setoption (option)执行绘丨冬丨操作。其具体代 码如下：

var option={

title : {text: ”某中-位公务员学位分布

图，’},

tooltip: {}，

legend: {data:[\"学位水平\"]}， xAxi s : {data:丨”博上 '\"全日制硕上'

’’非全日制硕士 \". ”木科 \"专科\"，其它\"j }, yAxis： {},

series： \\{

name ：\" SS \". type：\"bar\

data: [5,20,36，10，10,20l}l};

myChart.setoption (option);

3使用ECharts和File API绘图

3.1 File API

File API是JavaScript中的一个文件接口技术，

它能实现对义本数据的读取，以r e s u 11数组的形式保 存I、■来。result数组的内容为单字节，需要利ffl循环 迭代转换为有效数俏类数据数组[4_fi]。

部分关键代码如下：

var file^document.getElementByld(\"file\"). files [0];

var readShuJu=new FileReader();readShuJu. readAsText(file);

readShuJu.onload=function (data) {var shuJu=new Array ();

shuJu^this.result:}

代码执行流程为：通过调用DOC文柯的getElemen- tByTd方法获取文件Fi le的创建新的Fi leReader () 文件谈取对象.将此对象保存为Text文本形式（read­AsText )， 最后的文本结果保存在 result 数组中[f] 。

第16卷第4期 庞聪，杜瑞林，上磊：基于KCharts Library和Fi le AH的本地数据绘罔技术55

3.2 绘图实现代码

利出Ed Up 1 u s开发T.具编写代码，所有的关键代 码都在option内部执行，绘制数据时的X坐杯轴山 1)〇1111(^^〇30划分为1〇〇〇〇〇份，数据精度较品，丫轴 以4 X轴数值对应的“原始数据”序列肀标表示。利 ffl F i 1 e API谈取的木地数裾保存在s h UJ U 2数组屮，每 一个数据都以s h u J u 2 [ i ]的形式调取使用。其具体代 码如下：

var dom^document.getElementByld(\"container\"):

var myChart=echarts.init(dom);var app={};opti on=nul1;option={ \"shadow\

legend： {data： l\"X/cm\"J},

grid： {left： \"3%\right： \"4S\"bottom： \"3%\containLabel：true},

xAxis：{type：\"value\".boundaryGap：[〇,0.00001J},yAxis：{type：\"category\

data： f\"yol\", \"yo2\ \"yo7\

series： fshuJu2[〇l ,shuJu2[ll ,shuJu2[2l ,shuJu2 l3j ,shuJu2[4j ,shuJu2[5j ,shuJu2[6j ,shuJu2[7j , shuJu2[8]，shuJu2[9]];3.3 结果

10 组原始数振（0.01、0.25、0.35、0.25、0.21、 0.98、0.67、0.26、0.45、0.87)保存在TXT 文件中D 源义件在Firefox浏览器中运行，通过读取TXT文件 绘制柱状图（见图1 )。

由丨冬丨1可知，1 0组数据以柱状阁的形式显不在横 轴的0 -1区间内，纵轴从下时上分別表示的是TXT文 件的第•个数据到最后-个数椐。当鼠标浮在数条 h时，会显不本条数据数俏人小：每一行数据条都被 均分成1 00 000份，从中很容易看出各个数据条的大小 情况[81。

...tooltip： {trigger：\"axis\axisPointer：{type：

TXT文件绘囝 _Yo数值

4结束语

本文利用File API技术实现对本地TXT文件数据

的获取，将读取到的原始数据以数组的形式传递给

E C h a r t s绘图数据接n，按照选定的绘制类邓和坐标 系绘制H标阌形。这种本地数据绘阁技术仍存在Mi限 性：一是图形娄型支持不够。对丁一维或二维数掂类 邓的饼状图、柱状图、散点图、折线图等能得到很好 的支持，对于要求二维及以h的阌形类型尤法自行读 取多个本地义件获取多维数据。二是本地数据读取过 慢。工程屮需要处理的数掘以千万计，大量木地数抿 的读取处埋对计算机捉出了更品要求。一般而言，服 务器端存储大M数裾简单可靠，不盂要过分^拊客户 端的内存，但对于-般少量的测试数据，木地数椐绘 阁技术能得到支持。下一步将重点研究EChart对不同 数据文件类型的支持状况，即是否支持File APT读取 这些文件几获取文件内冇效数据，从而进行图形绘 制，如数据文件类型excel, word, json, xml等，以及测 试E C h a r t s不同炎型图形对不同数掂M级的执行效率 和支持情况等。

[参考文献]

[lj PA'I'l'KKSON丨）A, HKNNKSSY J L.i十兑机组成4设汁：硬件/软件接北京：机«T」lk出版社，2011:1 35.[2] ZAkAS N C.JavaScript高级桿序设汁[M].北京：人民邮电出版社，2012:689-696.

[31彭愿.乂阿.野，董六鹏.等.HJ JavaScript实现网页丨II丨线图动态佔息!h!.示[Jl .软件.201 2. 33 ( 1 ) :98-1 01 . 1 05. [4l FREEMAN A.H'1'ML5权威指南丨Ml.北京：人民邮电出版社.2014:86.

[51中东林.张晓菲.魏然.锋利的JQuery丨Ml.北京：人民邮电出版社.2012:1-3.[6l CR0CKF0RD D.JavaScript 语#楮粹[Ml.北以：电+工业出版社.2009:53.[7l ZMAS N C.卨性能 JavaScript 丨Ml.北

电+丄业!丨丨版社，2010:100.

|8|孙强.李晓娜.黄艳.JavaScript从人门到精-通|M|.北京：清肀人卞版化2008:67-68.

[责任编辑：吴志荣]