Android 图表控件的使用

Android Android UI绘制

GitHub地址

一个简单不复杂的图表控件ChartLibs,目前仅仅提供三种图表控件:饼图、条形图和线性图.其展示效果
如下:

效果示意图

使用方法很简单,直接通过gradle导入ChartLibs依赖就可以,在build.gradle中添加如下代码:

allprojects {
        repositories {
            ...
            maven { url 'https://jitpack.io' } //maven地址
        }
    }


    dependencies {
      compile 'com.github.fishly:ChartLibs:1.1'  //依赖
  }

如下简单介绍以下三种图表的使用。

饼图

饼图通过不同颜色来区别数据,也可通过自定义设置数据源颜色来指定显示颜色,使用滑动旋转选择功能来选择当前对应item,通过突出显示方式显示当前位置,图示如下:

饼图

可以通过如下代码设置数据源和添加结果监听:

//kotlin,java同样适用
val list:MutableList<PartModel> = mutableListOf()
list.add(PartModel(10f,"one","0"))
list.add(PartModel(30f,"two","1"))
list.add(PartModel(10f,"three","2"))
list.add(PartModel(90f,"four","3"))
list.add(PartModel(10f,"five","4"))
list.add(PartModel(50f,"six","5"))            
pieChart.setList(list)  //设置数据源

pieChart.onSelectedListener=object : OnSelectedListener{ //选择回调
          override fun onSelectedListener(index: Int, partModel: PartModel) {
                   view.text_view.text="${partModel.value}"
          }

}

条形图

仿照小米运动的展示控件,同样也是一个选择控件,可通过左右滑动来选择当前显示项,被选项目的底部文字和柱状高亮。图示显示效果如下:

barchart

可以通过如下代码设置数据源和添加结果监听:

val list:MutableList<PartModel> = mutableListOf()
list.add(PartModel(10f,"one","0"))
list.add(PartModel(30f,"two","1"))
list.add(PartModel(10f,"three","2"))
list.add(PartModel(90f,"four","3"))
list.add(PartModel(10f,"five","4"))
list.add(PartModel(50f,"six","5"))
barChart.setList(list)  //设置数据源
barChart.onSelectedListener=object : OnSelectedListener{ //选择回调
        override fun onSelectedListener(index: Int, partModel: PartModel) {
                     view.text_view.text="${partModel.value}"
        }
}

线性图

线性图是一种类似于支付宝账单数据显示的效果,不可滑动可以通过点击选择当前选项,选中内容突出显示一个包裹背景,背景大小自适应,且被选项间隔显示底部text(防止text内容过多),效果示意图如下:

LineChart

可以通过如下代码设置数据源和添加结果监听:

val sums= mutableListOf<Float>(10f,30f,10f,90f,10f,50f)
val lables= mutableListOf<String>()

lineChart.maxScore= sums.max() //设置最大值
lineChart.minScore=sums.min()  //设置最小值
lineChart.monthCount=sums.size //设置大小
lineChart.monthText=lables //设置底部标签内容
lineChart.score=sums //设置对应Y轴数据

lineChart.onSelectedListener=object :OnSelectedListener{ //添加选者监听
       override fun onSelectedListener(index: Int, partModel: PartModel) {
                view.text_view.text="${partModel.value}"
       }
}


图表控件内容后续会间断更新,还望支持!

说点什么

avatar
  订阅  
提醒