1.MPAndroidChart简介
- Github:https://github.com/PhilJay/MPAndroidChart
- A powerful Android chart view / graph view library, supporting line- bar- pie- radar- bubble- and candlestick charts as well as scaling, dragging and animations.
2.MPAndroidChart之折线图（LineChart）
1.效果图
2. 基本组成元素
- x轴（最大/最小值 颜色 高宽等）
- Y轴（最大/最小值 颜色 高宽等）
- 不及格线（位置 颜色 高宽等）
- 优秀线（位置 颜色 高宽等）
- 下标文字（年度总结报告）
- 区域颜色（黄色）
- 数据（x,y）
3.基本实现
xml文件
1
2
3
4
5<com.github.mikephil.charting.charts.LineChart
android:id="@+id/mLineChar"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>折线图展示java代码
基本设置1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17mLineChar = (LineChart) findViewById(R.id.mLineChar);
//设置手势滑动事件
mLineChar.setOnChartGestureListener(this);
//设置数值选择监听
mLineChar.setOnChartValueSelectedListener(this);
//后台绘制
mLineChar.setDrawGridBackground(false);
//设置描述文本
mLineChar.getDescription().setEnabled(false);
//设置支持触控手势
mLineChar.setTouchEnabled(true);
//设置缩放
mLineChar.setDragEnabled(true);
//设置推动
mLineChar.setScaleEnabled(true);
//如果禁用,扩展可以在x轴和y轴分别完成
mLineChar.setPinchZoom(true);
填充数据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//这里我模拟一些数据
ArrayList<Entry> values = new ArrayList<Entry>();
values.add(new Entry(5, 50));
values.add(new Entry(10, 66));
values.add(new Entry(15, 120));
values.add(new Entry(20, 30));
values.add(new Entry(35, 10));
values.add(new Entry(40, 110));
values.add(new Entry(45, 30));
values.add(new Entry(50, 160));
values.add(new Entry(100, 30));
//设置数据
setData(values);
//默认动画
mLineChar.animateX(2500);
//刷新
mChart.invalidate();
// 得到这个文字
Legend l = mLineChar.getLegend();
// 修改文字 ...
l.setForm(Legend.LegendForm.LINE);
//传递数据集
private void setData(ArrayList<Entry> values) {
if (mLineChar.getData() != null && mLineChar.getData().getDataSetCount() > 0) {
set1 = (LineDataSet) mLineChar.getData().getDataSetByIndex(0);
set1.setValues(values);
mLineChar.getData().notifyDataChanged();
mLineChar.notifyDataSetChanged();
} else {
// 创建一个数据集,并给它一个类型
set1 = new LineDataSet(values, "年度总结报告");
// 在这里设置线
set1.enableDashedLine(10f, 5f, 0f);
set1.enableDashedHighlightLine(10f, 5f, 0f);
set1.setColor(Color.BLACK);
set1.setCircleColor(Color.BLACK);
set1.setLineWidth(1f);
set1.setCircleRadius(3f);
set1.setDrawCircleHole(false);
set1.setValueTextSize(9f);
set1.setDrawFilled(true);
set1.setFormLineWidth(1f);
set1.setFormLineDashEffect(new DashPathEffect(new float[]{10f, 5f}, 0f));
set1.setFormSize(15.f);
if (Utils.getSDKInt() >= 18) {
// 填充背景只支持18以上
//Drawable drawable = ContextCompat.getDrawable(this, R.mipmap.ic_launcher);
//set1.setFillDrawable(drawable);
set1.setFillColor(Color.YELLOW);
} else {
set1.setFillColor(Color.BLACK);
}
ArrayList<ILineDataSet> dataSets = new ArrayList<ILineDataSet>();
//添加数据集
dataSets.add(set1);
//创建一个数据集的数据对象
LineData data = new LineData(dataSets);
//谁知数据
mLineChar.setData(data);
}
}
- 折线图效果
1.是否填充1
2
3
4
5
6
7
8
9List<ILineDataSet> setsFilled = mLineChar.getData().getDataSets();
for (ILineDataSet iSet : setsFilled) {
LineDataSet set = (LineDataSet) iSet;
if (set.isDrawFilledEnabled())
set.setDrawFilled(false);
else
set.setDrawFilled(true);
}
mLineChar.invalidate();
2.立方切换1
2
3
4
5
6
7
8List<ILineDataSet> setsCubic = mLineChar.getData().getDataSets();
for (ILineDataSet iSet : setsCubic) {
LineDataSet set = (LineDataSet) iSet;
set.setMode(set.getMode() == LineDataSet.Mode.CUBIC_BEZIER
? LineDataSet.Mode.LINEAR
: LineDataSet.Mode.CUBIC_BEZIER);
}
mLineChar.invalidate();
3.MPAndroidChart之条形图线图（BarChart）
1.效果图
2.基本实现
xml文件
1
2
3
4
5<com.github.mikephil.charting.charts.BarChart
android:id="@+id/mBarChart"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>条形图展示代码
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//条形图
mBarChart = (BarChart) findViewById(R.id.mBarChart);
//设置表格上的点，被点击的时候，的回调函数
mBarChart.setOnChartValueSelectedListener(this);
mBarChart.setDrawBarShadow(false);
mBarChart.setDrawValueAboveBar(true);
mBarChart.getDescription().setEnabled(false);
// 如果60多个条目显示在图表,drawn没有值
mBarChart.setMaxVisibleValueCount(60);
// 扩展现在只能分别在x轴和y轴
mBarChart.setPinchZoom(false);
//是否显示表格颜色
mBarChart.setDrawGridBackground(false);
XAxis xAxis = mBarChart.getXAxis();
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
xAxis.setDrawGridLines(false);
// 只有1天的时间间隔
xAxis.setGranularity(1f);
xAxis.setLabelCount(7);
xAxis.setAxisMaximum(50f);
xAxis.setAxisMinimum(0f);
xAxis.setValueFormatter(xAxisFormatter);
YAxis leftAxis = mBarChart.getAxisLeft();
leftAxis.setLabelCount(8, false);
leftAxis.setPosition(YAxis.YAxisLabelPosition.OUTSIDE_CHART);
leftAxis.setSpaceTop(15f);
//这个替换setStartAtZero(true)
leftAxis.setAxisMinimum(0f);
leftAxis.setAxisMaximum(50f);
YAxis rightAxis = mBarChart.getAxisRight();
rightAxis.setDrawGridLines(false);
rightAxis.setLabelCount(8, false);
rightAxis.setSpaceTop(15f);
rightAxis.setAxisMinimum(0f);
rightAxis.setAxisMaximum(50f);
//设置数据
private void setData(ArrayList yVals1) {
float start = 1f;
BarDataSet set1;
if (mBarChart.getData() != null &&
mBarChart.getData().getDataSetCount() > 0) {
set1 = (BarDataSet) mBarChart.getData().getDataSetByIndex(0);
set1.setValues(yVals1);
mBarChart.getData().notifyDataChanged();
mBarChart.notifyDataSetChanged();
} else {
set1 = new BarDataSet(yVals1, "2017年工资涨幅");
//设置有四种颜色
set1.setColors(ColorTemplate.MATERIAL_COLORS);
ArrayList<IBarDataSet> dataSets = new ArrayList<IBarDataSet>();
dataSets.add(set1);
BarData data = new BarData(dataSets);
data.setValueTextSize(10f);
data.setBarWidth(0.9f);
//设置数据
mBarChart.setData(data);
}
}条形图效果展示
1.显示顶点值1
2
3
4for (IDataSet set : mBarChart.getData().getDataSets()){
set.setDrawValues(!set.isDrawValuesEnabled());
}
mBarChart.invalidate();
2.XY轴动画1
mBarChart.animateXY(3000, 3000);
3.显示边框1
2
3
4
5for (IBarDataSet set : mBarChart.getData().getDataSets())
((BarDataSet) set)
.setBarBorderWidth(set.getBarBorderWidth() == 1.f ? 0.f
: 1.f);
mBarChart.invalidate();
4.MPAndroidChart之饼状图（PieChart）
1.效果图
2.基本实现
xml文件
1
2
3
4
5<com.github.mikephil.charting.charts.PieChart
android:id="@+id/mPieChart"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>饼状图展示代码
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//饼状图
mPieChart = (PieChart) findViewById(R.id.mPieChart);
mPieChart.setUsePercentValues(true);
mPieChart.getDescription().setEnabled(false);
mPieChart.setExtraOffsets(5, 10, 5, 5);
mPieChart.setDragDecelerationFrictionCoef(0.95f);
//设置中间文件
mPieChart.setCenterText(generateCenterSpannableText());
mPieChart.setDrawHoleEnabled(true);
mPieChart.setHoleColor(Color.WHITE);
mPieChart.setTransparentCircleColor(Color.WHITE);
mPieChart.setTransparentCircleAlpha(110);
mPieChart.setHoleRadius(58f);
mPieChart.setTransparentCircleRadius(61f);
mPieChart.setDrawCenterText(true);
mPieChart.setRotationAngle(0);
// 触摸旋转
mPieChart.setRotationEnabled(true);
mPieChart.setHighlightPerTapEnabled(true);
//变化监听
mPieChart.setOnChartValueSelectedListener(this);
//模拟数据
ArrayList<PieEntry> entries = new ArrayList<PieEntry>();
entries.add(new PieEntry(40, "优秀"));
entries.add(new PieEntry(20, "满分"));
entries.add(new PieEntry(30, "及格"));
entries.add(new PieEntry(10, "不及格"));
//设置数据
setData(entries);
mPieChart.animateY(1400, Easing.EasingOption.EaseInOutQuad);
Legend l = mPieChart.getLegend();
l.setVerticalAlignment(Legend.LegendVerticalAlignment.TOP);
l.setHorizontalAlignment(Legend.LegendHorizontalAlignment.RIGHT);
l.setOrientation(Legend.LegendOrientation.VERTICAL);
l.setDrawInside(false);
l.setXEntrySpace(7f);
l.setYEntrySpace(0f);
l.setYOffset(0f);
// 输入标签样式
mPieChart.setEntryLabelColor(Color.WHITE);
mPieChart.setEntryLabelTextSize(12f);
//设置数据
private void setData(ArrayList<PieEntry> entries) {
PieDataSet dataSet = new PieDataSet(entries, "三年级一班");
dataSet.setSliceSpace(3f);
dataSet.setSelectionShift(5f);
//数据和颜色
ArrayList<Integer> colors = new ArrayList<Integer>();
for (int c : ColorTemplate.VORDIPLOM_COLORS)
colors.add(c);
for (int c : ColorTemplate.JOYFUL_COLORS)
colors.add(c);
for (int c : ColorTemplate.COLORFUL_COLORS)
colors.add(c);
for (int c : ColorTemplate.LIBERTY_COLORS)
colors.add(c);
for (int c : ColorTemplate.PASTEL_COLORS)
colors.add(c);
colors.add(ColorTemplate.getHoloBlue());
dataSet.setColors(colors);
PieData data = new PieData(dataSet);
data.setValueFormatter(new PercentFormatter());
data.setValueTextSize(11f);
data.setValueTextColor(Color.WHITE);
mPieChart.setData(data);
mPieChart.highlightValues(null);
//刷新
mPieChart.invalidate();
}饼状图效果展示
1.显示百分比
1 | for (IDataSet<?> set : mPieChart.getData().getDataSets()){ |
2.xy轴动画1
mPieChart.animateXY(1400, 1400);
3.旋转动画1
2mPieChart.spin(1000, mPieChart.getRotationAngle(), mPieChart.getRotationAngle() + 360, Easing.EasingOption
.EaseInCubic);
5.小结
1.MPAndeordChart的核心功能：
- 支持x，y轴缩放
- 支持拖拽
- 支持手指滑动
- 支持高亮显示
- 支持保存图表到文件中
- 支持从文件（txt）中读取数据
- 预先定义颜色模板
- 自动生成标注
- 支持自定义x，y轴的显示标签
- 支持x，y轴动画
- 支持x，y轴设置最大值和附加信息
支持自定义字体，颜色，背景，手势，虚线等
2.优势
使用于Android和IOS
- 样式以及动画效果基本上满足开发各类应用的图表展示
- 使用方便简单，API非常详细，开发快捷
3.最后附上两位大神的总结
- https://blog.csdn.net/column/details/13579.html
- https://blog.csdn.net/u014136472/article/details/50273309
最后感谢您的阅读，有机会一起探讨！
