mpandroidchart组合图_MPAndroidChart绘制曲线图、柱状图总结

前言

图表绘制可能是我们项目开发过程中比较常见的需求，简单点儿的需求，我们通过自定义控件就能完成，但是像那种比较复杂的图表，通过自定义的方式实现起来就比较麻烦了，这个时候，我们就需要借助第三方的开源库来实现。

Android 平台绘图的开源库有好几个，最成熟最出名的就属于MPAndroidChart了，他能帮我们实现曲线图、折线图、柱状图、饼状图，分布图等等。同时还可以实现混合图表。

曲线图

曲线图.png

下方填充曲线图，可以设置纯色和渐变色

image.png

image.png

混合图表

混合图表.png

柱状图

柱状图.png

如上所示，实现的图表种类非常多，还没有列举完全，功能非常强大，正好最近在项目中有使用到MPAndroidChart，在此做一个总结。

项目中使用效果截图如下：

项目截图.png

基础设置相关API

Chart 的基础设置

// 设置是否绘制背景

mChart.setDrawGridBackground(false);

// 设置是否绘制边框

mChart.setDrawBorders(false);

// 设置是否可以缩放图表

mChart.setScaleEnabled(true);

// 设置是否可以用手指移动图表

mChart.setDragEnabled(true);

注意：这里说一下后面2个属性setScaleEnabled和setDragEnabled,设置图表是佛可以缩放和移动，当手机屏幕一屏显示不下时，我们希望能通过缩放或者滑动图表。但是经过试验，仅仅设置这两个属性是不行的，还需要配合Matrix来实现，代码如下：

Matrix matrix = new Matrix();

// x轴放大4倍，y不变

matrix.postScale(4.0f, 1.0f);

// 设置缩放

mChart.getViewPortHandler().refresh(matrix, mChart, false);

2，图表描述相关设置

// 不显示描述数据

mChart.getDescription().setEnabled(true);

mChart.getAxisRight().setEnabled(false);

// 设置描述

mChart.getDescription().setText("text desc");

// 设置描述显示的位置，默认是显示在图表的右下角的

mChart.getDescription().setPosition(200,100);

image.png

3，是否显示右侧y轴

mChart.getAxisRight().setEnabled(false);

image.png

4, 图例相关设置

Legend legend = mChart.getLegend();

//是否显示

legend.setEnabled(true);

//图例样式：有圆点，正方形，短线 几种样式

legend.setForm(Legend.LegendForm.CIRCLE);

// 图例显示的位置：如下2行代码设置图例显示在左下角

legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.LEFT);

legend.setVerticalAlignment(Legend.LegendVerticalAlignment.BOTTOM);

// 图例的排列方式：水平排列和竖直排列2种

legend.setOrientation(Legend.LegendOrientation.HORIZONTAL);

// 图例距离x轴的距离

legend.setXEntrySpace(10f);

//图例距离y轴的距离

legend.setYEntrySpace(10f);

//图例的大小

legend.setFormSize(7f);

// 图例描述文字大小

legend.setTextSize(10);

5，x轴先关设置

XAxis xAxis = mChart.getXAxis();

// 是否显示x轴线

xAxis.setDrawAxisLine(true);

// 设置x轴线的颜色

xAxis.setAxisLineColor(Color.parseColor("#4cffffff"));

// 是否绘制x方向网格线

xAxis.setDrawGridLines(false);

//x方向网格线的颜色

xAxis.setGridColor(Color.parseColor("#30FFFFFF"));

// 设置x轴数据的位置

xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);

// 设置x轴文字的大小

xAxis.setTextSize(12);

// 设置x轴数据偏移量

xAxis.setYOffset(5);

final List labels = mLabels;

// 显示x轴标签

IAxisValueFormatter formatter = new IAxisValueFormatter() {

@Override

public String getFormattedValue(float value, AxisBase axis) {

int index = (int) value;

if (index < 0 || index >= labels.size()) {

return "";

}

return labels.get(index);

// return labels.get(Math.min(Math.max((int) value, 0), labels.size() - 1));

}

};

// 引用标签

xAxis.setValueFormatter(formatter);

// 设置x轴文字颜色

xAxis.setTextColor(mChart.getResources().getColor(R.color.char_text_color));

// 设置x轴每最小刻度 interval

xAxis.setGranularity(1f);

6，y轴先关设置

YAxis yAxis = mChart.getAxisLeft();

//设置x轴的最大值

yAxis.setAxisMaximum(yMax);

// 设置y轴的最大值

yAxis.setAxisMinimum(yMin);

/