第1页AChartEngine画折线图技巧分享
ChartEngine是为Android应用而设计的绘图工具库。可用于绘制多种图标,目前该绘图工具库的最新稳定版本是0.7。
ChartEngine支持的图表类型:折线图、区域图、散点图、时间图、柱状图、饼状图、气泡式图表、环形图、高低交替图。
以上每种图表都可以包含多个序列, 可以将X轴以水平或垂直的形式显示,也支持很多自定义的特性。另外,图表可以作为Viewl构建,也可以作为Intent构建这样可以被用于启动一个活动(Activity)。
以下是ChartEngine的效果图展示:
下面给大家分享一下关于如何使用AChartEngine画折线图的技巧
其实方法跟柱状图的制作差不多,但是Intent应使用ChartFactory.getLineChartIntent()方法获取到。看Activity中的代码:
public class main extends ListActivity {
private static final int SERIES_NR = 2;
/** Called when the activity is first created. */
privateArrayList> maps=newArrayList>();
@Override
public void onCreate(BundlesavedInstanceState) {
super.onCreate(savedInstanceState);
// setContentView(R.layout.main);
// 加入ListItem “调度查询”
HashMapmap=new HashMap();
map.put("name","折线图");
map.put("desc", "显示折线图");
maps.add(map);
// 构建listView的适配器
SimpleAdapter adapter=new SimpleAdapter(this,maps,
android.R.layout.simple_list_item_2,// SDK库中提供的一个包含两个TextView的layout
new String[]{"name","desc"},// maps中的两个key
new int[]{android.R.id.text1,android.R.id.text2}// 两个TextView的id
);
this.setListAdapter(adapter);
// ListItem监听器方法
protected voidonListItemClick(ListView l, View v, int position, long id) {
super.onListItemClick(l,v, position, id);
Intent intent =ChartFactory.getLineChartIntent(this, getDataset(),getRenderer());
startActivity(intent);
privateXYMultipleSeriesDataset getDataset() {
XYMultipleSeriesDatasetdataset = new XYMultipleSeriesDataset();
final int nr = 10;// 每个系列种包含10个随机数
Random r = new Random();
for (int i = 0; i
// 新建一个系列(线条)
XYSeries series = new XYSeries("Series" + (i + 1));
for (int k = 0; k
int x=r.nextInt()%10;// x:0-10之间的随机整数
inty=50+r.nextInt()%50;// y:50-100之间的随机整数
series.add(x,y);// 往系列中加入一个随机分布的点
// 把添加了点的折线放入dataset
dataset.addSeries(series);
return dataset;
publicXYMultipleSeriesRenderer getRenderer() {
// 新建一个xymultipleseries
XYMultipleSeriesRendererrenderer = new XYMultipleSeriesRenderer();
renderer.setAxisTitleTextSize(16);// 设置坐标轴标题文本大小
renderer.setChartTitleTextSize(20); // 设置图表标题文本大小
renderer.setLabelsTextSize(15); // 设置轴标签文本大小
renderer.setLegendTextSize(15); // 设置图例文本大小
renderer.setMargins(new int[] {20, 30, 15,0}); // 设置4边留白
// 设置一个系列的颜色为蓝色
XYSeriesRenderer r = newXYSeriesRenderer();
r.setColor(Color.BLUE);
// 往xymultiplerender中增加一个系列
renderer.addSeriesRenderer(r);
// 设置另一个系列的颜色为红色
r = newXYSeriesRenderer();
r.setColor(Color.GREEN);
// 往xymultiplerender中增加另一个系列
renderer.addSeriesRenderer(r);
return renderer;
以下是需要注意的3个方法:
1、onListItemClick方法
当点击“柱状图”菜单时,使用 ChartFactory.getLineChrtIntent获得Intdent:
Intent intent = ChartFactory.getLineChartIntent(this, getDataset(),getRenderer());
2、getDataset方法
使用随机数构建了2个系列中的点坐标x和y:
int x=r.nextInt()%10;// x:0-10之间的随机整数
inty=50+r.nextInt()%50;// y:50-100之间的随机整数
series.add(x,y);// 往系列中加入一个随机分布的点
由于使用随机数作为点的x、y坐标,所以形成的折线图是很不规律的:
3、getRenderer方法
构建了XYMultipleSeriesRenderer,在其中加入了两个Series。注意,这里的Series要用XYSeriesRenderer ,而不能使用 SimpleSeriesRenderer。
android achartengine 折线图例子
需要用到第三方的jar包,链接地址:http://achartengine.googlecode.com/files/achartengine-1.1.0.jar
public class PlottingActivity extends Activity{
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
String[] titles = new String[] { "当天客流密集指数", "昨日客流密集指数", "上周客流密集指数", "上月客流密集指数" };
List<double[]> values = new ArrayList<double[]>();
values.add(new double[] { 2.3, 2.5, 3.8, 6.8, 5.4, 4.4, 6.4, 6.1, 3.6,
8.3, 7.2, 3.9 });
values.add(new double[] { 1.2, 1.8, 4.5, 5.2, 2.5, 2.4, 2.6, 2.6, 2.3, 1.8,
1.4, 1.1,3.5,4.2,7.8,5.3,2.3,1.7 });
values.add(new double[] { 5.2, 5.3, 8.3, 1.2, 1.7, 2.2, 2.2, 2.4, 1.9,
1.5, 9.4, 6.2,3.2,4.6,8.8,5.1,2.2,1.5 });
values.add(new double[] { 3, 3.2, 1.1, 1.5, 1.9, 2.3, 2.6, 2.5, 2.2,
1.8, 1.3, 1.0,3.7,4.5,7.5,5.1,2.6,1.9 });
int[] colors = new int[] { Color.rgb(13, 147, 12), Color.rgb(251, 179, 30), Color.rgb(219, 219, 0),
Color.rgb(255,0,0) };
PointStyle[] styles = new PointStyle[] { PointStyle.CIRCLE,
PointStyle.DIAMOND, PointStyle.TRIANGLE, PointStyle.SQUARE };
XYMultipleSeriesRenderer renderer = buildRenderer(colors, styles);
int length = renderer.getSeriesRendererCount();
for (int i = 0; i < length; i++) {
/*((XYSeriesRenderer) renderer.getSeriesRendererAt(i))
.setFillPoints(true);*/
XYSeriesRenderer xyrenderer = (XYSeriesRenderer)renderer.getSeriesRendererAt(i);
xyrenderer.setDisplayChartValues(true);
xyrenderer.setFillPoints(true);
}
setChartSettings(renderer, "轨道交通全路网客流密集指数", "", "指数", 0.5, 18.5, 0,
10, Color.LTGRAY, Color.rgb(106, 106, 113));
String pattern="00";
java.text.DecimalFormat df = new java.text.DecimalFormat(pattern);
for(int j=1;j<19;j++){
renderer.addXTextLabel(j, df.format(j+5)+":00");
}
Intent intent = ChartFactory.getLineChartIntent(this,
buildBarDataset(titles,values), renderer,"客流密集指数");
startActivity(intent);
finish();
}
|
/**
* Builds a bar multiple series dataset using the provided values.
*
* @param titles the series titles
* @param values the values
* @return the XY multiple bar dataset
*/
protected XYMultipleSeriesDataset buildBarDataset(String[] titles,
List values) {
XYMultipleSeriesDataset dataset = new XYMultipleSeriesDataset();
int length = titles.length;
for (int i = 0; i < length; i++) {
CategorySeries series = new CategorySeries(titles[i]);
double[] v = values.get(i);
int seriesLength = v.length;
for (int k = 0; k < seriesLength; k++) {
series.add(v[k]);
}
dataset.addSeries(series.toXYSeries());
}
return dataset;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
/**
* Sets a few of the series renderer settings.
*
* @param renderer the renderer to set the properties to
* @param title the chart title
* @param xTitle the title for the X axis
* @param yTitle the title for the Y axis
* @param xMin the minimum value on the X axis
* @param xMax the maximum value on the X axis
* @param yMin the minimum value on the Y axis
* @param yMax the maximum value on the Y axis
* @param axesColor the axes color
* @param labelsColor the labels color
*/
protected void setChartSettings(XYMultipleSeriesRenderer renderer, String title, String xTitle,
String yTitle, double xMin, double xMax, double yMin, double yMax, int axesColor,
int labelsColor) {
renderer.setChartTitle(title);
renderer.setXTitle(xTitle);
renderer.setYTitle(yTitle);
renderer.setXAxisMin(xMin);
renderer.setXAxisMax(xMax);
renderer.setYAxisMin(yMin);
renderer.setYAxisMax(yMax);
renderer.setAxesColor(axesColor);
renderer.setLabelsColor(labelsColor);
}
/**
* Builds an XY multiple series renderer.
*
* @param colors the series rendering colors
* @param styles the series point styles
* @return the XY multiple series renderers
*/
protected XYMultipleSeriesRenderer buildRenderer(int[] colors,
PointStyle[] styles) {
XYMultipleSeriesRenderer renderer = new XYMultipleSeriesRenderer();
setRenderer(renderer, colors, styles);
return renderer;
}
/**
* 设置折线图
* @param renderer
* @param colors 背景色
* @param styles 样式
*/
protected void setRenderer(XYMultipleSeriesRenderer renderer, int[] colors,
PointStyle[] styles) {
renderer.setPointSize(5f);
renderer.setLegendTextSize(22); //设置图例字号
renderer.setLegendHeight(50);
renderer.setChartTitleTextSize(35);// 设置图表标题文本大小
renderer.setAxisTitleTextSize(20);// 设置坐标轴标题文本大小
renderer.setLabelsTextSize(15);//设置轴标签文本大小
renderer.setBarSpacing(0.5);// 设置间距
renderer.setXLabels(0);// 设置 X 轴不显示数字(改用我们手动添加的文字标签));//设置X轴显示的刻度标签的个数
renderer.setYLabels(10);// 设置合适的刻度,在轴上显示的数量是 MAX / labels
renderer.setMargins(new int[] { 50, 50, 10, 0 });// 图形 4 边距 设置4边留白
renderer.setShowGridX(true);//设置是否在图表中显示网格
renderer.setYLabelsAlign(Align.RIGHT);// 设置y轴显示的分列,默认是 Align.CENTER
renderer.setPanEnabled(false, false);// 设置x方向可以滑动,y方向不可以滑动
renderer.setZoomEnabled(false, false);// 设置x,y方向都不可以放大或缩小
renderer.setXLabelsColor(Color.rgb(106, 106, 113));
renderer.setYLabelsColor(0, Color.rgb(106, 106, 113));
//设置是否显示背景色
renderer.setApplyBackgroundColor(true);
//设置背景色
renderer.setBackgroundColor(Color.argb(0, 220, 228, 234));
//设置报表周边颜色
renderer.setMarginsColor(Color.argb(0, 220, 228, 234));
int length = colors.length;
for (int i = 0; i < length; i++) {
XYSeriesRenderer r = new XYSeriesRenderer();
r.setColor(colors[i]);
r.setPointStyle(styles[i]);
renderer.addSeriesRenderer(r);
}
}
|
}
效果图:

通过后台取到JSON,然后解析:
