MPAndroid--Android图表之条形图

柱状图（Bar Chart）适合在什么地方使用？
柱状图通过使用水平或垂直方向柱子的高度来显示不同类别的数值，其中柱状图的一个轴显示正在比较的类别，而另一个轴代表对应的刻度值。
纵向柱状图的柱是垂直方向的，横向柱状图的柱是水平方向的，又称条形图。条形图与横向柱状图表达数据的形式是一样的，不过，当图表的数据标签很长或者有超过10个项目进行比较时，横向柱状图会无法完全显示完标签，或者只能倾斜展示，影响美观。因此当数据标签过长时，选择用条形图可以获得比较好的展示效果。
MPAdroid的导入,大家可以参考这边文章，不重复介绍

1. 在布局文件中，使用BarChart视图。

2、快速初始化数据，在BarChartActivity文件中对BarChart初始化数据， 查看效果图。

class BarChartActivity:AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_bar_chart)

        initBarChartView()
    }


    lateinit var list:MutableList

    lateinit var dataSet:BarDataSet

    lateinit var data:BarData

    private fun initBarChartView() {
        //为设置数据给BarChart的视图的提示
        barChart.setNoDataText("正在初始化...")

        initBarEntries()

        dataSet= BarDataSet(list,"BarChat View")

        data=BarData(dataSet)

        barChart.data=data

        barChart.invalidate()

    }

    private fun initBarEntries() {
        var barEntry1=BarEntry(0f,30f)
        var barEntry2=BarEntry(1f,40f)
        var barEntry3=BarEntry(2f,50f)
        var barEntry4=BarEntry(3f,60f)
        var barEntry5=BarEntry(4f,70f)

        list= mutableListOf()

        list.add(barEntry1)
        list.add(barEntry2)
        list.add(barEntry3)
        list.add(barEntry4)
        list.add(barEntry5)
    }
}

emmmmm，效果图看一眼，跟想象的区别也太大了

效果图1

3. 添加X轴刻度。从效果图1看，此时x轴的刻度是显示在顶部，而且值跟我们想象的不一样。因此我们需要进行定制一下。

class XAxisCustom(val list: List) : IAxisValueFormatter {
    override fun getFormattedValue(value: Float, axis: AxisBase?): String {
        return list[value.toInt()]
    }
}

主要是重写IAxisValueFormatter的getFormattedValue,返回我们想表达的值。下面将XAxisCustom设置给BarChart

    lateinit var xAxisList: MutableList

    private fun initX() {
        xAxisList = mutableListOf("五月", "六月", "七月", "八月", "九月")
    
        barChart.xAxis.valueFormatter = XAxisCustom(xAxisList)

        //默认显示在顶端，这是设置到底部，符合我们正常视觉
        barChart.xAxis.position = XAxis.XAxisPosition.BOTTOM
        //去掉底部图例BarChatView 的提示，大家可以根据自己业务需求，对
        //Legend进行定制
        barChart.legend.isEnabled = false
        //xAxisList的长度要和list的长度一直，否则会数组越界
        barChart.xAxis.setLabelCount(xAxisList.size, false)
    }

效果图2

通过效果图2，界面越来越好看了

4. 去掉左右y轴，和中间的横线和竖线。

    private fun removeY(){
        barChart.axisLeft.setDrawZeroLine(true)
        //去掉左侧Y轴刻度
        barChart.axisLeft.setDrawLabels(false)
        //去掉左侧Y轴
        barChart.axisLeft.setDrawAxisLine(false)
        //去掉中间竖线
        barChart.xAxis.setDrawGridLines(false)
        //去掉中间横线
        barChart.axisLeft.setDrawGridLines(false)
        //不使用右侧Y轴
        barChart.axisRight.isEnabled=false
      
    }

BarChart的左右侧Y轴的api是通用，也就同学们可要根据需求灵活的定制它俩兄弟。

效果图3

5、最后一步，设置不同Bar不同颜色，顺便去掉右下角的 Description Label.
在资源文件 colors定义颜色数组

 
        #32d3eb
        #5bc49f
        #feb64d
        #ff7c7c
        #9287e7
    

在代码在引用颜色数组，并设置给BarDataSet。

lateinit var intColors: MutableList

    private fun initColor() {
        val strColors = resources.getStringArray(R.array.chart_color)

        intColors = mutableListOf()

        strColors.toList().forEachIndexed { index, s ->
            intColors.add(Color.parseColor(strColors[index]))
        }

        dataSet.colors = intColors

        val description = Description()
        description.text = ""
        barChart.description = description
    }

效果图4

通过上面的设置，已经满足大多数需求。

注意
在第三步，自定义X轴的值，动态删除会出现数组越界的Bug,通过Stack Overflow和Google，目前该问题官网还没解决，如果有同学知道，麻烦告知一声。如果该业务需求，看看如何规避。

番外篇

1. BarChart也是支持多数据模式，只要多设置一个BarDataSet即可。有需求的可以自己撸下文档，无难度
   

   

   多数据模式

2. 通过饼图和条形图api的调用，我们知道，有很多接口和实体类是类似的，甚至是一样的，所以大家灵活变通。根据的业务需求撸文档。

3. 看别人写的博客，终究纸上得来终觉浅，绝知此事要躬行。所以动手才是王道。