MPAndroid--Android图表之条形图
柱状图（Bar Chart）适合在什么地方使用？
柱状图通过使用水平或垂直方向柱子的高度来显示不同类别的数值，其中柱状图的一个轴显示正在比较的类别，而另一个轴代表对应的刻度值。
纵向柱状图的柱是垂直方向的，横向柱状图的柱是水平方向的，又称条形图。条形图与横向柱状图表达数据的形式是一样的，不过，当图表的数据标签很长或者有超过10个项目进行比较时，横向柱状图会无法完全显示完标签，或者只能倾斜展示，影响美观。因此当数据标签过长时，选择用条形图可以获得比较好的展示效果。
MPAdroid的导入,大家可以参考这边文章，不重复介绍
- 在布局文件中，使用
BarChart视图。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.github.mikephil.charting.charts.BarChart
android:id="@+id/barChart"
android:layout_width="300dp"
android:layout_height="300dp" />
</LinearLayout>
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<BarEntry>
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
- 添加X轴刻度。从效果图1看，此时x轴的刻度是显示在顶部，而且值跟我们想象的不一样。因此我们需要进行定制一下。
class XAxisCustom(val list: List<String>) : IAxisValueFormatter {
override fun getFormattedValue(value: Float, axis: AxisBase?): String {
return list[value.toInt()]
}
}
主要是重写IAxisValueFormatter的getFormattedValue,返回我们想表达的值。下面将XAxisCustom设置给BarChart
lateinit var xAxisList: MutableList<String>
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，界面越来越好看了
- 去掉左右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定义颜色数组
<string-array name="chart_color">
<item>#32d3eb</item>
<item>#5bc49f</item>
<item>#feb64d</item>
<item>#ff7c7c</item>
<item>#9287e7</item>
</string-array>
在代码在引用颜色数组，并设置给BarDataSet。
lateinit var intColors: MutableList<Int>
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，目前该问题官网还没解决，如果有同学知道，麻烦告知一声。如果该业务需求，看看如何规避。
番外篇
-
BarChart也是支持多数据模式，只要多设置一个BarDataSet即可。有需求的可以自己撸下文档，无难度
多数据模式
-
通过饼图和条形图api的调用，我们知道，有很多接口和实体类是类似的，甚至是一样的，所以大家灵活变通。根据的业务需求撸文档。
-
看别人写的博客，终究纸上得来终觉浅，绝知此事要躬行。所以动手才是王道。
