非常实用的图表工具MPAndroidChart

最近做了两个数据展示的APP,都使用到了MPAndroidChart这个图表框架。

框架地址:https://github.com/PhilJay/MPAndroidChart

下面就来讲解一下MPChart的使用

MPAndoridChart

Chart types(目前支持的图表类别)

  • LineChart (with legend, simple design) (线性图1)
    线性图1

  • LineChart (with legend, simple design) (线性图2)
    线性图2

  • LineChart (cubic lines) (线性图3)
    线性图3

  • LineChart (gradient fill) (线性图4)
    线性图4

  • Combined-Chart (bar- and linechart in this case) (组合图 柱状图加线形图组合)
    组合图

  • BarChart (with legend, simple design)(柱状图1)
    柱状图1

  • BarChart (grouped DataSets) (柱状图2)

柱状图2

  • Horizontal-BarChart(横向柱状图)
    横向柱状图

  • PieChart (with selection, …) (饼状图)
    饼状图

  • ScatterChart (with squares, triangles, circles, … and more)(散点图)
    散点图

  • CandleStickChart (for financial data) (烛形图)
    烛形图
  • BubbleChart (area covered by bubbles indicates the yValue)(气泡图)
    气泡图
  • RadarChart (spider web chart)(雷达图)
    雷达图

功能

  • 支持x,y轴缩放
  • 支持拖拽
  • 支持手指滑动
  • 支持高亮显示
  • 支持保存图表到文件中
  • 支持从文件(txt)中读取数据
  • 预先定义颜色模板
  • 自动生成标注
  • 支持自定义x,y轴的显示标签
  • 支持x,y轴动画
  • 支持x,y轴设置最大值和附加信息
  • 支持自定义字体,颜色,背景,手势,虚线等

实现

写sample的时候才发现,从1.0版本到3.0版本这个框架改动还是蛮多的。
主要是把雷达图和饼状图抽取共用了。为了实现复合图将X轴值的设置放到了Axais中。之前是直接放到ChartData中的。

图表常用的实现:
每个图表都必须实现填充ChartData,也就是XY轴的数据。
系统有默认的图表样式,可根据喜好设置图表的样式,各种颜色、形状、数据之间的间距等。
可以根据图表的绘制流程和图表的点击事件(点击某个数据的监听)设置监听。
可以添加图表的一些辅助显示工具:MarkView(以MarkView的形式显示数据,这种在数据量大的情况能避免数据显示重叠),Legend(图表轴描述)

这边以LineChart为例

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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
package cn.xiaolongonly.mpchartsample.ui;
import android.graphics.Color;
import com.github.mikephil.charting.charts.LineChart;
import com.github.mikephil.charting.components.AxisBase;
import com.github.mikephil.charting.components.Legend;
import com.github.mikephil.charting.components.XAxis;
import com.github.mikephil.charting.components.YAxis;
import com.github.mikephil.charting.data.Entry;
import com.github.mikephil.charting.data.LineData;
import com.github.mikephil.charting.data.LineDataSet;
import com.github.mikephil.charting.formatter.IAxisValueFormatter;
import com.github.mikephil.charting.interfaces.datasets.ILineDataSet;
import java.util.ArrayList;
import java.util.List;
import cn.xiaolongonly.mpchartsample.R;
import cn.xiaolongonly.mpchartsample.base.BaseActivity;
import cn.xiaolongonly.mpchartsample.chart.markview.DataMarkView;
import cn.xiaolongonly.mpchartsample.chart.util.ColorTemplate;
/**
* @author xiaolong
* @version v1.0
* @function <描述功能>
* @date 2016/12/6-9:10
*/
public class LineChartActivity1 extends BaseActivity {
private LineChart chart;
@Override
protected int getLayoutId() {
return R.layout.list_item_linechart;
}
@Override
protected void initView() {
chart = findView(R.id.chart);
ChartConfig();
//XY轴配置
XAxis xAxis = chart.getXAxis();
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM); //定制X轴是在图表上方还是下方。
xAxis.setDrawGridLines(false);
xAxis.setGranularity(1);
xAxis.setValueFormatter(new IAxisValueFormatter() {
@Override
public String getFormattedValue(float value, AxisBase axis) {
return (int) value + "年";
}
});
YAxis yAxisRight = chart.getAxisRight();
yAxisRight.setEnabled(false);
YAxis yAxisLeft = chart.getAxisLeft();
yAxisLeft.setAxisMinValue(0);
//动画效果
chart.animateX(750);
chart.animateY(750);
}
/**
* 图表的配置 一些提示和Legend
*/
private void ChartConfig() {
//设置覆盖物
DataMarkView dataMarkView = new DataMarkView(this, 0, "");//自定义覆盖物
chart.setMarkerView(dataMarkView);
//背景设置
chart.setDrawGridBackground(false);//表格背景绘制
chart.setBackgroundColor(getResources().getColor(R.color.chart_bg));
//Legend定制
chart.getLegend().setPosition(Legend.LegendPosition.ABOVE_CHART_LEFT);
chart.getLegend().setForm(Legend.LegendForm.CIRCLE);//Legend样式
//图表描述
chart.setDescription(null);
// 设置无数据文本提示
chart.setNoDataText(getResources().getString(R.string.chart_no_data));
//XY轴描述
chart.setXYDesc("年份", "总金额(元)");
//设置单方向和双方向缩放 true x,y方向可以同时控制,false只能控制x方向的缩小放大或者Y方向的缩小放大
chart.setPinchZoom(true);
//填充数据
chart.setData(new LineData(generateLineDataSet()));
}
@Override
protected void setListener() {
}
private ILineDataSet generateLineDataSet() {
int color = ColorTemplate.PIE_COLORS[0];
LineDataSet dataSet = new LineDataSet(generateData(), "年度营业额曲线");
dataSet.setLineWidth(2.0f);
dataSet.setCircleRadius(3.5f);
dataSet.setDrawCircleHole(true);//填充圆
dataSet.setValueTextSize(9f);
dataSet.setHighlightLineWidth(2.0f);
dataSet.setDrawFilled(true);//区域颜色
dataSet.setFillAlpha(51);
dataSet.setFillColor(color); //填充色
dataSet.setHighLightColor(color); //选中十字线色
dataSet.setColor(color); //线条颜色
dataSet.setCircleColor(color); //圆点颜色
dataSet.setCircleColorHole(Color.WHITE);
dataSet.setCircleHoleRadius(2.0f);
dataSet.setDrawValues(false);
return dataSet;
}
private List<Entry> generateData() {
List<Entry> entryList = new ArrayList<>();
entryList.add(new Entry(2013, 1000));
entryList.add(new Entry(2014, 2000));
entryList.add(new Entry(2015, 3000));
entryList.add(new Entry(2016, 4000));
return entryList;
}
}

效果如下
效果图

简单的介绍了一下MPChart的实现,一般就两个流程:
一是设置图表配置(Legend,X,Y轴样式,图表样式,markView添加,动画效果等,注:不设置的话会使用默认的配置)
二是填充数据(将需要展示的数据绑定到图表框架中)。
图表框架有写地方并不能满足我们的需求,比如说没有XY轴描述。
国内的人大部分看图表的习惯就只需要显示单条X,Y轴,并在轴末端设置单位等。
下一篇文章介绍 自定义需求,XY轴描述添加。

参考自:http://blog.csdn.net/u013338165/article/details/44810025

By Xiaolong,每一天都值得被认真对待!