MPAndroidChart的教程(一) LineChart的使用（by 星空武哥）

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

拿出微信 扫码关注下面的微信订阅号，及时获取更多推送文章