安卓图形之MPAndroidChart3.0详解三——柱状图（一）（属性篇）

1 前言

MPAndroidCHart中柱状图的使用与与折线图的使用大致相同，也是通过设置Legend，Description，XAxis，YAxis，BarDataset，BarSet和BarChart来达到我们想要的属性。本篇文章只是介绍了MPAndroidChart中柱状图最基本的做法，当然还有很多更其他用法，如多柱图，正负柱状图，堆叠柱状图等，想要了解的读者请转到：安卓图形之MPAndroidChart3.0详解三——柱状图（一）（案例篇）

2 基本使用

下面的这个demo仅仅只是演示了MPAndroidCahrt中柱状图最基本的使用，就只是简单的填充了数据，都是默认的样式

效果图

代码如下

public class Bar_Frag extends Fragment {

    private BarChart bc;

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.bar_frag,null);
    }

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);

        bc = view.findViewById(R.id.bc);

        loadData();

    }

    private void loadData() {
        List<BarEntry> barEntries = new ArrayList<BarEntry>();
        barEntries.add(new BarEntry(0,5));
        barEntries.add(new BarEntry(1,10));
        barEntries.add(new BarEntry(2,13));

        BarDataSet barDataSet = new BarDataSet(barEntries,"图例标题");
        BarData ba = new BarData(barDataSet);


        bc.setData(ba);
    }

}

下面将一一介绍BarChart的属性

3 属性介绍

BarCahrt大致可分为下面的6个部分

• Legend(图例)
• Description（描述/标题）
• YAxis（Y轴）
• XAxis（X轴）
• BarDataSet
• BarChart

3.1 Legend（图例），Description（描述/标题）

柱状图的Legend和Description的属性和饼状图的Legend和Description属性都是相同的，这里不做过多的描述，需要参考的读者可以点击：安卓图形之MPAndroidChart3.0详解二——饼状图，直接看效果：

代码如下

public class Bar_Frag extends Fragment {

    private BarChart bc;

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.bar_frag,null);
    }

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);

        bc = view.findViewById(R.id.bc);

        setLegend();

        setDesc();

        loadData();



    }


    private void setLegend() {
        //得到Legend对象
        Legend legend = bc.getLegend();
        //设置字体大小
        legend.setTextSize(18f);
        //设置排列方式
         legend.setVerticalAlignment(Legend.LegendVerticalAlignment.TOP);
        legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.LEFT);
        //设置图例的大小
        legend.setFormSize(15f);
    }

    public void setDesc(){
        //得到Description对象
        Description description = bc.getDescription();
        //设置文字
        description.setText("这是柱状图的标题");
        //设置文字大小
        description.setTextSize(18f);
        //设置偏移量

		// 获取屏幕中间x 轴的像素坐标
        WindowManager wm=(WindowManager)getActivity().getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics dm = new DisplayMetrics();
        wm.getDefaultDisplay().getMetrics(dm);
        float x = dm.widthPixels / 2;

        description.setPosition(x,50);
        //设置字体颜色
        description.setTextColor(Color.BLUE);
        //设置字体加粗
        description.setTypeface(Typeface.DEFAULT_BOLD);

    }

    private void loadData() {
        //为了看到更明显的效果，我这里设置了图形在上下左右四个方向上的偏移量
        bc.setExtraTopOffset(25);
        bc.setExtraLeftOffset(30);
        bc.setExtraRightOffset(100);
        bc.setExtraBottomOffset(50);

        List<BarEntry> barEntries = new ArrayList<BarEntry>();
        barEntries.add(new BarEntry(0,5));
        barEntries.add(new BarEntry(1,10));
        barEntries.add(new BarEntry(2,13));

        BarDataSet barDataSet = new BarDataSet(barEntries,"标题一");
        BarData ba = new BarData(barDataSet);

        bc.setData(ba);
    }
    
}

3.2 XAxis属性

XAxis可以理解为x轴。
相关属性

属性	注解
setPosition()	设置x轴是显示在顶部还是底部，XAxisPosition枚举值 ，可取值：TOP(默认值)：位于上方，TOP_INSIDE：位于上方并绘制在图形内部，BOTTOM：位于下方，BOTTOM_INSIDE：位于下方并绘制在图形内部，BOTH_SIDED：上下两边都显示轴
setLabelRotationAngle()	设置文字旋转的角度
setAxisMinimum()	设置最小值，可通过该属性设置与左边的距离
setAxisMinimum()	设置最大值
setLabelCount()	设置在x轴绘制标签的数量
setAxisLineColor()	设置靠近x轴第一条线的颜色
setAxisLineWidth()	设置绘制靠近x轴的第一条线的宽度
setDrawAxisLine()	是否绘制靠近x轴的第一条线，不受setDrawGridLines属性影响
setDrawGridLines()	是否绘制竖向的网格线
setGridColor()	设置竖向网格线的颜色
setGridLineWidth()	设置竖向网格线的宽度
setValueFormatter()	自定义格式，通过继承IAxisValueFormatter接口实现
setXOffset()	设置x轴在x方向上的偏移量
setYOffset()	设置x轴在y方向上的偏移量
setTextSize()	设置x轴字体大小
setTextColor()	设置x轴字体颜色
setCenterAxisLabels()	是否将x轴上的文字居中显示
setDrawLabels()	/是否绘制x轴上的标签
setGranularity()	设置间隔
setGranularityEnabled()	是否启用间隔
setEnabled()	是否绘制x轴

效果图如下

设置xAxis的代码如下

//该方法在OnCreate中直接调用即可，后面会给出完整代码
    private void setXAxis() {
    	//得到xAxis对象
        XAxis xAxis = bc.getXAxis();
        //设置x轴是显示在顶部还是底部，柱状图内还是外
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
        //设置文字旋转的角度
        xAxis.setLabelRotationAngle(60);
        //设置最小值，可通过该属性设置与左边的距离
        xAxis.setAxisMinimum(-0.5f);
        //设置最大值
        xAxis.setAxisMaximum(2.5f);
        xAxis.setLabelCount(3);
        //设置靠近x轴第一条线的颜色
        xAxis.setAxisLineColor(Color.RED);
        //设置绘制靠近x轴的第一条线的宽度
        xAxis.setAxisLineWidth(3f);
        //是否绘制横向的网格
        xAxis.setDrawGridLines(false);

        //自定义格式
        xAxis.setValueFormatter(new IAxisValueFormatter() {
            @Override
            public String getFormattedValue(float value, AxisBase axis) {
                int tep = (int) (value + 1);
                return "第" + tep + "月份";
            }
        });
        //设置x轴在y方向上的偏移量
        xAxis.setYOffset(10f);
        //设置x轴字体大小
        xAxis.setTextSize(16f);
        //设置x轴字体颜色
        xAxis.setTextColor(Color.GREEN);
        xAxis.setGranularity(1);
    }

3.3 YAxis属性

在柱状图中YAxis包括左测和右侧的两个轴
相关属性

属性	注解
setTextSize()	设置y轴的字体大小
setTextColor()	设置y轴的字体颜色
setTypeface()	设置y轴字体的类型，如加粗等,Typeface枚举值
setValueFormatter()	自定义样式，通过实现接口IAxisValueFormatter
setDrawTopYLabelEntry()	是否绘制最上面的那个标签
setAxisMinimum()	设置显示的最小值
setAxisMaximum	设置显示的最大值
setPosition()	设置标签是绘制在图形内部还是外部， YAxisLabelPosition枚举值
setAxisLineWidth()	设置靠近y轴第一条线的宽度
setAxisLineColor()	设置靠近y轴第一条线的颜色
setDrawAxisLine()	是否绘制靠近y轴的第一条线
setDrawGridLines()	是否绘制横向的网格
setGridColor()	设置横向网格的颜色
setGridLineWidth()	设置横向网格线的宽度
setGranularity()	设置文字在数学意义上的间隔
setGranularityEnabled()	是否可以绘制间隔
setXOffset()	设置y轴在x方向上的偏移量
setYOffset()	设置y轴在y方向上的偏移量
setLabelCount()	设置Y轴的标签数量
setEnabled()	是否启用

效果图

代码如下

    private void setYAxis() {
        //不显示右侧的y轴
        bc.getAxisRight().setEnabled(false);
        //得到左侧的y轴对象
        YAxis yAxis = bc.getAxisLeft();
        //是否绘制最上面的那个标签
        yAxis.setDrawTopYLabelEntry(false);

        yAxis.setAxisMinimum(0);
        yAxis.setAxisMaximum(20);
        //设置标签是绘制在图形内部还是外部， YAxisLabelPosition枚举值
        yAxis.setPosition(YAxis.YAxisLabelPosition.OUTSIDE_CHART);
        //设置靠近y轴第一条线的宽度
        yAxis.setAxisLineWidth(3f);
        //设置靠近y轴第一条线的颜色
        yAxis.setAxisLineColor(Color.RED);

        yAxis.setGridColor(Color.RED);
        //设置横向网格线的宽度
        yAxis.setGridLineWidth(2f);

        //设置y轴在x方向上的偏移量
        yAxis.setXOffset(15f);
        //设置y轴的字体大小
        yAxis.setTextSize(14f);
        //设置y轴的字体颜色
        yAxis.setTextColor(Color.BLACK);
        //设置y轴字体的类型，如加粗等
        yAxis.setTypeface(Typeface.DEFAULT_BOLD);
        //自定义样式
        yAxis.setValueFormatter(new IAxisValueFormatter() {
            @Override
            public String getFormattedValue(float value, AxisBase axis) {
                return value + " 万/元";
            }
        });
    }

3.4 BarDataSet属性

BarDataSet可以理解为所有的柱块
相关属性

属性	注解
setValueTextColor()	设置住块上文字的颜色
setValueTextSize()	设置住块上文字的大小
setValueTypeface ()	设置住块上文字的类型，如加粗，Typeface枚举值
setValueFormatter()	设置柱块上文字的格式,通过接口IValueFormatter实现
setBarBorderColor()	设置柱状图的边框颜色
setBarBorderWidth()	设置柱状图的边框大小，默认0
setColors()	依次设置每次柱块的颜色,int… colors
setHighLightColor()	设置高亮的颜色，效果不是很明显
setDrawValues()	是否绘制柱块上的文字
setAxisDependency()	设置数据是参照左侧的y轴还是右侧的y轴，AxisDependency枚举值，在绘制组合图的时候使用
setValues()	重新设置数据源，参数为List<BarEntry
notifyDataSetChanged()	当数据源发生改变，该方法自动触发，无需参数
setForm ()	设置图例的形状，如圆形，条形等
setDrawValues()	是否绘制柱状图上面显示的文字
setBarShadowColor()	设置柱状图的阴影颜色，把barChart.setDrawBarShadow(true)才有效果

效果图

代码如下

//该方法在OnCreate中直接调用即可，在下方会给出完整代码
   private void loadData() {
        //为了看到更明显的效果，我这里设置了图形在上下左右四个方向上的偏移量
        bc.setExtraTopOffset(25);
        bc.setExtraLeftOffset(30);
        bc.setExtraRightOffset(100);
        bc.setExtraBottomOffset(50);

        List<BarEntry> barEntries = new ArrayList<BarEntry>();
        barEntries.add(new BarEntry(0,5));
        barEntries.add(new BarEntry(1,10));
        barEntries.add(new BarEntry(2,13));

        BarDataSet barDataSet = new BarDataSet(barEntries,"标题一");

        //设置柱状图的边框颜色
        barDataSet.setBarBorderColor(Color.GREEN);
        //设置柱状图的边框大小，默认0
        barDataSet.setBarBorderWidth(5f);
        //依次设置每次柱块的颜色,int... 类型
        barDataSet.setColors(Color.RED,Color.BLUE,Color.MAGENTA);
        //设置住块上文字的颜色
        barDataSet.setValueTextColor(Color.RED);
        //设置住块上文字的大小
        barDataSet.setValueTextSize(16f);
        //设置住块上文字的类型，如加粗
        barDataSet.setValueTypeface(Typeface.DEFAULT_BOLD);
        //设置柱块上文字的格式
        barDataSet.setValueFormatter(new IValueFormatter() {
            @Override
            public String getFormattedValue(float value, Entry entry, int dataSetIndex, ViewPortHandler viewPortHandler) {
                return value + " %";
            }
        });
        //设置高亮的颜色，效果不是很明显
        barDataSet.setHighLightColor(Color.BLACK);

        //设置柱状图的阴影
        barDataSet.setBarShadowColor(Color.GRAY);
        BarData ba = new BarData(barDataSet);
        bc.setData(ba);
    }

3.5 BarChart属性和BarData属性

BarChart属性即该控件点出来的属性，但柱状图的BarData中有几个属性是BarDataSet中没有的，而在实际开发中我们用的又比较多，在下面将会介绍到

BarChart属性

属性	注解
setBackgroundColor()	设置整个控件的背景颜色
setBackground()	设置整个控件的背景图片
setGridBackgroundColor()	设置网格线的背景颜色
setDrawGridBackground()	是否绘制网格线的背景色,bool值
setAlpha()	设置整个控件的透明度。取值0-1，0表示完全透明
setTouchEnabled()	是否取消所有的手势操作，包括点击和缩放，bool值
notifyDataSetChanged()	当数据源发生改变时自动调用，无需参数
setDrawValueAboveBar()	是否将柱块上的文字绘制在柱块的上面
setFitBars()	是否处理超出的柱块（这是个非常重要的属性，有时候可以帮助我们自动处理超出的柱块），一般都会加上
setHighlightFullBarEnabled()	是否绘制高亮，效果不大
setExtraBottomOffset()	设置柱状图在底部的偏移量，同样也有设置上左右方向上的偏移量，还有一次行设置四个方向上的属性，这里不做过多的介绍
setDrawBarShadow()	是否绘制阴影
setScaleEnabled()	是否支持缩放
animateXY()	设置x和y两个方向的动画，也可以单独设置x和y方向上的动画，但同时设置效果更好看

BarData属性

在BarData中有两个比较重要的属性，下面会介绍到

属性	注解
setBarWidth()	设置每个柱块的宽度，取值0-1
groupBars()	设置一组柱块与一组柱块之间的距离，当每组只有一个柱块时将会报错

效果图

完整代码如下：

public class Bar_Frag extends Fragment {

    private BarChart bc;

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.bar_frag,null);
    }

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);

        bc = view.findViewById(R.id.bc);

        setLegend();

        setDesc();

        setXAxis();

        setYAxis();

        loadData();

    }

    private void setYAxis() {
        //不显示右侧的y轴
        bc.getAxisRight().setEnabled(false);
        //得到左侧的y轴对象
        YAxis yAxis = bc.getAxisLeft();
        //是否绘制最上面的那个标签
        yAxis.setDrawTopYLabelEntry(false);

        yAxis.setAxisMinimum(0);
        yAxis.setAxisMaximum(20);
        //设置标签是绘制在图形内部还是外部， YAxisLabelPosition枚举值
        yAxis.setPosition(YAxis.YAxisLabelPosition.OUTSIDE_CHART);
        //设置靠近y轴第一条线的宽度
        yAxis.setAxisLineWidth(3f);
        //设置靠近y轴第一条线的颜色
        yAxis.setAxisLineColor(Color.RED);

        yAxis.setGridColor(Color.RED);
        //设置横向网格线的宽度
        yAxis.setGridLineWidth(2f);

        //设置y轴在x方向上的偏移量
        yAxis.setXOffset(15f);
        //设置y轴的字体大小
        yAxis.setTextSize(14f);
        //设置y轴的字体颜色
        yAxis.setTextColor(Color.BLACK);
        //设置y轴字体的类型，如加粗等
        yAxis.setTypeface(Typeface.DEFAULT_BOLD);
        //自定义样式
        yAxis.setValueFormatter(new IAxisValueFormatter() {
            @Override
            public String getFormattedValue(float value, AxisBase axis) {
                return value + " 万/元";
            }
        });
    }

    private void setXAxis() {
        XAxis xAxis = bc.getXAxis();
        //设置x轴是显示在顶部还是底部，柱状图内还是外
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
        //设置文字旋转的角度
        xAxis.setLabelRotationAngle(60);
        //设置最小值，可通过该属性设置与左边的距离
        xAxis.setAxisMinimum(-0.5f);
        //设置最大值
        xAxis.setAxisMaximum(2.5f);
        xAxis.setLabelCount(3);
        //设置靠近x轴第一条线的颜色
        xAxis.setAxisLineColor(Color.RED);
        //设置绘制靠近x轴的第一条线的宽度
        xAxis.setAxisLineWidth(3f);
        //是否绘制靠近x轴的第一条线,不受setDrawGridLines属性影响
//        xAxis.setDrawAxisLine(false);
        //是否绘制竖向的网格
        xAxis.setDrawGridLines(false);

        //自定义格式
        xAxis.setValueFormatter(new IAxisValueFormatter() {
            @Override
            public String getFormattedValue(float value, AxisBase axis) {
                int tep = (int) (value + 1);
                return "第" + tep + "月份";
            }
        });
        //设置x轴在y方向上的偏移量
        xAxis.setYOffset(10f);

        //设置x轴字体大小
        xAxis.setTextSize(16f);
        //设置x轴字体颜色
        xAxis.setTextColor(Color.GREEN);

        //设置间隔
        xAxis.setGranularity(1);
    }


    private void setLegend() {
        //得到Legend对象
        Legend legend = bc.getLegend();
        //设置字体大小
        legend.setTextSize(18f);
        //设置排列方式
         legend.setVerticalAlignment(Legend.LegendVerticalAlignment.TOP);
        legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.LEFT);
        //设置图例的大小
        legend.setFormSize(15f);
    }

    public void setDesc(){
        //得到Description对象
        Description description = bc.getDescription();
        //设置文字
        description.setText("这是柱状图的标题");
        //设置文字大小
        description.setTextSize(18f);
        //设置偏移量

		// 获取屏幕中间x 轴的像素坐标
        WindowManager wm=(WindowManager)getActivity().getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics dm = new DisplayMetrics();
        wm.getDefaultDisplay().getMetrics(dm);
        float x = dm.widthPixels / 2;

        description.setPosition(x,50);
        //设置字体颜色
        description.setTextColor(Color.BLUE);
        //设置字体加粗
        description.setTypeface(Typeface.DEFAULT_BOLD);

    }

    private void loadData() {
        //为了看到更明显的效果，我这里设置了图形在上下左右四个方向上的偏移量
        bc.setExtraTopOffset(25);
        bc.setExtraLeftOffset(30);
        bc.setExtraRightOffset(100);
        bc.setExtraBottomOffset(50);

        List<BarEntry> barEntries = new ArrayList<BarEntry>();
        barEntries.add(new BarEntry(0,5));
        barEntries.add(new BarEntry(1,10));
        barEntries.add(new BarEntry(2,13));

        BarDataSet barDataSet = new BarDataSet(barEntries,"标题一");

        //设置柱状图的边框颜色
        barDataSet.setBarBorderColor(Color.GREEN);
        //设置柱状图的边框大小，默认0
        barDataSet.setBarBorderWidth(5f);


        //依次设置每次柱块的颜色,int... 类型
        barDataSet.setColors(Color.RED,Color.BLUE,Color.MAGENTA);
        //设置住块上文字的颜色
        barDataSet.setValueTextColor(Color.RED);
        //设置住块上文字的大小
        barDataSet.setValueTextSize(16f);
        //设置住块上文字的类型，如加粗
        barDataSet.setValueTypeface(Typeface.DEFAULT_BOLD);
        //设置柱块上文字的格式
        barDataSet.setValueFormatter(new IValueFormatter() {
            @Override
            public String getFormattedValue(float value, Entry entry, int dataSetIndex, ViewPortHandler viewPortHandler) {
                return value + " %";
            }
        });




        //设置高亮的颜色，效果不是很明显
        barDataSet.setHighLightColor(Color.BLACK);

        //设置柱状图的阴影
        barDataSet.setBarShadowColor(Color.RED);

        //设置x和y两个方向的动画，也可以单独设置x和y方向上的动画，但同时设置效果更好看
        bc.animateXY(1500,1500);
        bc.setDrawGridBackground(true);
        //是否绘制高亮，效果不大
        bc.setHighlightFullBarEnabled(false);
        //是否处理超出的柱块（这是个非常重要的属性，有时候可以帮助我们自动处理超出的柱块）
        bc.setFitBars(true);
        //是否将柱块上的文字绘制在柱块的上面
        bc.setDrawValueAboveBar(true);
        //是否绘制阴影
//        bc.setDrawBarShadow(true);

        //是否支持缩放
//        bc.setScaleEnabled(false);

        BarData ba = new BarData(barDataSet);

        //设置每个柱块的宽度，取值0-1
        ba.setBarWidth(0.2f);

        //设置一组柱块与一组柱块之间的距离，当每组只有一个柱块时将会报错
//        ba.groupBars();

        bc.setData(ba);
    }

}

本篇文章只是介绍了MPAndroidChart中柱状图最基本的做法，当然还有很多更其他用法，如多柱图，正负柱状图，堆叠柱状图等，想要了解的读者请转到：安卓图形之MPAndroidChart3.0详解三——柱状图（二）（案例篇）