Android 图表-折线图

qq377138858

已于 2022-11-29 15:07:49 修改

阅读量5.6k

点赞数 4

文章标签： android

于 2022-03-18 17:35:31 首次发布

本文链接：https://blog.csdn.net/qq377138858/article/details/123580389

版权

鉴于网上有很多图表的一些好的文章，我今天的主要利用git上的一个开源框架CombinedChart来实现下面的效果. 在这里插入图片描述

图一和图二是最近在温湿度设备上需要实现的两个图表，需求：利用折线图将最近一天，一周，一个月得数据以图标的形式显示出来，同时若为本周本月需要添加多个折线展示最大和最小数据的一个变化。在这里我们主要用的是git上的一个开源图表框架-CombinedChart。
CombinedChart可以绘制饼图，柱形图，折线图，这次需求重点需要绘制折线图，这里便对CombinedChart如何绘制折线图做一个详细得介绍。

首先我们对combinedChart进行初始化这里我们涉及到的属性有:

//创建的CombinedChart表格
lateinit var ccTempertureForm: CombinedChart
lateinit var ccHumidityForm: CombinedChart

//不显示描述内容
        ccTempertureForm.getDescription().setEnabled(true)
        //设置描述对象，对描述进行设置属性
        var description: Description = Description()
        //这里可以设置文字，文字颜色，文字类型
        description.text = ""
        //图表默认右下方的描述，参数是String对象
        ccTempertureForm.description = description
        ccTempertureForm.setBackgroundColor(Color.WHITE)
        //设置图网格背景是否显示，默认是false
        ccTempertureForm.setDrawGridBackground(false)
       //
        ccTempertureForm.setHighlightFullBarEnabled(false)
        //显示边界,就是最上面的一条线加粗的
        ccTempertureForm.setDrawBorders(false)
        //设置true支持两个指头向X、Y轴的缩放，如果为false，只能支持X或者Y轴的当方向缩放
        ccTempertureForm.setPinchZoom(false) 
        //设置是否可以拖拽,true可以左右滑动
        ccTempertureForm.setDragEnabled(true)
        //设置是否可以缩放，false不可以放大缩小
        ccTempertureForm.setScaleEnabled(false)
        //图例说明
        val legend: Legend = ccTempertureForm.getLegend()
        legend.isEnabled = false //不显示图例 底部的什么颜色代表什么的说明

在这里我们初始化完图表数据后，我们需要设置X轴得数据列表，X轴数据属性及数据源

//x轴显示位置
    ccHumidityForm.xAxis.position = XAxis.XAxisPosition.BOTTOM
   //网格显示颜色
   ccHumidityForm.xAxis.gridColor = R.color.color_aaf7f7f7
   //网格显示虚线
   ccHumidityForm.xAxis.enableGridDashedLine(10f, 10f, 20f)
   //添加x轴显示数据源
   ccHumidityForm.xAxis.valueFormatter = IndexAxisValueFormatter(xAxisHum)
   //getFormattedValue利用回调来设置修改x轴的值及添加其他的属性字符
    ccHumidityForm.xAxis.valueFormatter = object : IndexAxisValueFormatter(xAxisHum){
    override fun getFormattedValue(value: Float): String {
      return super.getFormattedValue(value)
   }
   }
    //设置数据限制个数
    ccHumidityForm.xAxis.setLabelCount(xAxisHum.size, true)
    //设置最小值从x开始
    ccHumidityForm.xAxis.mAxisMinimum = x
    //设置最大值至y结束
    ccHumidityForm.xAxis.mAxisMaximum = y

   //为了显示图中的效果这里显示的y轴是不显示的,这里我们设置属性：isenabled来将y轴的数据及边框网格隐藏
   //隐藏Y轴边线及数字
   ccTempertureForm.axisLeft.isEnabled = false

到这里我们将x与y轴的数据都设置完毕,现在也到了最重要的一步，设置图表，设置图表是要选好图标的类型，我这里设置的是折线图。

 //我们创建折线图对象
   val lineData = LineData()

折线图的数据源是通过entry来传入的他本是是一个与map一样由key与value组成：分别指坐标的x，y轴坐标

  //设置数据源entry
 val customCounts: MutableList<Entry> = ArrayList()
 for (t in 0 until yAxisTem.get(i).size) {
  //add entry()key作为x value作为y数据
  customCounts.add(Entry(t.toFloat(), yAxisTem[i][t].toFloat()))
  }
  //将数据源listc传入线性表对象内
   val lineDataSet = LineDataSet(customCounts, "high")
  //axisDependency以什么数据作为数据标定
  lineDataSet.axisDependency = YAxis.AxisDependency.LEFT
 //折线图颜色
   lineDataSet.color = jineColorDark
 //折线图样式
   lineDataSet.setMode(LineDataSet.Mode.HORIZONTAL_BEZIER);
  //设置坐标画圆
  lineDataSet.setDrawCircles(true)
  lineDataSet.setCircleColor(jineColorDark)
  lineDataSet.lineWidth = 2f
  lineData.addDataSet(lineDataSet)

在这里因为我们图表上添加了数据得单位，因此我们可以利用ValueFormatter属性来添加数据得单位
利用匿名类来实现

  lineData.setValueFormatter(object : ValueFormatter(){
    override fun getFormattedValue(value: Float): String {
     //在这里返回的就是可以显示得数值而value得值就是前面传入折现表的值
      return value.toString()+"%"
    }
    })
  //设置是否显示数据点的数值
  lineData.setDrawValues(true)

到最后我们需要进行显示数据，及显示数据图表

 //绘制图表数据
  var data = CombinedData()
  //设置折线图数据
  data.setData(getHumLineHighData())
  ccHumidityForm.setData(data)
  ccHumidityForm.invalidate() //更新数据
  ccHumidityForm.setVisibleXRangeMaximum(10f) //设置图表最大可见和最小可见个数。既可以固定可见个数。这样少了也是固定宽度。不会变大。如果大于可见宽度则可以滑动查看
  ccHumidityForm.setVisibleXRangeMinimum(2f)

若数据为空我们可以设置一个对图表数据进行删除及CombinedChart.clear
最终实现结果：在这里插入图片描述
当然再删除的同时我们可能也需要设置一下为空现实的文案属性为：setNoDataText()在显示数据的时候我们需要明确好图表最大可见和最小可见个数，本质上来说在设置x轴与y轴得到LabelCount时我们需要注意他的限制个数，但是美观我们需要将setVisibleXRangeMaximum与LabelCount一起设置，这样就会避免所有的数据都集中在坐标而让数据显得不美观
（在开发过程中不仅要注意这个还要注意对于控件设置LabelCount属性时，它有两个参数，第一个为x轴或y轴得显示个数，而第二个参数为时候精确还是模糊显示，在设置时若labelCount参数小于setVisibleXRangeMaximum设置得值，一定要将其设置成精确显示而大于的需要设置成模糊显示，这样才能让控件显示不错位）
总结：在做图表的过程中，遇到了很多问题，比如在一张图中需要设置多个折线图，本以为传入两个list就能解决最后发现list是由linedataset来设置的而linedateset是放入linedata进行存放的，存放后才可以进行显示，因此问题解决方法是创建两个lineDataSet 全都存入linedata,当然也需要注意
在存入数据的过程中不能之创建一个list，他们的地址相同，若在修改下一个list内的数据上一个存入的linedataset的list数据也会改变，因此务必创建linedataset时也要创建一个新的list存放数据源。