提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
前言
一、MPAndroidChart是什么？
MPAndroidChart是一个强大的图表库，支持线性图、柱状图、散点图、饼图、雷达图等多种可视化形式。 它具有以下主要特点：
1.支持多种图表类型
包括LineChart(线性图)、BarChart（柱状图）、ScatterChart(散点图)、PieChart(饼图)、RadarChart(雷达图)等,可满足日常开发中的各种可视化 needs。
2. 高度自定义
存在众多属性,可以自定义图表的各个细节,如线条颜色、填充颜色、高亮模式、X/Y轴属性、图例属性等,可以定制出专属于你的图表风格。
3. 动画和手势
内置缩放、拖拽、 highlighting 等手势,以及平滑的图表动画,为用户带来更佳体验。
4. 优异的性能
图表绘制高效,即使 wandering 上千数据点,仍可以流畅滑动。MPAndroidChart 使用原生绘制,不依赖 OpenGLES,在各种 Android 设备上表现优异。
5. 丰富的示例
提供详细的示例,快速了解各图表的属性设置和使用方法。
二、使用步骤
1.添加依赖
在app模块的build.gradle中添加:
gradle
implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'
2.添加权限
代码如下（示例）：
xml
<uses-permission android:name="android.permission.INTERNET"/>
这里只介绍所有的图基本属性的设置，各图的属性api大致相同
折线图
Random random = new Random();
// 设置x轴在底部的数据
List<String> lineTitles = Arrays.asList("新闻1", "新闻2", "新闻3", "新闻4", "新闻5", "新闻6", "新闻7", "新闻8");
// 设置lineEntry集合
ArrayList<Entry> lineEntries = new ArrayList<>();
for (int i = 0; i < 8; i++) {
lineEntries.add(new Entry(i, random.nextInt(100)));
}
// lineEntries：lineEntry集合
// "新闻点赞数量"：折线图左下角的label
LineDataSet lineDataSet = new LineDataSet(lineEntries, "新闻点赞数量");
// 设置数据线宽
lineDataSet.setLineWidth(6f);
// 设置数据旁圆点
lineDataSet.setCircleRadius(4f);
// 设置数据旁圆点颜色
lineDataSet.setCircleColor(Color.BLACK);
// 设置标签, 这里覆盖了上面LineDataSet构造中的二参数据，替换label
lineDataSet.setLabel("lingNi");
// 设置数据柱体颜色
lineDataSet.setColor(Color.BLACK);
// 设置数据字体颜色
lineDataSet.setValueTextColor(Color.GRAY);
// 设置数据字体大小
lineDataSet.setValueTextSize(10);
// 设置数据线上显示的数据文本， 可以自己实现ValueFormatter
// 也可以使用ValueFormatter的继承类
lineDataSet.setValueFormatter(new ValueFormatter() {
@Override
public String getFormattedValue(float value) {
return "新闻" + ((int) value + 1);
}
});
// 折线图内数据的各种设置用lineDataSet
LineData lineData = new LineData(lineDataSet);
// 设置x轴在图底部，默认的x轴在图上面，将它设为下面
line.getXAxis().setPosition(XAxis.XAxisPosition.BOTTOM);
// 设置x轴在底部的数据格式，这里用到了ValueFormatter的继承类
// lineTitles：上面的字符串集合
line.getXAxis().setValueFormatter(new IndexAxisValueFormatter(lineTitles));
// 是否绘制x轴方向的网格线，默认为true
line.getXAxis().setDrawGridLines(true);
// 设置x轴上字体颜色
line.getXAxis().setTextColor(Color.GRAY);
// 设置x轴字体大小
line.getXAxis().setTextSize(12);
// 设置x轴宽度和轴背景颜色
line.getXAxis().setAxisLineWidth(12);
line.getXAxis().setAxisLineColor(Color.GREEN);
// x轴网格使用虚线显示
line.getXAxis().enableGridDashedLine(10, 10, 0);
// 设置右边的y轴不显示,默认的y轴左右边都会显示数据
line.getAxisRight().setEnabled(false);
// 设置y轴宽度和轴背景颜色
line.getAxisLeft().setAxisLineWidth(12);
line.getAxisLeft().setAxisLineColor(Color.RED);
// 设置右下角的描述文字不显示
line.getDescription().setEnabled(false);
// 可自己定制文字描述
Description description = new Description();
description.setText("hhh");
description.setTextColor(Color.YELLOW);
line.setDescription(description);
// 设置折线图背景颜色
line.setBackgroundColor(Color.WHITE);
// 折线图无数据时显示的文字描述
line.setNoDataText("暂无数据");
// 是否启用拖拽
line.setDragEnabled(true);
// 折线图是否可以缩放
line.setScaleEnabled(true);
// 绘制折线图上边以及右边的边框
line.setDrawBorders(true);
// 启用触摸
line.setTouchEnabled(true);
// 启用捏合缩放
line.setPinchZoom(true);
// 设置数据
line.setData(lineData);
条形图
使用和折线图基本类似
// 设置BarEntry数据集
ArrayList<BarEntry> barEntries = new ArrayList<>();
for (int i = 0; i < 8; i++) {
barEntries.add(new BarEntry(i, random.nextInt(100)));
}
// barEntries：BarEntry集合
// "新闻推荐数量"：折线图左下角的label
BarDataSet barDataSet = new BarDataSet(barEntries, "新闻推荐数量");
barDataSet.setValueTextColor(Color.GRAY);
barDataSet.setValueTextSize(12);
barDataSet.setValueFormatter(new ValueFormatter() {
@Override
public String getFormattedValue(float value) {
return "推荐值" + (int) value;
}
});
barDataSet.setColor(Color.RED);
BarData barData = new BarData(barDataSet);
// 这里是设置柱体的宽度，在bardata中的api
barData.setBarWidth(0.3f);
bar.getXAxis().setPosition(XAxis.XAxisPosition.BOTTOM);
bar.getXAxis().setValueFormatter(new IndexAxisValueFormatter(lineTitles));
bar.getXAxis().setTextColor(Color.parseColor("#1755FB"));
bar.getXAxis().setTextSize(12f);
bar.getXAxis().setAxisLineWidth(5f);
bar.getXAxis().setAxisLineColor(Color.parseColor("#6200EE"));
bar.getAxisRight().setEnabled(false);
bar.getAxisLeft().setAxisLineWidth(4f);
bar.getAxisLeft().setAxisLineColor(Color.parseColor("#6200EE"));
bar.getDescription().setEnabled(false);
// 禁止图缩放
bar.setScaleEnabled(false);
bar.setData(barData);
横向条形图
这里引用的data数据和条形图一致都是BarData
hBar.setData(barData);
hBar.getXAxis().setPosition(XAxis.XAxisPosition.BOTTOM);
hBar.getXAxis().setValueFormatter(new IndexAxisValueFormatter(lineTitles));
hBar.getXAxis().setTextColor(Color.parseColor("#1755FB"));
hBar.getXAxis().setTextSize(12);
hBar.getXAxis().setAxisLineWidth(5);
hBar.getXAxis().setAxisLineColor(Color.parseColor("#6200EE"));
// 因为变为横向了，所以要禁用y轴左边的数据，也就是显示在上方的数据
hBar.getAxisLeft().setEnabled(false);
// 此时设置右边的数据属性
hBar.getAxisRight().setAxisLineColor(Color.parseColor("#6200EE"));
// 默认的底部的横向过来的右y轴的第一个数据不显示
// 原因是默认的最小值为0，第一个标记就位于原点上,所以不会显示出来
// 解决是通过设置一个大于0的最小值,第一个标记就不在原点上,就可以正常显示了
// 注意这里用的并不是setAxisMaximum()api，而是给它的属性设置值
hBar.getAxisRight().mAxisMinimum = 1f;
hBar.getDescription().setEnabled(false);
hBar.setScaleEnabled(false);
hBar.setDragEnabled(true);
hBar.setData(barData);
结合图
// 先设置要包含那些类型的图
com.setDrawOrder(new CombinedChart.DrawOrder[]{
CombinedChart.DrawOrder.BAR,
CombinedChart.DrawOrder.LINE
});
// 设置要包含的类型的图的数据
CombinedData combinedData = new CombinedData();
combinedData.setData(lineData);
combinedData.setData(barData);
com.getXAxis().setPosition(XAxis.XAxisPosition.BOTTOM);
com.getXAxis().setValueFormatter(new IndexAxisValueFormatter(lineTitles));;
com.getAxisRight().setEnabled(false);
com.getDescription().setEnabled(false);
// 解决最左边和最右边的柱体显示一半的问题
// 原因是当LineChart的数据范围超出BarChart时,BarChart第一个和最后一个数据的显示会受到影响而不完整
// 解决是给barcahrt也就是x轴的最大值和最小值的数据范围增大，让它显示全
com.getXAxis().setAxisMaximum(8);
com.getXAxis().setAxisMinimum(-1);
com.setData(combinedData);
饼图
ArrayList<PieEntry> pieEntries = new ArrayList<>();
for (int i = 0; i < 6; i++) {
pieEntries.add(new PieEntry(10, "点赞"));
}
PieDataSet pieDataSet = new PieDataSet(pieEntries, "新闻点赞数");
// 设置扇形之间的间距
pieDataSet.setSliceSpace(2f);
// 设置选中的扇形突出外面的高亮偏移量
pieDataSet.setSelectionShift(10f);
// 设置扇形的颜色，可利用Android自带的ColorTemplate的颜色集合
pieDataSet.setColors(ColorTemplate.MATERIAL_COLORS);
// 也可自己定制颜色设置
//int[] integers = {R.color.black, R.color.grey_113};
//List<Integer> colors = ColorTemplate.createColors(integers);
// 数据连接线距图形片内部边界的距离，为百分数
pieDataSet.setValueLinePart1OffsetPercentage(80f);
// 设置数据连接线的颜色
pieDataSet.setValueLineColor(Color.RED);
// 设置连接线在饼状图外面
pieDataSet.setXValuePosition(PieDataSet.ValuePosition.OUTSIDE_SLICE);
pieDataSet.setYValuePosition(PieDataSet.ValuePosition.OUTSIDE_SLICE);
PieData pieData = new PieData(pieDataSet);
// 设置饼图中心区域的颜色
pie.setHoleColor(Color.BLUE);
// 设置中心圈的半径，如果为零，将显示全扇形，默认不会显示
pie.setHoleRadius(0f);
// 是否绘制中心圈，默认绘制true
pie.setDrawHoleEnabled(false);
// 初始旋转的度数 90度
pie.setRotationAngle(90);
// 设置扇形为圆角
//pie.setDrawRoundedSlices(true);
pie.getDescription().setEnabled(false);
// 设置pie图表是否可以手动旋转
//pie.setRotationEnabled(false);
// 设置pie图表点击Item高亮是否可用
//pie.setHighlightPerTapEnabled(true);
//设置pieChart是否只显示饼图上百分比不显示文字
//pie.setDrawEntryLabels(true);
// 绘制内容value，设置value字体颜色大小
pieData.setDrawValues(true);
pieData.setValueTextSize(10f);
pieData.setValueTextColor(Color.RED);
// 启用数据百分比
pieData.setValueFormatter(new PercentFormatter(pie));
// 设置label字体颜色大小
pie.setEntryLabelColor(Color.RED);
pie.setEntryLabelTextSize(12);
// 启用数据百分比
pie.setUsePercentValues(true);
pie.setData(pieData);
// 更新 pie 视图
pie.postInvalidate();
雷达图
ArrayList<RadarEntry> radarEntries = new ArrayList<>();
for (int i = 0; i < 8; i++) {
radarEntries.add(new RadarEntry(i));
}
RadarDataSet radarDataSet = new RadarDataSet(radarEntries, "阅读量");
RadarData radarData = new RadarData(radarDataSet);
radar.getDescription().setEnabled(false);
// 数据轴线条颜色
radarDataSet.setColor(Color.RED);
// 填充颜色
radarDataSet.setFillColor(Color.CYAN);
// 填充透明度
radarDataSet.setFillAlpha(180);
// 填充多边形
radarDataSet.setDrawFilled(true);
// 网格线宽
radar.setWebLineWidth(1f);
radar.getXAxis().setTextSize(8);
radar.getYAxis().setTextSize(8);
// X轴文本红色
radar.getXAxis().setTextColor(Color.RED);
// X轴网格虚线
//radar.getXAxis().enableGridDashedLine(10f, 0f, 0f);
// 启用旋转
radar.setRotationEnabled(true);
// 默认旋转10度
radar.setRotationAngle(10);
// 单击高亮
radar.setHighlightPerTapEnabled(true);
// 拖拽高亮
radar.setDragDecelerationEnabled(true);
radar.setData(radarData);
总结：大部分的属性api都相同，所以很好记
732
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
