300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > MPAndroidChart 折线图 饼状图 条形图 最简单使用方式(kotlin)

MPAndroidChart 折线图 饼状图 条形图 最简单使用方式(kotlin)

时间:2021-09-02 08:51:21

相关推荐

MPAndroidChart 折线图 饼状图 条形图 最简单使用方式(kotlin)

首先,我是一个小白,最近做安卓,突然碰到需要做一个饼状图 一个折线图 一个条形图显示出来,没有什么要求,只要能显示出来就可以,既然这样的话,那我就需要找到这三个图最简单的实现方式,发现使用MPAndroidChart可以快速实现。

我搜了一下 MPAndroidChart的使用方法,不管是实现哪一种图,找到的方法里面都是一大堆代码,并没有说最简单的使用方法,大部分都是java所写,因为我是使用kotlin写安卓,java写的安卓代码能看懂,但是转换起来也是有一点麻烦,在不了解MPAndroidChart的使用逻辑的情况下,看着那一堆代码让我很头大。

在搜了很多文章并且自己进行实验后,我总结出了使用kotlin实现这三种图最简单的方式,希望能够帮助到跟我一样初次使用MPAndroidChart的人。

先看一下最终能实现的效果

首先需要MPAndroidChart添加依赖

我这里使用的是本地依赖方式,如果没有MPAndroidChart插件的话点击

链接:/s/1ynIBQYHm9FNSjOu6zyYqlQ

提取码:lkop

下载,下载好之后

将MPAndroidChart插件复制粘贴到libs文件夹下,并且在app目录下的build.gradle文件中添加

implementation files('libs/MPAndroidChart-v3.1.0.aar')

然后点击右上角的Sync Now即可完成依赖添加

2.然后看代码

1.首先在布局文件中添加组件

<?xml version="1.0" encoding="utf-8"?><androidx.constraintlayout.widget.ConstraintLayout xmlns:android="/apk/res/android"xmlns:app="/apk/res-auto"xmlns:tools="/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"><com.github.mikephil.charting.charts.PieChart //饼状图组件android:id="@+id/piechart"android:layout_width="match_parent"android:layout_height="200dp"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent" /><com.github.mikephil.charting.charts.BarChart //条形图组件android:id="@+id/barchart"android:layout_width="match_parent"android:layout_height="200dp"android:layout_marginTop="32dp"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintHorizontal_bias="0.0"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toBottomOf="@+id/piechart" /><com.github.mikephil.charting.charts.LineChart //折线图组件android:id="@+id/linechart"android:layout_width="match_parent"android:layout_height="200dp"android:layout_marginTop="32dp"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toBottomOf="@+id/barchart" /></androidx.constraintlayout.widget.ConstraintLayout>

2.下面是饼状图代码

fun pieChart() { //饼状图val pc = findViewById<PieChart>(R.id.piechart) //首先获取饼状图组件val data = ArrayList<PieEntry>() //声明一个数组用来存饼状图的数据,这里要求数组类型是 PieEntrydata.add(PieEntry(36.7f, "有违章"))//添加数据data.add(PieEntry(13.3f, "无违章"))//添加数据val color = ArrayList<Int>() //设置颜色 声明一个数组来存储饼状图每一部分的颜色color.add(Color.parseColor("#1abc9c"))//添加数据color.add(Color.parseColor("#ffa502"))//添加数据val pieDataSet = PieDataSet(data, "") //这里应该是一个中间变量先把数据和颜色传递到这里pieDataSet.setColors(color)val pieData = PieData(pieDataSet) //然后这里传递给PieDatapc.setData(pieData) //最后一步,把数据传递给饼状图组件,有数据之后饼状图就会显示了}

3.下面是条形图代码

fun barchart() {//条形图val barChart = findViewById<BarChart>(R.id.barchart)//首先获取条形图组件val barEntryList = ArrayList<BarEntry>() //声明一个数组用来存条形图的数据,这里要求数组类型是 BarEntrybarEntryList.add(BarEntry(1f, 11f)) //添加数据barEntryList.add(BarEntry(2f, 36f)) //添加数据barEntryList.add(BarEntry(3f, 23f)) //添加数据val colors = ArrayList<Int>() //设置颜色 声明一个数组来存储条形图每一部分的颜色 这里设置三个一样的颜色colors.add(Color.parseColor("#FFBB86FC")) //添加数据colors.add(Color.parseColor("#FFBB86FC")) //添加数据colors.add(Color.parseColor("#FFBB86FC")) //添加数据val barDataSet = BarDataSet(barEntryList, "") //这里应该是一个中间变量先把数据和颜色传递到这里barDataSet.setColors(colors)val barData = BarData(barDataSet) //然后这里传递给BarDatabarChart.setData(barData) //最后一步,把数据传递给条形图组件,有数据之后条形图就会显示了}

4.下面是折线图代码

fun linechart() { //折线图val lc = findViewById<LineChart>(R.id.linechart)//首先获取折线图组件lc.setDrawBorders(true) //设置边框 可不写,写上美观程度好一些//设置数据val entries = ArrayList<Entry>() //声明一个数组用来存折线图的数据,这里要求数组类型是 Entryentries.add(Entry(1f, 20f)) //添加数据entries.add(Entry(2f, 40f)) //添加数据entries.add(Entry(3f, 30f)) //添加数据entries.add(Entry(4f, 60f)) //添加数据entries.add(Entry(5f, 20f)) //添加数据val lineDataSet = LineDataSet(entries, "温度") //将数据传递给中间变量lineDataSet.setColor(Color.parseColor("#FFBB86FC")) //设置折线图的颜色val data = LineData(lineDataSet) //然后这里把数据传递给LineDatalc.setData(data) //最后一步,把数据传递给条形图组件,有数据之后折线图就会显示了}

5.最后,我们在oncreate里面调用这几个函数

override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContentView(R.layout.activity_main)pieChart()//给饼状图写入数据barchart()//给条形图写入数据linechart()//给折线图写入数据}

最后就变成了

package com.example.testimport android.content.res.Resourcesimport android.graphics.Colorimport android.icu.number.IntegerWidthimport androidx.appcompat.app.AppCompatActivityimport android.os.Bundleimport android.service.autofill.FieldClassification.Matchimport androidx.core.app.NotificationCompat.getColorimport androidx.core.content.ContextCompat.getColorimport com.github.mikephil.charting.charts.BarChartimport com.github.mikephil.charting.charts.LineChartimport com.github.mikephil.charting.charts.PieChartimport com.github.mikephil.charting.data.BarDataimport com.github.mikephil.charting.data.BarDataSetimport com.github.mikephil.charting.data.BarEntryimport com.github.mikephil.charting.data.Entryimport com.github.mikephil.charting.data.LineDataimport com.github.mikephil.charting.data.LineDataSetimport com.github.mikephil.charting.data.PieDataimport com.github.mikephil.charting.data.PieDataSetimport com.github.mikephil.charting.data.PieEntryimport com.google.android.material.color.MaterialColors.getColorclass MainActivity : AppCompatActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContentView(R.layout.activity_main)pieChart()//给饼状图写入数据barchart()//给条形图写入数据linechart()//给折线图写入数据}fun pieChart() { //饼状图val pc = findViewById<PieChart>(R.id.piechart) //首先获取饼状图组件val data = ArrayList<PieEntry>() //声明一个数组用来存饼状图的数据,这里要求数组类型是 PieEntrydata.add(PieEntry(36.7f, "有违章"))//添加数据data.add(PieEntry(13.3f, "无违章"))//添加数据val color = ArrayList<Int>() //设置颜色 声明一个数组来存储饼状图每一部分的颜色color.add(Color.parseColor("#1abc9c"))//添加数据color.add(Color.parseColor("#ffa502"))//添加数据val pieDataSet = PieDataSet(data, "") //这里应该是一个中间变量先把数据和颜色传递到这里pieDataSet.setColors(color)val pieData = PieData(pieDataSet) //然后这里传递给PieDatapc.setData(pieData) //最后一步,把数据传递给饼状图组件,有数据之后饼状图就会显示了}fun barchart() {//条形图val barChart = findViewById<BarChart>(R.id.barchart)//首先获取条形图组件val barEntryList = ArrayList<BarEntry>() //声明一个数组用来存条形图的数据,这里要求数组类型是 BarEntrybarEntryList.add(BarEntry(1f, 11f)) //添加数据barEntryList.add(BarEntry(2f, 36f)) //添加数据barEntryList.add(BarEntry(3f, 23f)) //添加数据val colors = ArrayList<Int>() //设置颜色 声明一个数组来存储条形图每一部分的颜色 这里设置三个一样的颜色colors.add(Color.parseColor("#FFBB86FC")) //添加数据colors.add(Color.parseColor("#FFBB86FC")) //添加数据colors.add(Color.parseColor("#FFBB86FC")) //添加数据val barDataSet = BarDataSet(barEntryList, "") //这里应该是一个中间变量先把数据和颜色传递到这里barDataSet.setColors(colors)val barData = BarData(barDataSet) //然后这里传递给BarDatabarChart.setData(barData) //最后一步,把数据传递给条形图组件,有数据之后条形图就会显示了}fun linechart() { //折线图val lc = findViewById<LineChart>(R.id.linechart)//首先获取折线图组件lc.setDrawBorders(true) //设置边框 可不写,写上美观程度好一些//设置数据val entries = ArrayList<Entry>() //声明一个数组用来存折线图的数据,这里要求数组类型是 Entryentries.add(Entry(1f, 20f)) //添加数据entries.add(Entry(2f, 40f)) //添加数据entries.add(Entry(3f, 30f)) //添加数据entries.add(Entry(4f, 60f)) //添加数据entries.add(Entry(5f, 20f)) //添加数据val lineDataSet = LineDataSet(entries, "温度") //将数据传递给中间变量lineDataSet.setColor(Color.parseColor("#FFBB86FC")) //设置折线图线的颜色val data = LineData(lineDataSet) //然后这里把数据传递给LineDatalc.setData(data) //最后一步,把数据传递给条形图组件,有数据之后折线图就会显示了}}

最终呈现出文章开头的效果

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。