MPAndroidChart 3.0——BarChart（一）
16lz
2021-01-26
概要
Github: MPAndroidChart
MPAndroidChart 是 一个强大的 Android图表视图/图表视图库，支持线条 - 饼图 - 雷达 - 气泡和烛台图表以及缩放，拖动和动画。
使用
我们先从简单的 BarChart （条形图）开始使用。（MPAndroidChart 2.版本和 3.版本。部分 API 有所改变）
Gradle
Project level build.gradleallprojects { repositories { maven { url 'https://jitpack.io' } }}App level build.gradledependencies { 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 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
源码传送门
感谢阅读。下次再见。
更多相关文章
- Android面试时的问题,实现半透明的popupwindow的源码
- Android(安卓)给Button加个监听
- android 动画 ——视图动画(View Animation)
- Android线程优先级规定及其设置的具体方法
- Android(安卓)Browser 支持屏蔽webaudio的功能
- Android(安卓)GridView等控件的属性集合
- Android(安卓)学习笔记——旋转模拟器方向，全屏，窗口生命周期
- Android(安卓)乱码
- android webview 缩放及换行