MpAndroid 柱状图详解

最新推荐文章于 2024-08-31 15:33:35 发布

置顶

youyouno_login

最新推荐文章于 2024-08-31 15:33:35 发布

阅读量7.5k

点赞数 3

分类专栏： Android MpAndroidChart 文章标签： MpAndroidChart X轴自定义 Y轴自定义 Value自定义标签自定义

本文链接：https://blog.csdn.net/yy11534/article/details/79191369

版权

本文详细介绍了如何使用 MpAndroidChart 实现柱状图的X轴、Y轴、Value值的自定义，包括X轴的坐标范围、显示的label数、精度设置，Y轴的ValueFormatter接口实现，以及柱状图数据填充、 Legend 设置、Value值非数字信息显示和多系列柱状图的创建方法。

摘要由CSDN通过智能技术生成

1. 问题出现

最近项目数据繁多，要做一些图标实现数据可视化。自己写可以实现但耗费时间长，所以找了下各种Charts的开源项目，最后找到了MpAndroidChart。它的文档比较详细，扩展性好一点，所以今天写一下MpAndroidChartd的使用。

2. 问题分析

网上各种MpAndroidChart的介绍，有翻译英文文档，也有介绍图表某一个属性，但针对某一种图表的详细介绍很少，今天就介绍下柱状图的所有元素（包括X轴、Y轴、Value值自定义等）的使用吧！

下面上今天要讲的图表截图：

（1）Build.gradle依赖及使用前Xml定义

compile 'com.github.PhilJay:MPAndroidChart:v3.0.0'

<com.github.mikephil.charting.charts.BarChart
        android:id="@+id/mBarChart"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

（2）BarChart初始化及一些常规设置：

        //柱状图
        mBarChart = (BarChart) findViewById(R.id.mBarChart);
        //设置柱状图点击的时候，的回调函数
        mBarChart.setOnChartValueSelectedListener(this);
        //柱状图的阴影
        mBarChart.setDrawBarShadow(false);
        //设置柱状图Value值显示在柱状图上方 true 为显示上方，默认false value值显示在柱状图里面
        mBarChart.setDrawValueAboveBar(true);
        //Description Label 是否可见
        mBarChart.getDescription().setEnabled(false);
        // 设置最大可见Value值的数量 针对于ValueFormartter有效果
        mBarChart.setMaxVisibleValueCount(60);
        // 二指控制X轴Y轴同时放大
        mBarChart.setPinchZoom(false);
        //是否显示表格背景颜色
        mBarChart.setDrawGridBackground(false);
        //设置X轴显示文字旋转角度-60意为逆时针旋转60度
        mBarChart.getXAxis().setLabelRotationAngle(-60);

（3）X轴的设置及自定义X轴

        XAxis xAxis = mBarChart.getXAxis();
        //设置X轴显示位置
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
        //X轴纵向分割线，一般不设置显示
        xAxis.setDrawGridLines(false);
        // X轴显示Value值的精度，与自定义X轴返回的Value值精度一致
        xAxis.setGranularity(1f);
        //X轴横坐标显示的数量
        xAxis.setLabelCount(7);
        //X轴最大坐标
        xAxis.setAxisMaximum(6f)