MPAndroidChart 3.0——BarChart（一）
概要
Github: MPAndroidChart
MPAndroidChart 是 一个强大的 Android图表视图/图表视图库，支持线条 - 饼图 - 雷达 - 气泡和烛台图表以及缩放，拖动和动画。
使用
我们先从简单的 BarChart （条形图）开始使用。（MPAndroidChart 2.版本和 3.版本。部分 API 有所改变）
Gradle
Project level build.gradle
allprojects {
repositories {
maven { url 'https://jitpack.io' }
}
}
App level build.gradle
dependencies {
implementation 'com.github.PhilJay:MPAndroidChart:v3.0.3'
}
MainActivity 创建一个 Button 跳转到 BarChartActivity，这里省略MainActivity 跳转代码（有需要可以直接看源码），直接看 BarChartActivity。在 BarChartActivity 的 xml 布局创建一个 BarChart 条形图
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.github.mikephil.charting.charts.BarChart
android:id="@+id/bar_chart"
android:layout_width="match_parent"
android:layout_height="match_parent">
com.github.mikephil.charting.charts.BarChart>
LinearLayout>
BarChartActivity
package zqx.rj.com.mpandroidchartdemo.charts;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import com.github.mikephil.charting.charts.BarChart;
import com.github.mikephil.charting.components.XAxis;
import com.github.mikephil.charting.components.YAxis;
import com.github.mikephil.charting.data.BarData;
import com.github.mikephil.charting.data.BarDataSet;
import com.github.mikephil.charting.data.BarEntry;
import java.util.ArrayList;
import zqx.rj.com.mpandroidchartdemo.R;
public class BarChartActivity extends AppCompatActivity {
private BarChart mBarChart;
private BarData mBarData;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_bar_chart);
initView();
initData();
initBarChart();
}
private void initView() {
mBarChart = findViewById(R.id.bar_chart);
}
private void initData() {
// y 轴数据
ArrayList<BarEntry> yValues = new ArrayList<>();
// 2.0 ----x 轴数据
// ArrayList xValues = new ArrayList<>();
for (int x = 0; x < 30; x++) {
// 2.0 ----xValues.add(String.valueOf(i));
float y = (float) (Math.random() * 30);
yValues.add(new BarEntry(x, y));
}
// y 轴数据集
BarDataSet barDataSet = new BarDataSet(yValues, "条形图");
// 2.0 ---- mBarData = new BarData(xValues, barDataSet);
mBarData = new BarData(barDataSet);
}
private void initBarChart() {
mBarChart.setData(mBarData);
}
}
效果图
运行结果如图。通过设置 x轴 数据，y 轴数据（随机模拟30条），BarDataSet（）第二个参数是设置该 yValues 数据的标签。然后就可以简单显示原始的条形图。注释 都是 2.0版本 以前的写法 可以忽略。
配置 BarChart
我们在通过设置 BarChart 参数使得 BarChart 符合我们业务 需求。在 initBarChart（）中添加如下代码
// 设置 条形图 简介
Description description = new Description();
// 可以自定义 位置
// description.setPosition(200, 200);
// 也可以 根据 X 轴，Y 轴进行偏移量设置
description.setXOffset(50f);
description.setYOffset(10f);
description.setText("我是 description");
mBarChart.setDescription(description);
// 设置 是否可以缩放
mBarChart.setScaleEnabled(false);
// 设置 柱子的宽度
// mBarData.setBarWidth(2f);
// 获取 x 轴
XAxis xAxis = mBarChart.getXAxis();
// 设置 x 轴显示位置
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
// 取消 垂直 网格线
xAxis.setDrawGridLines(false);
// 设置 x 轴 坐标旋转角度
xAxis.setLabelRotationAngle(10f);
// 设置 x 轴 坐标字体大小
xAxis.setTextSize(10f);
// 设置 x 坐标轴 颜色
xAxis.setAxisLineColor(Color.RED);
// 设置 x 坐标轴 宽度
xAxis.setAxisLineWidth(2f);
// 设置 x轴 的刻度数量
xAxis.setLabelCount(10);
// 获取 右边 y 轴
YAxis mRAxis = mBarChart.getAxisRight();
// 隐藏 右边 Y 轴
mRAxis.setEnabled(false);
// 获取 左边 Y轴
YAxis mLAxis = mBarChart.getAxisLeft();
// 取消 左边 Y轴 坐标线
mLAxis.setDrawAxisLine(false);
// 取消 横向 网格线
mLAxis.setDrawGridLines(false);
// 设置 Y轴 的刻度数量
mLAxis.setLabelCount(10);
具体的用法注释已经说明了。需要注意的是 这里的 Y 轴不是从零开始，如果需要可以如下设置
mLAxis.setAxisMinimum(0f);
可能上述需求还不能满足，有可能我们需要绘制多条柱状图。或者是堆叠图。
更多
1、堆叠条形图 （Stacked BarChart）
修改 initData() 方法 ，如下
private void initData() {
// y 数据
ArrayList<BarEntry> yValues = new ArrayList<>();
for (int x = 0; x < 30; x++) {
float y = (float) (Math.random() * 30) + 10;
float y2 = (float) (Math.random() * 30) + 10;
// 同一个x 不同 y 值。
yValues.add(new BarEntry(x, new float[]{y, y2}));
}
// y 轴数据集
BarDataSet barDataSet = new BarDataSet(yValues, "我是Label");
// 设置 对应数据 颜色
barDataSet.setColors(Color.RED, Color.GREEN);
mBarData = new BarData(barDataSet);
}
在这里，我们新添加了一个 y2 的数据，在同一个 x 坐标下，设置 两个y 值（new float[ ]{y, y2}），并分别设置为 y 和 y2 的颜色加以区分。就可以实现如图堆叠条形图
2、分组条形图（Grouped BarChart）
修改 initData（）方法如下
private void initData(){
// y 数据
ArrayList<BarEntry> yValues = new ArrayList<>();
// y2 数据
ArrayList<BarEntry> yValues2 = new ArrayList<>();
for (int x = 0; x < 10; x++) {
float y = (float) (Math.random() * 30) + 10;
yValues.add(new BarEntry(x, y));
float y2 = (float) (Math.random() * 30) + 10;
yValues2.add(new BarEntry(x, y2));
}
// y 轴数据集
BarDataSet barDataSet = new BarDataSet(yValues, "我是红色");
barDataSet.setColor(Color.YELLOW);
// y2 轴数据集
BarDataSet barDataSet2 = new BarDataSet(yValues2, "我是绿色");
barDataSet2.setColor(Color.GREEN);
mBarData = new BarData(barDataSet, barDataSet2);
}
然后再设置 BarChart 分组
float groupSpace = 0.06f;
float barSpace = 0.02f;
float barWidth = 0.45f;
// 设置 柱子宽度
mBarData.setBarWidth(barWidth);
mBarChart.groupBars(0.0f, groupSpace, barSpace);
groupBars（）方法有三个参数分别是 fromX,、groupSpace、 barSpace 对应图中位置
最终效果
在这里，新添加了一组数据 yValues2 ，根据 yValues2 创建了 barDataSet2，并把barDataSet 和barDataSet2 设置进BarData 。最终实现如图效果。
需要注意的是
1、x 轴 默认起始不是 0
2、要想 x 轴坐标在分组居中
需要设置如下
// 设置 x 轴 从0开始 默认不是从 0
xAxis.setAxisMinimum(0);
// 设置 x 轴 坐标居中显示
xAxis.setCenterAxisLabels(true);
最后
我只是列举了一些常用的 API，如有更多需求，可以去 MPAndroidChart 官网进行API查询 https://github.com/PhilJay/MPAndroidChart/wiki/Setting-Data
源码传送门
感谢阅读。下次再见。