MPAndroidChart强大而且易用的图表库

杨子翎
839 阅读4分钟

介绍：MPAndroidChart图表库非常强大且易用。

支持柱状图、线性图、蛛网图、蜡烛图、散点图、气泡图等

支持缩放、拖拽、动画、选择等效果。

之前的项目中销售量统计图表有用到过，这两天整理一下，最基本的应用，以柱状图为例，后续会更新饼图，线性图。和大家共同学习，希望对大家有所帮助！

一、准备工作

在你的项目的build.gradle文件中配置：

   maven{ url "https://jitpack.io"}
   效果如下：
 allprojects {
 repositories {
  jcenter()
   maven { url "https://jitpack.io" }
  }
}

在你的App的build.gradle中配置：

dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
exclude group: 'com.android.support', module: 'support-annotations'
})
compile 'com.android.support:appcompat-v7:25.3.1'
compile 'com.android.support.constraint:constraint-layout:1.0.2'
testCompile 'junit:junit:4.12'
compile 'com.github.PhilJay:MPAndroidChart:v3.0.3'//数据图表框架
}

国际惯例先来展示下效果图：

二、具体应用

首先我们要清楚，首先柱状图需要哪些东西：

  1. 展示的数据
  2. 设置数据到控件中
  3. 将图标展示出来

布局代码

<com.github.mikephil.charting.charts.BarChart
android:id="@+id/barChart"
android:layout_width="match_parent"
android:layout_height="300dp">
</com.github.mikephil.charting.charts.BarChart>

Activity中

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mBarChart = (BarChart) findViewById(R.id.barChart);
mButton = (Button) findViewById(R.id.button);
mLineChart = (Button) findViewById(R.id.lineChart);
mPieChart = (Button) findViewById(R.id.pieChart);
mRadarChart = (Button) findViewById(R.id.radarChart);
mButton.setOnClickListener(this);
mLineChart.setOnClickListener(this);
mPieChart.setOnClickListener(this);
mRadarChart.setOnClickListener(this);
//初始化添加的data数据
initEntriesData();
//展示图表
showBarChart();
}

接着我们创建一个集合存放BarEntry对象

//数据集合
public ArrayList<BarEntry> entries = new ArrayList<BarEntry>();

在onCreate方法中对应的两个方法：

初始化数据方法：

  //初始化数据
  private void initEntriesData() {
entries.add(new BarEntry(0f, 400f));
entries.add(new BarEntry(1f, 800f));
entries.add(new BarEntry(2f, 600f));
entries.add(new BarEntry(3f, 1200f));
entries.add(new BarEntry(4f, 1800f));
entries.add(new BarEntry(5f, 900f));
entries.add(new BarEntry(6f, 500f));
entries.add(new BarEntry(7f, 600f));
entries.add(new BarEntry(8f, 700f));
entries.add(new BarEntry(9f, 1200f));
entries.add(new BarEntry(10f, 1900f));
entries.add(new BarEntry(11f, 2000f));
}

图表展示方法：

//展示图表
private void showBarChart() {
//装载显示数据
dataset = new BarDataSet(entries, "课程销量(套)");
dataset.setColors(ColorTemplate.COLORFUL_COLORS);
BarData data = new BarData(dataset);
//自定义X轴
CustomXFormatter customXFormatter = new CustomXFormatter(values);
//设置X轴的属性
XAxis xAxis = mBarChart.getXAxis();
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
xAxis.setEnabled(true);
xAxis.setDrawAxisLine(true);
xAxis.setLabelCount(6, false);
xAxis.setValueFormatter(customXFormatter);
//设置是否绘制网格线
xAxis.setDrawGridLines(false);
//设置Y轴属性
YAxis yAxis = mBarChart.getAxisLeft();
yAxis.setStartAtZero(true);
yAxis.setPosition(YAxis.YAxisLabelPosition.OUTSIDE_CHART);
yAxis.setLabelCount(6, false);
//右侧Y轴关闭
mBarChart.getAxisRight().setEnabled(false);
mBarChart.animateY(2000);
/**
 * 设置默认文字
 * 版本2.*版本的有可以直接设置的方法
 * 但是版本3.*我们可以在这里设置
 */
Description description = new Description();
description.setText("柱状图");
mBarChart.setDescription(description);
//设置比例图
Legend mLegend = mBarChart.getLegend();
mLegend.setPosition(Legend.LegendPosition.BELOW_CHART_CENTER);//设置显示位置
//设置是否显示比例图
mLegend.setEnabled(true);
mBarChart.setData(data);
mBarChart.setFitBars(true);
mBarChart.invalidate();

这里说一下这里遇到的一些小问题：

我们现在用的是V3.0.3版本，这个版本X轴上没有提供写String类型的刻度。

默认的是数字：

我这里做了个简单处理：

自定义一个CuntomXFormatter类，实现IAxisValueFormatter接口。

public class CustomXFormatter implements IAxisValueFormatter {
    private String[] mValues;
    private ArrayList<String> xArrayValues;
    public CustomXFormatter(String[] values) {
    this.mValues = values;
    }
@Override
public String getFormattedValue(float value, AxisBase axis) {
    return mValues[(int) value % mValues.length];
    }
}

在展示图标的时候调用

这里声明一个数组

protected String[] values = new String[]{
"一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"
};
//自定义X轴
CustomXFormatter customXFormatter = new CustomXFormatter(values);
xAxis.setValueFormatter(customXFormatter);

这里还有右下角的图标名：

版本2.2.3上可以直接设置文字

//设置右下角表文字

mBarChart.setDescription("柱状图");

但是在版本3.0.3没有提供直接设置String类型的方法

/**
* 设置默认文字 2.*版本的有可以直接设置的方法
* 3.*版本我们可以在这里设置
*/
Description description = new Description();
description.setText("柱状图");
mBarChart.setDescription(description);

这样我们就可以设置图标的名称啦！

我们可以设置显示各个柱状图的比例图以及显示的位置，效果如下：

//设置比例图
Legend mLegend = mBarChart.getLegend();
//设置显示位置
mLegend.setPosition(Legend.LegendPosition.BELOW_CHART_CENTER);
//设置是否显示比例图
mLegend.setEnabled(true);

这样就可以达到我们想要的效果啦！

在github上图标库的地址：https://github.com/PhilJay/MPAndroidChart.git

三、这里再简单的介绍下v2.2.3版本设置X轴String类型的数据

//创建一个String类型的集合
public ArrayList<String> labels = new ArrayList<String>();
//横轴数据初始化
private void initLabData() {
labels.add("一月");
labels.add("二月");
labels.add("三月");
labels.add("四月");
labels.add("五月");
labels.add("六月");
labels.add("七月");
labels.add("八月");
labels.add("九月");
labels.add("十月");
labels.add("十一月");
labels.add("十二月");
}

在展示图标方法showBarChart中添加

//封装x轴数据
BarData data = new BarData(labels, dataset);

这样即可实现X轴上显示String类型的刻度。

在我的github上面已经上传了这两个版本的demo 项目源码：https://github.com/yangziling/MPAndroidChartDemo.git

欢迎大家积极留言，一起学习，共同进步！ 关注职场黑手杨，会持续有原创推送分享！

欢迎转发，分享！长按识别二维码关注

avatar
文章
阅读
粉丝