在Android上用AChartEngine轻松绘制图表

Posted 2020-07-28 请叫我码农怪蜀黍

本文由 伯乐在线 - LeonHover 翻译。未经许可，禁止转载！
英文出处：jaxenter。欢迎加入翻译组。

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图的组合

快速游览一些AChartEngine实例应用截图，请访问官方网站和AChartEngine Goolge Code页面。

整体类设计

下图展示了处理图表视觉呈现的类的组织结构。

• AbstractChart类描述了那些所有图表共享的行为，包括描画背景、说明、标题等等；
• XYChart类描述了XY图表类型共同的状态和行为，如坐标轴渲染、标签等等；
• RoundChart跟XYChart相似，但多了一类圆形的图表类型。

设计组件

整个设计没有只局限于视觉或视图上，还有几个有助于整体图像的组件。

• 模型——数据集/数据序列。
• 视图——如上面描述的。
• 渲染器——有助于自定义图表外观（颜色，字体，坐标轴，标签，格式等等）。
• ChartFactory——获得一个数据集合实例和一个渲染器实例，并返回嵌入在一个Intent（用于图表填充一个Activity的情况）或者一个View（当图表是Activity的一个部分，伴有其他小部件）中想得到的的图表。
• 工具——平移和缩放的交互工具。

示例代码

要使用AChartEngine的API进行编码开发，你可以下载下面的二进制文件其中一个，添加到你的classpath然后开始编码吧。

• 稳定版，当前版本1.0.0可以在这里下载到。
• 中间版本，发布的候选版本可以在这里下载到。
• 每日开发版可以在这里下载到。

Maven用户可以通过添加如下代码到他们的pom.xml文件中来包含AChartEngine到他们的应用程序中：

 

 

1 2 3 4 5 6 7 8 9 10 11

<repository>     <id>achartengine</id>     <name>Public AChartEngine repository</name>     <url>https://repository-achartengine.forge.cloudbees.com/snapshot/</url> </repository>   <dependency>     <groupId>org.achartengine</groupId>     <artifactId>achartengine</artifactId>     <version>1.1.0</version> </dependency>

下面的代码展示了一个在应用程序中使用AChartEngine的例子。程序允许创建新的数据序列以及输入X和Y值，然后会被添加到当前的序列中。每一次添加数据，图表都会更新。使用这个程序来创建一个有10个数据点的序列的例子，可以在下面的截图中看到。

全部代码在这里可以得到。其中包括用来解释最重要部分的注释。

AChartEngine制图类设计支持通过改变一行代码来用条形图表替换成线条图表。将这句：

 

 

 

 

 

Java

 

1	mChartView = ChartFactory.getLineChartView(this, mDataset, mRenderer);

替换成下面的代码，我们将得到一个像下面截图中的条形图表。

 

 

 

 

 

 

Java

 

1	mChartView = ChartFactory.getBarChartView(this, mDataset, mRenderer, Type.DEFAULT);

也可以替换为下面这句代码，得到一个散列图表：

 

 

 

 

 

 

Java

 

1	mChartView = ChartFactory.getScatterChartView(this, mDataset, mRenderer);

为了让上面的例子工作，必须定义一个简单的布局文件而且需要包含一个android:id=”@+id/chart”的LinearLayout。示例的布局文件可以在这里下载到。

仅仅小的改变，就可以复用上面的代码来制作一个用户界面来创建饼形图表。我们只需要一个单独文本输入一个值替代我们在XY图表中输入的X和Y值。然后，我们需要实例化另一种类型的渲染器，如下面的代码所示。我们也需要定义一些用在我们创建的圆片上的颜色值。

 

 

 

 

 

 

Java

 

1 2 3 4 5 6

/** Colors to be used for the pie slices. */ private static int[] COLORS = new int[] { Color.GREEN, Color.BLUE, Color.MAGENTA, Color.CYAN }; /** The main series that will include all the data. */ private CategorySeries mSeries = new CategorySeries(""); /** The main renderer for the main dataset. */ private DefaultRenderer mRenderer = new DefaultRenderer();

onSaveInstanceState和onRestoreInstanceState方法跟上面例子中的方法类似，仅仅这一次我们只保存和恢复mSeries和mRenderer变量的状态。

onCreate方法也是类似的，但这次我们可以使用一些饼状图特定的渲染器属性。

 

 

 

 

 

Java

 

1 2 3 4

// set the start angle for the first slice in the pie chart mRenderer.setStartAngle(180); // display values on the pie slices mRenderer.setDisplayValues(true);

在mAdd按钮上的点击事件上，我们用与上面相同的方式添加数据到集合，并我们添加一个新的将处理添加的圆片显示的渲染器。然后，图表必须重绘来反映新的变化。

 

 

 

 

 

Java

 

1 2 3 4 5

mSeries.add("Series " + (mSeries.getItemCount() + 1), value); SimpleSeriesRenderer renderer = new SimpleSeriesRenderer(); renderer.setColor(COLORS[(mSeries.getItemCount() - 1) % COLORS.length]); mRenderer.addSeriesRenderer(renderer); mChartView.repaint();

在onResume方法中，我们创建一个饼状图：

 

 

 

 

 

Java

 

1	mChartView = ChartFactory.getPieChartView(this, mSeries, mRenderer);

在图表视图的点击事件监听器上，当seriesSelection不是空，意味着一个圆片被选中了，我们想要像下面的截图所示形象化的高亮那个被选中的圆片。为了达到这样，我们需要设置被选中的圆片的渲染器成为可高亮。在图表视图上任何视觉上的变化通过调用repaint()方法来触发。

 

 

 

 

 

 

Java

 

1 2 3 4

for (int i = 0; i < mSeries.getItemCount(); i++) {       mRenderer.getSeriesRendererAt(i).setHighlighted(i == seriesSelection.getPointIndex());     } mChartView.repaint();

产生的图表应该像下面这样：

代码例子包含在官方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上交流或者通过发邮件给[email protected]联系我们。

附录——欢迎贡献者

AChartEngine是一个开源工程项目，它是开源社区努力的结果。任何想贡献力量的人可以从SVN上检出源代码来了解它。然后，看一下那些处于Open状态的问题，试着修复一些，完成后发布补丁。