android MpAndroidChart 统计图使用

石大头〃

已于 2023-03-21 17:04:30 修改

阅读量831

点赞数

文章标签： android kotlin

于 2023-03-15 11:36:57 首次发布

本文链接：https://blog.csdn.net/qq_35491100/article/details/129549946

版权

本文展示了如何在Android应用中创建水平柱状图、垂直柱状图和空心饼图。通过MikePhil.Charting库，设置了图表的样式、数据以及交互功能，包括柱状图的颜色、宽度、标签和动画效果，以及饼图的百分比显示和外部数据标签。

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

水平多个柱状图

XML布局

  <com.github.mikephil.charting.charts.HorizontalBarChart
                    android:id="@+id/chart1"
                    android:layout_width="match_parent"
                    android:layout_height="200dp" />

代码设置：

  private fun initCheckParChart() {
        dataBinding.chart1.getDescription().setEnabled(true)
        dataBinding.chart1.setNoDataText("暂无数据") //设置空表的描述信息
        dataBinding.chart1.setDrawGridBackground(false) //是否绘制网格背景
        dataBinding.chart1.setDrawValueAboveBar(true) //将Y数据显示在点的上方
        dataBinding.chart1.setPinchZoom(true) //挤压缩放
        dataBinding.chart1.setDrawBarShadow(false)
        dataBinding.chart1.setDrawGridBackground(false)
        dataBinding.chart1.setScaleYEnabled(false)
        dataBinding.chart1.setDoubleTapToZoomEnabled(false) //双击缩放
        dataBinding.chart1.animateY(2500)
        dataBinding.chart1.getLegend().setEnabled(false)
        dataBinding.chart1.getDescription().setEnabled(false) //隐藏右下角英文
        dataBinding.chart1.getAxisLeft().setEnabled(false) //隐藏上侧Y轴   默认是上下两侧都有Y轴
        dataBinding.chart1.setTouchEnabled(false)
    }

 private fun initCheckData(bars: ArrayList<TongJiBars>) {
        val xVals = ArrayList<String>()
        //三柱状图
        val listWcl= mutableListOf<BarEntry>()
        val listYcl= mutableListOf<BarEntry>()
        val listCs= mutableListOf<BarEntry>()
        bars.forEachIndexed { index, tongJiBars ->
            xVals.add(tongJiBars.name)
            listWcl.add(BarEntry(index.toFloat(),tongJiBars.wclnum.toFloat()))
            listYcl.add(BarEntry(index.toFloat(),tongJiBars.appyclnum.toFloat()))
            listCs.add(BarEntry(index.toFloat(),tongJiBars.num.toFloat()))
        }
        setAxis(xVals);
        val sets: MutableList<IBarDataSet> = ArrayList()

        val dataset1: BarDataSet
        val dataset2: BarDataSet
        val dataset3: BarDataSet
        dataset1 = BarDataSet(listWcl, "")
        dataset2 = BarDataSet(listYcl, "")
        dataset3 = BarDataSet(listCs, "")
        dataset1.color = Color.parseColor("#FFCC33")
        dataset2.color = Color.parseColor("#5BD6AD")
        dataset3.color = Color.parseColor("#FE97A9")
        dataset1.setDrawValues(false)// 不显示柱子上值
        dataset2.setDrawValues(false)// 不显示柱子上值
        dataset3.setDrawValues(false)// 不显示柱子上值
        sets.add(dataset3)
        sets.add(dataset2)
        sets.add(dataset1)
        val barData = BarData(sets)
        barData.barWidth = 0.5f // 设置柱子的宽度
        barData.setValueTextSize(10f)
        barData.setValueFormatter { value, entry, dataSetIndex, viewPortHandler ->
             value.toInt().toString()
        }
        dataBinding.chart1.setData(barData)
        dataBinding.chart1.invalidate()
    }

    /**
     * 因为此处的柱状图为水平柱状图，所以x轴变y轴，y轴变x轴
     */
    private fun setAxis(xVals: ArrayList<String>) {
        val xAxis: XAxis = dataBinding.chart1.xAxis
        xAxis.position = XAxis.XAxisPosition.BOTTOM
        xAxis.setDrawGridLines(false)
        xAxis.textSize = 12f
        xAxis.setLabelCount(xVals.size, false) //显示个数
        //        xAxis.setGranularity(1f); // 防止放大图后，标签错乱
        xAxis.valueFormatter =
            IAxisValueFormatter { value, axis ->
                if (value.toInt() < xVals.size) {
                    java.lang.String.valueOf(xVals[value.toInt()])
                } else {
                    ""
                }
            }
        val yAxis_right: YAxis = dataBinding.chart1.getAxisRight()
        yAxis_right.axisMinimum = 0f
        yAxis_right.textSize = 12f
        yAxis_right.granularity = 1f
        yAxis_right.valueFormatter = IAxisValueFormatter { v, axisBase -> v.toInt().toString() + "" }

        // 不显示最顶部的轴
        val yAxis_left: YAxis = dataBinding.chart1.getAxisLeft()
        yAxis_left.axisMinimum = 0f
        yAxis_left.isEnabled = false
    }

垂直多柱状图

XML布局引用

 <com.github.mikephil.charting.charts.BarChart
                    android:paddingBottom="@dimen/dp_10"
                    android:id="@+id/chart1"
                    android:layout_width="match_parent"
                    android:layout_height="200dp" />

代码设置多柱状图都是从0开始，长的柱状图就加上前面的数值，先添加长的柱子

 private fun initCheckParChart() {
        dataBinding.chart1.setNoDataText("暂无数据") //设置空表的描述信息
        dataBinding.chart1.setDrawGridBackground(false) //是否绘制网格背景
        dataBinding.chart1.setDrawValueAboveBar(true) //将Y数据显示在点的上方
        dataBinding.chart1.setPinchZoom(true) //挤压缩放
        dataBinding.chart1.setDrawBarShadow(false)
        dataBinding.chart1.setDrawGridBackground(false)
        dataBinding.chart1.setScaleYEnabled(false)
        dataBinding.chart1.setDoubleTapToZoomEnabled(false) //双击缩放
        dataBinding.chart1.animateY(2500)
        //设置描述文字
        val legend=dataBinding.chart1.legend
        legend.isEnabled=true// 显示 描述
        legend.horizontalAlignment=Legend.LegendHorizontalAlignment.CENTER//描述文字水平居中
//        dataBinding.chart1.getAxisLeft().setEnabled(false) //隐藏左侧Y轴   默认是上下两侧都有Y轴
        dataBinding.chart1.getDescription().setEnabled(false);//隐藏右下角英文
        dataBinding.chart1.setTouchEnabled(false)
    }

数据设置

  private fun initCheckData(bars: ArrayList<TongJiBars>) {
        val xVals = ArrayList<String>()
        //三柱状图
        val listWcl= mutableListOf<BarEntry>()
        val listYcl= mutableListOf<BarEntry>()
        val listCs= mutableListOf<BarEntry>()
        bars.forEachIndexed { index, tongJiBars ->
            xVals.add(tongJiBars.name)
            listWcl.add(BarEntry(index.toFloat(),tongJiBars.wclnum.toFloat()))
            listYcl.add(BarEntry(index.toFloat(),tongJiBars.appyclnum.toFloat()))
            listCs.add(BarEntry(index.toFloat(),tongJiBars.num.toFloat()))
        }
        setAxis(xVals);
        val sets: MutableList<IBarDataSet> = ArrayList()

        val dataset1: BarDataSet
        val dataset2: BarDataSet
        val dataset3: BarDataSet
        dataset1 = BarDataSet(listWcl, "未处理      ")
        dataset2 = BarDataSet(listYcl, "已处理      ")
        dataset3 = BarDataSet(listCs, "超时      ")
        dataset1.color = Color.parseColor("#FFCC33")
        dataset2.color = Color.parseColor("#5BD6AD")
        dataset3.color = Color.parseColor("#FE97A9")
        dataset1.setDrawValues(false)// 不显示柱子上值
        dataset2.setDrawValues(false)// 不显示柱子上值
        dataset3.setDrawValues(false)// 不显示柱子上值
        sets.add(dataset3)
        sets.add(dataset2)
        sets.add(dataset1)
        val barData = BarData(sets)
        barData.barWidth = 0.5f // 设置柱子的宽度
        barData.setValueTextSize(10f)
        barData.setValueFormatter { value, entry, dataSetIndex, viewPortHandler ->
             value.toInt().toString()
        }
        dataBinding.chart1.setData(barData)
        dataBinding.chart1.invalidate()
    }

    /**
     * 因为此处的柱状图为水平柱状图，所以x轴变y轴，y轴变x轴
     */
    private fun setAxis(xVals: ArrayList<String>) {
        val xAxis: XAxis = dataBinding.chart1.xAxis
        xAxis.position = XAxis.XAxisPosition.BOTTOM
        xAxis.setDrawGridLines(false)
        xAxis.textSize = 12f
        xAxis.setLabelCount(xVals.size, false) //显示个数
        //        xAxis.setGranularity(1f); // 防止放大图后，标签错乱
        xAxis.valueFormatter =
            IAxisValueFormatter { value, axis ->
                if (value.toInt() < xVals.size) {
                    java.lang.String.valueOf(xVals[value.toInt()])
                } else {
                    ""
                }
            }
        val yAxis_right: YAxis = dataBinding.chart1.getAxisRight()
        yAxis_right.axisMinimum = 0f
        yAxis_right.textSize = 12f
        yAxis_right.granularity = 1f
        yAxis_right.valueFormatter = IAxisValueFormatter { v, axisBase -> v.toInt().toString() + "" }

        // 不显示Y轴右边
        val yAxis_left: YAxis = dataBinding.chart1.axisRight
        yAxis_left.axisMinimum = 0f
        yAxis_left.isEnabled = false
    }

空心饼图+数据在外部显示

XML设置

  <com.github.mikephil.charting.charts.PieChart
                    android:paddingBottom="@dimen/dp_10"
                    android:id="@+id/chart1"
                    android:layout_width="match_parent"
                    android:layout_height="200dp" />

代码设置

 private fun initCheckParChart() {
        dataBinding.chart1.setBackgroundColor(resources.getColor(R.color.white))
        //是否使用百分比
        dataBinding.chart1.setUsePercentValues(true)
        dataBinding.chart1.setDrawSlicesUnderHole(false)
        //是否显示描述信息
        dataBinding.chart1.getDescription().setEnabled(false)
        //圆环距离屏幕上下上下左右的距离
        dataBinding.chart1.setExtraOffsets(0f, 5f, 0f, 5f)
        //设置摩擦系数（值越小摩擦系数越大）
        //mChart.setDragDecelerationFrictionCoef(0.95f);
        // 是否显示圆环中间的洞,这个方法为true就是环形图，为false就是饼图
        dataBinding.chart1.setDrawHoleEnabled(true)
        //饼图上是否显示文字标签
        dataBinding.chart1.setDrawEntryLabels(false)
        //        mChart.setDragDecelerationEnabled(false);
        //设置环形中间空白颜色是白色
        dataBinding.chart1.setHoleColor(Color.WHITE)
        //设置圆环颜色,透明度及半径
        dataBinding.chart1.setTransparentCircleColor(Color.WHITE)
        dataBinding.chart1.setTransparentCircleAlpha(110)
        dataBinding.chart1.setTransparentCircleRadius(45f)
        //设置圆环中间洞的半径
//        mChart.setHoleRadius(45f);
        //是否显示洞中间文本
        dataBinding.chart1.setDrawCenterText(false)
        //中间文本字体大小
        dataBinding.chart1.setCenterTextSize(20f)
        //触摸是否可以旋转以及松手后旋转的度数
        dataBinding.chart1.setRotationAngle(-30f)
        //是否可以旋转
        dataBinding.chart1.setRotationEnabled(false)
        dataBinding.chart1.setHighlightPerTapEnabled(false)
        val description = Description()
        description.text = ""
        dataBinding.chart1.setDescription(description)
        //设置比例图
        val l: Legend = dataBinding.chart1.getLegend()
        //右上角显示
        l.verticalAlignment = Legend.LegendVerticalAlignment.BOTTOM
        l.horizontalAlignment = Legend.LegendHorizontalAlignment.CENTER
        //布局方向
        l.orientation = Legend.LegendOrientation.HORIZONTAL
        l.textColor = Color.parseColor("#757575")
        l.setDrawInside(false)
        //设置距离饼图的距离，防止与饼图重合
        l.xEntrySpace = 10f
        //        l.setYEntrySpace(10f);
        l.isEnabled = true
        //        l.setYOffset(0f);
        //数据显示动画
        dataBinding.chart1.animateY(1400, Easing.EasingOption.EaseInOutQuad)
        //设置半透明圆环的半径,看着就有一种立体的感觉
        dataBinding.chart1.setTransparentCircleRadius(45f);
//        //设置环中的文字
//        mChart.setCenterText(fgl + "%\n身份证覆盖率");
    }

数据设置

fun initChart(list: List<YiChangPies>) {
        val strings: MutableList<PieEntry> = ArrayList()
        for (obj in list) {
            strings.add(PieEntry(obj.value.toFloat(), obj.name))
        }
        val colors = ArrayList<Int>()
        colors.add(Color.parseColor("#36CBCB"))
        colors.add(Color.parseColor("#FBD437"))
        colors.add(Color.parseColor("#3AA1FF"))
        colors.add(Color.parseColor("#4ECB73"))
        colors.add(Color.parseColor("#F2637B"))
        colors.add(Color.parseColor("#5DB1FF"))
        colors.add(Color.parseColor("#59D4D4"))
        colors.add(Color.parseColor("#6DD48C"))
        colors.add(Color.parseColor("#FBDB5A"))
        val dataSet = PieDataSet(strings, "")
        dataSet.colors = colors
        //文字在外部显示
        dataSet.setValueLinePart1OffsetPercentage(80f);
        dataSet.setValueLinePart1Length(0.5f);
        dataSet.setValueLinePart2Length(0.5f);
        dataSet.setYValuePosition(PieDataSet.ValuePosition.OUTSIDE_SLICE);
        dataSet.setXValuePosition(PieDataSet.ValuePosition.OUTSIDE_SLICE);
        val pieData = PieData(dataSet)

        //设置是否显示数据实体(百分比)
        pieData.setDrawValues(true)
        //设置外部文字显示
        pieData.setValueFormatter(IValueFormatter { value, entry, dataSetIndex, viewPortHandler ->
            (entry as PieEntry).label + "：" + value.toInt().toString() + "%"
        })
        pieData.setValueTextSize(11f)
        pieData.setValueTextColor(Color.BLACK)
        dataBinding.chart1.setData(pieData)
        dataBinding.chart1.invalidate()
    }

单柱状图

XML设置

 <com.github.mikephil.charting.charts.BarChart
                    android:layout_marginBottom="@dimen/dp_10"
                    android:id="@+id/chart1"
                    android:layout_width="match_parent"
                    android:layout_height="200dp" />

代码设置

  private fun initCheckParChart() {
        dataBinding.chart1.getDescription().setEnabled(false)
        val description = Description()
        description.textSize = 14f //设置描述信息字体大小
        dataBinding.chart1.setNoDataText("暂无数据") //设置空表的描述信息
        dataBinding.chart1.setDrawGridBackground(false) //是否绘制网格背景
        dataBinding.chart1.setDrawValueAboveBar(true) //将Y数据显示在点的上方
        dataBinding.chart1.setPinchZoom(true) //挤压缩放
        dataBinding.chart1.setDrawBarShadow(false)
        dataBinding.chart1.setScaleYEnabled(false)
        dataBinding.chart1.setDoubleTapToZoomEnabled(false) //双击缩放
        dataBinding.chart1.getLegend().setEnabled(false)
        dataBinding.chart1.setTouchEnabled(false)
        // 隐藏 右边 Y 轴
        val mRAxis: YAxis = dataBinding.chart1.getAxisRight()
        mRAxis.isEnabled = false
    }

数据设置

 if(bars.size>0){
            initCheckData(bars)
        } else {
            dataBinding.chart1.setNoDataText("暂无数据")
            dataBinding.chart1.clear()
            dataBinding.chart1.notifyDataSetChanged()
        }


  private fun initCheckData(bars: MutableList<WenTiPies>) {
        val xVals = mutableListOf<String>()
        val entryList = mutableListOf<BarEntry>()
        bars.forEachIndexed { index, wenTiPies ->
            xVals.add(wenTiPies.title)
            entryList.add(BarEntry(index.toFloat(),wenTiPies.num.toFloat()))
        }
        val xAxis: XAxis = dataBinding.chart1.getXAxis()
        xAxis.position = XAxis.XAxisPosition.BOTTOM
        xAxis.setDrawGridLines(false)
        //设置x轴的数据
        xAxis.valueFormatter =
            IAxisValueFormatter { value, axis ->
                if (value < 0 || value >= xVals.size) {
                    ""
                } else {
                    xVals[value.toInt()]
                }
            }
        //显示个数
        //显示个数
        xAxis.labelCount = xVals.size
        val dataSet = BarDataSet(entryList, "")
        //数据和颜色
        val colors = ArrayList<Int>()
        for (i in entryList.indices) {
            colors.add(Color.rgb(18, 139, 237))
        }
        dataSet.colors = colors
        val dataSets = ArrayList<IBarDataSet>()
        dataSets.add(dataSet)
        val bardata = BarData(dataSets)
        bardata.setDrawValues(false)//柱子上的数字不显示值
        bardata.setValueTextColor(Color.BLACK)
        bardata.setValueTextSize(13f)
        dataBinding.chart1.setData(bardata)
        dataBinding.chart1.animateXY(800, 800) //图表数据显示动画
        dataBinding.chart1.setVisibleXRangeMaximum(15f) //设置屏幕显示条数
        dataBinding.chart1.invalidate()
    }