文章目录

  • 1 前言
  • 2 基本使用
  • 3 正负水平图


1 前言

本篇文章讲解MPAndroidChart中HorizontalBarChart控件的基本使用,相关的一些基本属性在本篇文章中不会讲解,大部分属性与柱状图的属性相同,有需要的读者请转到:安卓图形之MPAndroidChart3.0详解三——柱状图(一)(属性篇)

2 基本使用

HorizontalBarChart与BarChart的基本使用大致相同,但还是有一些要注意的地方,如:

  • X轴和Y轴的位置

在HorizontalBarChart中,不能以数学意义上的x,y来判断x轴和y轴的位置
在HorizontalBarChart中,y轴表示上下两个轴,x轴表示左侧的轴(代码中会演示)

  • 两边的y轴都要设置最大最小值

在HorizontalBarChart中有上下两个y轴,在一般的开发中我们通常都只希望显示一侧的y轴,如果按照之前的做法直接将另外的一个y轴setEnabled(false)的话,就会出现在柱块上无法显示本文的问题
解决方案:
只需要把不希望显示的那个y轴设置最大值和最小值然后在setEnabled(false)就ok啦,详情见代码中的演示

效果图:

android mpandroidchart 柱状图设置柱子宽度 安卓柱状图控件_HorizontalBarChart


完整代码如下:

xml代码:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
<com.github.mikephil.charting.charts.HorizontalBarChart
    android:id="@+id/hc"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>
</RelativeLayout>

Java代码:

public class HBar_test extends Fragment {

    private HorizontalBarChart hc;

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

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

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

        setDes();

        setXAxis();

        setYAxis();

        loadData();
    }

    //设置标题
    private void setDes() {
        Description description = new Description();
        description.setText("违章车辆的违章次数占比分布图统计");
        description.setTextSize(20f);
        description.setTextColor(Color.BLACK);

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

        description.setPosition(x,40);
        hc.setDescription(description);
    }

    //设置y轴
    private void setYAxis() {
        //两边的y轴都要设置y轴的最小值才能在柱状图上面显示数值
        //不然是看不到效果的
        YAxis tepAxis = hc.getAxisLeft();
        tepAxis.setAxisMaximum(80f);
        tepAxis.setAxisMinimum(0f);
        tepAxis.setEnabled(false);

        YAxis yAxis = hc.getAxisRight();
        yAxis.setTextSize(12f);
        yAxis.setAxisMinimum(0f);
        yAxis.setAxisMaximum(80f);
        //自定义样式
        yAxis.setValueFormatter(new IAxisValueFormatter() {
            @Override
            public String getFormattedValue(float value, AxisBase axis) {
                return value + "0%";
            }
        });
    }

    //设置x轴
    private void setXAxis() {
        XAxis xAxis = hc.getXAxis();
        xAxis.setTextSize(16);
        xAxis.setAxisMaximum(2.6f);
        //把最小值设置为负数能够为下方留出点空白距离
        xAxis.setAxisMinimum(-0.6f);
        xAxis.setDrawGridLines(false);
        //将x轴显示在左侧
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
        xAxis.setLabelCount(3);
        //自定义样式
        final String ss[] = {"5条以上违章","3-5条违章","1-2条违章"};
        xAxis.setValueFormatter(new IAxisValueFormatter() {
            @Override
            public String getFormattedValue(float value, AxisBase axis) {
                return ss[(int) value];
            }
        });
        //设置x轴的偏移量
        xAxis.setXOffset(15f);
    }

    //加载数据
    private void loadData() {
        //不绘制图例
        hc.getLegend().setEnabled(false);
        //自动对齐
        hc.setFitBars(true);
        hc.setExtraOffsets(20,50,30,30);
        //将文本绘制在柱块上还是柱块里面
        hc.setDrawValueAboveBar(true);

        //从下往上绘制
        final List<BarEntry> entries = new ArrayList<BarEntry>();
        float da[] = {60.51f,26.28f,13.20f};

        for(int i = 0; i < da.length; i++){
            entries.add(new BarEntry(i,da[i]));
        }

        BarDataSet barDataSet = new BarDataSet(entries,"");
        barDataSet.setValueTextSize(16f);//柱块上的字体大小
        barDataSet.setValueTextColor(Color.RED);//柱块上的字体颜色
        barDataSet.setValueTypeface(Typeface.DEFAULT_BOLD);//加粗
        //自自定义样式
        barDataSet.setValueFormatter(new IValueFormatter() {
            @Override
            public String getFormattedValue(float value, Entry entry, int dataSetIndex, ViewPortHandler viewPortHandler) {
                return String.format("%.2f",value) + "%";//保留两位小数
            }
        });
        //依次设置每次柱块的颜色
        barDataSet.setColors(getResources().getColor(R.color.h_green),getResources().getColor(R.color.h_bule),getResources().getColor(R.color.h_red));
        BarData barData = new BarData(barDataSet);
        //设置柱块的宽度
        barData.setBarWidth(0.4f);

        hc.setData(barData);

    }
3 正负水平图

效果图:

android mpandroidchart 柱状图设置柱子宽度 安卓柱状图控件_数据可视化_02


完整代码如下:

xml代码:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
<com.github.mikephil.charting.charts.HorizontalBarChart
    android:id="@+id/hc"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>
</RelativeLayout>

java代码:

public class HBar_test extends Fragment {

    private HorizontalBarChart hc;

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

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

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

        setDes();

        setXAxis();

        setYAxis();

        loadData();
    }

    //设置标题
    private void setDes() {
        Description description = new Description();
        description.setText("全国人口普查");
        description.setTextSize(20f);
        description.setTextColor(Color.BLACK);
        // 获取屏幕中间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,40);
        hc.setDescription(description);
    }

    //设置y轴
    private void setYAxis() {
        //两边的y轴都要设置y轴的最小值才能在柱状图上面显示数值
        //不然是看不到效果的
        YAxis tepAxis = hc.getAxisLeft();
        tepAxis.setAxisMinimum(-25f);
        tepAxis.setAxisMaximum(25f);
        tepAxis.setEnabled(false);

        YAxis yAxis = hc.getAxisRight();
        yAxis.setTextSize(14f);
        yAxis.setAxisMinimum(-25f);
        yAxis.setAxisMaximum(25f);
        yAxis.setTextColor(Color.BLACK);
        yAxis.setDrawGridLines(false);
        yAxis.setDrawLabels(true);
        //自定义样式
        yAxis.setValueFormatter(new IAxisValueFormatter() {
            @Override
            public String getFormattedValue(float value, AxisBase axis) {
                return Math.abs(value) + " MM";
            }
        });
    }

    //设置x轴
    private void setXAxis() {
        XAxis xAxis = hc.getXAxis();
        xAxis.setTextSize(16);
        xAxis.setAxisMaximum(10.6f);
        //把最小值设置为负数能够为下方留出点空白距离
        xAxis.setAxisMinimum(-0.6f);
        //不显示网格
        xAxis.setDrawGridLines(false);
        xAxis.setDrawAxisLine(true);
        //将x轴显示在左侧
        xAxis.setPosition(XAxis.XAxisPosition.BOTH_SIDED);
        xAxis.setLabelCount(11);
        //自定义样式
        xAxis.setValueFormatter(new IAxisValueFormatter() {
            @Override
            public String getFormattedValue(float value, AxisBase axis) {
                return (int)value * 10 + "-" + ((int)value + 1) * 10;
            }
        });
        //设置x轴的偏移量
        xAxis.setXOffset(15f);
    }

    //加载数据
    private void loadData() {
        //不绘制图例
        //自动对齐
        hc.setFitBars(true);
        hc.setExtraOffsets(20,50,50,15);
        //将文本绘制在柱块上还是柱块里面
        hc.setDrawValueAboveBar(true);

        //从下往上绘制
        final List<BarEntry> entries = new ArrayList<BarEntry>();
        float da[] = {11f,13f,15f,17f,20f,19f,16f,14f,11f,6f,2f};
        float da2[] = {-12f,-13f,-15f,-17f,-19f,-19f,-16f,-13f,-10f,-5f,-1f};

        for(int i = 0; i < da.length; i++){
            entries.add(new BarEntry(i,new float[]{da[i],da2[i]}));
        }

        BarDataSet barDataSet = new BarDataSet(entries,"");
        barDataSet.setValueTextSize(10f);//柱块上的字体大小
        barDataSet.setValueTextColor(Color.BLACK);//柱块上的字体颜色
        barDataSet.setValueTypeface(Typeface.DEFAULT_BOLD);
        //自自定义样式
        barDataSet.setValueFormatter(new IValueFormatter() {
            @Override
            public String getFormattedValue(float value, Entry entry, int dataSetIndex, ViewPortHandler viewPortHandler) {
                return Math.abs((int)value) + " MM";
            }
        });
        //设置柱块的颜色
        barDataSet.setColors(getResources().getColor(R.color.h_green),getResources().getColor(R.color.h_bule));
        barDataSet.setStackLabels(new String[]{"女人","男人"});
        hc.getLegend().setYOffset(15f);
        BarData barData = new BarData(barDataSet);
        //设置柱块的宽度
        barData.setBarWidth(0.8f);
        hc.setData(barData);
    }
}