基于ECharts Library和File API的本地數(shù)據(jù)繪圖技術(shù)

龐龐聰，杜瑞林，王龐磊

（中國地震局 地震研究所，武漢 430071）

基于ECharts Library和File API的本地數(shù)據(jù)繪圖技術(shù)

龐龐聰，杜瑞林，王龐磊

（中國地震局 地震研究所，武漢 430071）

為解決web繪圖每次更改圖形繪制均需修改代碼，且反復(fù)修改易造成代碼編寫錯誤的弊端，提出一種針對本地TXT文件，利用ECharts Library和File API簡化數(shù)據(jù)處理程序的繪圖技術(shù)。該繪圖技術(shù)可以直接對TXT文件進行修改，簡單方便，易于操作。

本地數(shù)據(jù)；繪圖技術(shù)；ECharts Library；File API

0 引 言

Web繪圖區(qū)別于傳統(tǒng)的本地繪圖，具有輕載體、跨平臺、顯示形式多樣等特點。不論是工程科研方面的MATLAB和AutoCAD，還是UI設(shè)計領(lǐng)域的Photoshop和CorelDRAW，它們在操作系統(tǒng)上的運行都依靠專業(yè)軟件環(huán)境的支持，且安裝、升級都需要耗費大量的時間和精力。依靠Web技術(shù)發(fā)展起來的Canvas繼承了HTML腳本語言的兼容性好、易操作等優(yōu)點，但代碼一經(jīng)發(fā)布就幾乎無法修改，盡管可以通過設(shè)置初始數(shù)據(jù)為隨機類型，從而保證圖形具有一定的動態(tài)性，仍遠遠無法滿足專業(yè)用戶對繪圖的易操作、可維護等需求[1]。

在ECharts繪圖庫的基礎(chǔ)上，如果要更改圖形繪制所需數(shù)據(jù)，必須重新修改原始代碼和數(shù)據(jù)。對于專業(yè)技術(shù)人員而言，許多工程數(shù)據(jù)都以T X T的形式保存，如果運用這些數(shù)據(jù)繪圖就存在每次均需修改代碼、反復(fù)修改易造成代碼編寫錯誤的弊端。利用優(yōu)化后的File API對本地數(shù)據(jù)進行處理，實現(xiàn)本地數(shù)據(jù)的可視化；直接對TXT文件進行修改，簡單方便，易于操作。

1 常見的Web繪圖技術(shù)

1.1 Canvas

Canvas作為HTML5新出現(xiàn)的特性之一，已被用來繪制各種圖形，包括圖標(biāo)、折線圖、漸變圖等。Canvas與其他HTML標(biāo)簽一樣具有自己的方法和屬性。如繪制一個圖形操作如下：利用canvas.getContext()獲取繪圖功能對象，通過context.fillStyle()和context. strokeStyle()進行填充樣式和邊框樣式的具體設(shè)置，然后調(diào)用context.fill和context.stroke方法進行具體的填充和邊框設(shè)置[2]。同時，Canvas支持坐標(biāo)點的繪制。如context.fillRect(2,14,60,40)，即表示坐標(biāo)點（2,14）為起始端點進行繪制長度、寬度分別為60和40的填充矩形。

1.2 C#

C#通過.net的chart控件實現(xiàn)對曲線圖的繪制和編寫，并調(diào)用SW.WriteLine語句把C#內(nèi)容寫入網(wǎng)頁。如繪制時首先調(diào)用System.Windows.Forms.DataVisualization.Charting，通過DataBindXY(listX,listY)方法繪制x-y坐標(biāo)點[3]。

2 ECharts繪圖原理

ECharts library是一個依賴于Canvas類庫ZRender、完全采用JavaScript編寫的數(shù)據(jù)可視化圖表library。ECharts的主要優(yōu)勢如下：一是圖表類型。ECharts支持幾乎所有主流圖表類型，包括treemap、K線圖、折線圖、柱狀圖及地圖、熱力圖等，同時也支持不同類型圖行的混合繪制。二是兼容性。ECharts不僅兼容大多數(shù)主流瀏覽器（IE11,Firefox,chrome等），也支持移動端的流暢運行，完整地體現(xiàn)交互性、可定制性、直觀性等豐富特性。三是坐標(biāo)系。最新的ECharts 3增加了“坐標(biāo)系”這一維度理念，同時支持地理坐標(biāo)系（geo）、極坐標(biāo)系（polar）和直角坐標(biāo)系（catesian）。四是交互式數(shù)據(jù)操作。ECharts提供的legend,visualMap, dataZoom,tooltip等組件，借助漫游、選取等圖表工具實現(xiàn)數(shù)據(jù)篩取、圖形縮放等功能。五是動態(tài)數(shù)據(jù)。ECharts根據(jù)用戶輸入數(shù)據(jù)的變化而調(diào)用timeline組件驅(qū)動圖表產(chǎn)生相應(yīng)改變，如數(shù)值大小的可視化變化和圖形位置隨數(shù)值改變而發(fā)生移動。

2.1 引入ECharts

在使用相關(guān)方法和屬性前，必須在