MPAndroidChart使用教程
转载请标注原创文章地址：http://blog.csdn.net/lsyz0021/article/details/79132045
MPAndroidChart功能特别强大，使用的人也特别多，今天我就以LineChart为例来讲解他的使用。本文分两部分，一部分是基本的使用，另一部分是MarkView的使用
一、MPAndroidChart的教程(一) LineChart的使用
二、MPAndroidChart的教程(二) MarkView的使用
我们先看看效果是什么样的，这里数据是随便造的……
1、添加依赖
首先打开MPChartView的GitHub地址，打开后我们依赖到AndroidStudio中
1.1、在project的build.gradle文件配置添加一下内容
allprojects { repositories { maven { url "https://jitpack.io" } }}
- 1
- 2
- 3
- 4
- 5
1.2 在app module的build.gradle中添加一下依赖
dependencies { implementation 'com.github.PhilJay:MPAndroidChart:v3.0.3'}
- 1
- 2
- 3
2 设置chart view
lineChart.getLegend().setEnabled(false);// 不显示图例lineChart.getDescription().setEnabled(false);// 不显示描述lineChart.setScaleEnabled(false); // 取消缩放lineChart.setNoDataText("暂无数据");// 没有数据的时候默认显示的文字lineChart.setNoDataTextColor(Color.GRAY);lineChart.setBorderColor(Color.BLUE);lineChart.setTouchEnabled(true);lineChart.setDragEnabled(true);// 如果x轴label文字比较大，可以设置边距lineChart.setExtraRightOffset(25f);lineChart.setExtraBottomOffset(10f);lineChart.setExtraTopOffset(10f);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
3、设置Y轴(此处Y轴显示为金额)
// 设置左侧Y轴显示金额的格式private DecimalFormat mDecimalFormat = new DecimalFormat("##,##0.0#");// 不显示右侧Y轴YAxis yAxisRight = lineChart.getAxisRight();yAxisRight.setEnabled(false);YAxis yAxisLeft = lineChart.getAxisLeft();// 强制显示Y轴6个坐标yAxisLeft.setLabelCount(5, true);// 将y轴0点轴的颜色设置为透明yAxisLeft.setZeroLineColor(Color.WHITE);yAxisLeft.setTextColor(Color.parseColor("#8F8E94"));yAxisLeft.setTextSize(10);//不显示最顶部的label//yAxisRight.setDrawTopYLabelEntry(false);// 设置y轴网格的颜色yAxisLeft.setGridColor(Color.parseColor("#8F8E94"));// yAxisLeft.setGranularity(0.5f);yAxisLeft.setAxisMaximum(0.0f);//Y方向文字的位置，在线外侧.(默认在外侧)yAxisLeft.setPosition(YAxis.YAxisLabelPosition.OUTSIDE_CHART);//设置label偏移量，正值向下，负值向上// yAxisLeft.setYOffset(-10f); // 格式化Y轴数据yAxisLeft.setValueFormatter(new IAxisValueFormatter() { @Override public String getFormattedValue(float v, AxisBase axisBase) { return mDecimalFormat.format(v); }});
- 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
4、设置X轴(此处X轴显示为日期)
// 设置x轴的数据XAxis xAxis = lineChart.getXAxis();xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);xAxis.setTextColor(Color.parseColor("#8F8E94"));xAxis.setTextSize(10);// 设置x轴网格的颜色xAxis.setGridColor(Color.parseColor("#8F8E94"));xAxis.setGranularity(1.0f);//如果设置为true，则在绘制时会避免“剪掉”在x轴上的图表或屏幕边缘的第一个和最后一个坐标轴标签项。// xAxis.setAvoidFirstLastClipping(true);// x轴最左多出空n个坐标// xAxis.setSpaceMax(1.0f);// 让左侧x轴不从0点开始// xAxis.setSpaceMin(0.1f);// 获取到数据后，格式化x轴的数据xAxis.setValueFormatter(new IAxisValueFormatter() { @Override public String getFormattedValue(float v, AxisBase axisBase) { int i = (int) v; // 只显示首尾日期 if (i == 0 || i == mXData.size() - 1) { return mXData.get(i); } else { return ""; } }});
- 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
5、设置数据
// 获取的坐标数据集合List<Entry> entries = new ArrayList<>();// 创建数据的包装类LineDataSet lineDataSet = new LineDataSet(entries, null);// 点击圆点不显示高亮lineDataSet.setDrawHighlightIndicators(false);// 设置折线的颜色lineDataSet.setColor(Color.parseColor("#FC863E"));// 填充颜色(渐变色)lineDataSet.setDrawFilled(true);lineDataSet.setFillDrawable(new GradientDrawable(GradientDrawable.Orientation.TOP_BOTTOM, new int[]{Color.parseColor("#31FF5A00"), Color.parseColor("#00FA5544")}));lineDataSet.setLineWidth(2f);// 坐标不显示值lineDataSet.setDrawValues(false);lineData data = new LineData(lineDataSet);lineChart.setData(data);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
6、常见问题
6.1 x轴右或者侧文字被覆盖，设置chartview的间隔
lineChart.setExtraRightOffset(25f);lineChart.setExtraLeftOffset(10f);// 这个虽然也是但是效果不好//如果设置为true，则在绘制时会避免“剪掉”在x轴上的图表或屏幕边缘的第一个和最后一个坐标轴标签项。// xAxis.setAvoidFirstLastClipping(true);
- 1
- 2
- 3
- 4
- 5
6.2 给坐标设置图片icon，
Entry e = new Entry((float) i, dataBean.networth,getResources().getDrawable(R.drawable.icon_dot));
- 1
可以下载对应的demo代码 ：http://download.csdn.net/download/lsyz0021/10218467
拿出微信 扫码关注下面的微信订阅号，及时获取更多推送文章
再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow