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 条形图

<?xml version="1.0" encoding="utf-8"?>
<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<String> 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

源码传送门

感谢阅读。下次再见。