在Android上用AChartEngine輕鬆繪製圖表

LeonHover發表於2014-04-17

Android釋出不久的2008年底,開發者們已經開始尋找製表、製圖、繪圖的工具庫。當時沒有這樣免費或者開源的解決方案可用。

我開始帶著興趣評估Android,在開發了若干個需要一些製圖的Android應用程式後,我決定開源AChartEngine的程式碼。在2009年3月啟動了0.2.0版本,第一個開源的是Android圖表工具庫。那個時候,Android SDK是版本1.1。

近4年的時間,所有型別的應用程式正在使用AChartEngine來呈現圖表。appbrain.com Android市場宣告他們總共釋出的應用程式數量(大於600K)的0.53%,意味著他們中超過3000個應用正在使用AChartEngine。這些包括Waze和Facebook的官方頁面管理應用程式

使用AChartEngine新增圖表到Android應用程式,就像把achartengine-x.y.x.jar新增到應用程式類路徑、使用其API編碼一樣簡單。當前穩定的版本是1.0.0,版本1.1.0正在開發中。Jar檔案只有110KB大小,在當下這是非常小的佔用。然而,儘管體積很小,但是AChartEngine支援各種圖表型別。

關於相容性的注意事項:AChartEngine支援所有的1.6及更高版本的Android SDK。1.6版本只提供了平移和基於按鈕的縮放,而2.1版本以及更新的版本新增了雙指縮放的支援,在Android SDK 2.x及更新的版本中可用。前段時間,當AChartEngine放棄支援比2.1更老的Android SDK版本,許多使用者在釋出幾天後要求恢復到之前的版本。當時,根據官方的Android平臺分佈情況可以在這裡找到,仍有大約5%世界範圍內的裝置正在執行早於2.x的版本。

功能

AChartEngine主要支援三種型別的圖表:

  • XY圖表——在兩軸座標系中展示資料(線,立方線,面,條,散點圖,氣泡圖,範圍(高-低))
  • “圓”圖表——餅圖,圓環圖,刻度盤
  • 組合圖——可以顯示XY圖的組合

xychart

round-charts

combined-charts

快速遊覽一些AChartEngine例項應用截圖,請訪問官方網站AChartEngine Goolge Code頁面

整體類設計

下圖展示了處理圖表視覺呈現的類的組織結構。

chart-tree-large

  • AbstractChart類描述了那些所有圖表共享的行為,包括描畫背景、說明、標題等等;
  • XYChart類描述了XY圖表型別共同的狀態和行為,如座標軸渲染、標籤等等;
  • RoundChart跟XYChart相似,但多了一類圓形的圖表型別。

設計元件

整個設計沒有隻侷限於視覺或檢視上,還有幾個有助於整體影像的元件。

  • 模型——資料集/資料序列。
  • 檢視——如上面描述的。
  • 渲染器——有助於自定義圖表外觀(顏色,字型,座標軸,標籤,格式等等)。
  • ChartFactory——獲得一個資料集合例項和一個渲染器例項,並返回嵌入在一個Intent(用於圖表填充一個Activity的情況)或者一個View(當圖表是Activity的一個部分,伴有其他小部件)中想得到的的圖表。
  • 工具——平移和縮放的互動工具。

示例程式碼

要使用AChartEngine的API進行編碼開發,你可以下載下面的二進位制檔案其中一個,新增到你的classpath然後開始編碼吧。

  • 穩定版,當前版本1.0.0可以在這裡下載到。
  • 中間版本,釋出的候選版本可以在這裡下載到。
  • 每日開發版可以在這裡下載到。

Maven使用者可以通過新增如下程式碼到他們的pom.xml檔案中來包含AChartEngine到他們的應用程式中:

下面的程式碼展示了一個在應用程式中使用AChartEngine的例子。程式允許建立新的資料序列以及輸入X和Y值,然後會被新增到當前的序列中。每一次新增資料,圖表都會更新。使用這個程式來建立一個有10個資料點的序列的例子,可以在下面的截圖中看到。

全部程式碼在這裡可以得到。其中包括用來解釋最重要部分的註釋。

chart-demo-1

AChartEngine製圖類設計支援通過改變一行程式碼來用條形圖表替換成線條圖表。將這句:

替換成下面的程式碼,我們將得到一個像下面截圖中的條形圖表。

chart-demo-2

也可以替換為下面這句程式碼,得到一個雜湊圖表:

chart-demo-3

為了讓上面的例子工作,必須定義一個簡單的佈局檔案而且需要包含一個android:id=”@+id/chart”的LinearLayout。示例的佈局檔案可以在這裡下載到。

僅僅小的改變,就可以複用上面的程式碼來製作一個使用者介面來建立餅形圖表。我們只需要一個單獨文字輸入一個值替代我們在XY圖表中輸入的X和Y值。然後,我們需要例項化另一種型別的渲染器,如下面的程式碼所示。我們也需要定義一些用在我們建立的圓片上的顏色值。

onSaveInstanceState和onRestoreInstanceState方法跟上面例子中的方法類似,僅僅這一次我們只儲存和恢復mSeries和mRenderer變數的狀態。

onCreate方法也是類似的,但這次我們可以使用一些餅狀圖特定的渲染器屬性。

在mAdd按鈕上的點選事件上,我們用與上面相同的方式新增資料到集合,並我們新增一個新的將處理新增的圓片顯示的渲染器。然後,圖表必須重繪來反映新的變化。

在onResume方法中,我們建立一個餅狀圖:

在圖表檢視的點選事件監聽器上,當seriesSelection不是空,意味著一個圓片被選中了,我們想要像下面的截圖所示形象化的高亮那個被選中的圓片。為了達到這樣,我們需要設定被選中的圓片的渲染器成為可高亮。在圖表檢視上任何視覺上的變化通過呼叫repaint()方法來觸發。

產生的圖表應該像下面這樣:

chart-demo-4

程式碼例子包含在官方DEMO應用中,可以在這裡下載到。

你可以找到所有AChartEngine支援的圖表型別的例子。

資源

你可以訪問官方AChartEngine網站在http://achartengine.org,Google code網站提供可下載的jar包,javadocs和demo應用,問題跟蹤以及原始碼SVN路徑:http://code.google.com/p/achartengine.

想要更深層次的幫助性的資源,在YouTube上搜尋”AChartEngine”,在stackoverflow.com釋出問題,在我們的Google group和Facebook page上交流或者通過發郵件給contact@achartengine.org聯絡我們。

附錄——歡迎貢獻者

AChartEngine是一個開源工程專案,它是開源社群努力的結果。任何想貢獻力量的人可以從SVN上檢出原始碼來了解它。然後,看一下那些處於Open狀態的問題,試著修復一些,完成後釋出補丁。

相關文章