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 在app module的build.gradle中添加一下依赖
dependencies { implementation 'com.github.PhilJay:MPAndroidChart:v3.0.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);
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);
}
});
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 "";
}
}
});
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);
6、常见问题
6.1 x轴右或者侧文字被覆盖,设置chartview的间隔
lineChart.setExtraRightOffset(25f);
lineChart.setExtraLeftOffset(10f);
// 这个虽然也是但是效果不好
//如果设置为true,则在绘制时会避免“剪掉”在x轴上的图表或屏幕边缘的第一个和最后一个坐标轴标签项。
// xAxis.setAvoidFirstLastClipping(true);
6.2 给坐标设置图片icon,
Entry e = new Entry((float) i, dataBean.networth,getResources().getDrawable(R.drawable.icon_dot));
可以下载对应的demo代码 :http://download.csdn.net/download/lsyz0021/10218467