App接入图表：MPAndroidChart，如何创建柱状图、双柱状图以及折线图

一、需求是什么？

我们想实现数据统计、或者物料统计，那么就需要使用到图表，而MPAndroidChart框架可以提供框架给我们进行开发。比如可以实现如下：
在这里插入图片描述

二、引入依赖

implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'

三、创建柱状图(两条)：销售数据和销售量

3.1 XML

    <com.github.mikephil.charting.charts.BarChartandroid:id="@+id/barChart"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_margin="16dp"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent" />

3.2 创建图表

流程：
（1）初始化 BarChart
（2）配置图表样式【重点】
（3）生成 28 天的销售测试数据
（4）给柱状图设置数据【重点】

package com.example.mpandroidchartdemo
import android.graphics.Color
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.github.mikephil.charting.charts.BarChart
import com.github.mikephil.charting.components.XAxis
import com.github.mikephil.charting.data.BarData
import com.github.mikephil.charting.data.BarDataSet
import com.github.mikephil.charting.data.BarEntry
import com.github.mikephil.charting.formatter.IndexAxisValueFormatter
import com.github.mikephil.charting.formatter.ValueFormatterclass MainActivity : AppCompatActivity() {private lateinit var barChart: BarChartoverride fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContentView(R.layout.activity_main)// 1.初始化 BarChartbarChart = findViewById(R.id.barChart)// 2. 配置图表样式：X轴(下方数据)，两Y轴(左侧数据)setupBarChart()// 3. 生成 28 天的销售数据val salesData = generateSalesData()// 4. 设置柱状图数据setBarChartData(salesData)}/*** 配置 BarChart 的基本样式*/private fun setupBarChart() {// 基本配置barChart.setDrawGridBackground(false) // 不绘制网格背景barChart.description.isEnabled = false // 禁用描述barChart.legend.isEnabled = true // 启用图例barChart.setPinchZoom(false) // 禁用捏合缩放barChart.setDrawBarShadow(false) // 不绘制柱状图阴影barChart.setDrawValueAboveBar(true) // 在柱状图上方显示数值// 配置 X 轴val xAxis = barChart.xAxisxAxis.position = XAxis.XAxisPosition.BOTTOM // X 轴显示在底部xAxis.setDrawGridLines(false) // 不绘制 X 轴网格线xAxis.granularity = 1f // 设置最小间隔为 1xAxis.labelCount = 28 // 显示 28 个标签xAxis.valueFormatter = IndexAxisValueFormatter(getXAxisLabels()) // 设置 X 轴标签 这是 MPAndroidChart 库提供的一个内置格式化器类，专门用于处理基于索引（顺序位置）的标签。// ---------注意    Y轴是有两个的。// 配置左侧 Y 轴val leftAxis = barChart.axisLeftleftAxis.setDrawGridLines(true) // 绘制 Y 轴网格线leftAxis.axisMinimum = 0f // Y 轴从 0 开始// 禁用右侧 Y 轴 默认是会显示的。val rightAxis = barChart.axisRightrightAxis.isEnabled = false}/*** 生成 28 天的模拟销售数据* @return List<Pair<Float, Float>>，Pair 的第一个值是售卖数量，第二个值是售卖金额*/private fun generateSalesData(): List<Pair<Float, Float>> {return List(28) { index ->Pair((50 + index * 2).toFloat(), (1000 + index * 50).toFloat())}}/*** 生成 X 轴标签（1 到 28 天） Day 1 Day2 Day3* @return List<String>，X 轴的标签列表*/private fun getXAxisLabels(): List<String> {return List(28) { index -> "Day ${index + 1}" }}/*** 设置柱状图数据* @param salesData 28 天的销售数据*/private fun setBarChartData(salesData: List<Pair<Float, Float>>) {// 1. 创建 BarEntry 列表 --将销售数据转换为 BarEntryval entriesQuantity = mutableListOf<BarEntry>() // 售卖数量val entriesAmount = mutableListOf<BarEntry>()  // 售卖金额// 2. 遍历销售数据，转换为 BarEntry---填充数据salesData.forEachIndexed { index, data ->entriesQuantity.add(BarEntry(index.toFloat(), data.first))  // 售卖数量entriesAmount.add(BarEntry(index.toFloat(), data.second)) // 售卖金额}// 3. 创建 BarDataSetval dataSetQuantity = BarDataSet(entriesQuantity, "售卖数量").apply {color = Color.BLUE // 设置柱状图颜色valueTextColor = Color.BLACK // 设置数值文字颜色valueTextSize = 12f // 设置数值文字大小valueFormatter = object : ValueFormatter() {override fun getFormattedValue(value: Float): String {return value.toInt().toString() // 格式化售卖数量}}}val dataSetAmount = BarDataSet(entriesAmount, "售卖金额").apply {color = Color.GREEN // 设置柱状图颜色valueTextColor = Color.BLACK // 设置数值文字颜色valueTextSize = 12f // 设置数值文字大小valueFormatter = object : ValueFormatter() {override fun getFormattedValue(value: Float): String {return value.toInt().toString() // 格式化售卖金额}}}// 创建 BarDataval barData = BarData(dataSetQuantity, dataSetAmount).apply {barWidth = 0.4f // 设置柱状图宽度 // 设置柱子的宽度}// 设置数据到 BarChartbarChart.data = barDatabarChart.invalidate() // 刷新图表}
}

1、关于配置图表样式
（1）首先进行基本的配置：关于网格，背景等等
（2）配置X轴，也就是下方的轴，day1 day2 day3这些。
（3）配置Y轴，注意，Y轴是有两个的，分左右两侧。

2、给柱状图设置数据
（1）BarEntry是什么：表示柱状图中单个柱子的数据点。每个 BarEntry 包含了该柱子在 X 轴上的位置以及对应的高度（Y 轴值）。

* 主要属性：*     x: 柱子在 X 轴上的位置，通常是一个浮点数。如果 X 轴是类别标签，可以使用索引（如 0, 1, 2, ...）。*     y: 柱子的高度，即 Y 轴上的数值。*     icon: 可选，柱子上方的图标（如气泡图标）。*     data: 可选，附加数据，可以存储任何对象（如字符串、整数等）。*BarDataSet 是一组 BarEntry 的集合，代表柱状图中的一组柱子。

（2）BarDataSet 是什么：表示一组 BarEntry 的集合，代表柱状图中的一组柱子。这个例子中我们有两组柱子，一组是销售数据，一组是销售量。

*主要属性：*     entries: 包含一组 BarEntry 对象。*     label: 数据集的标签，用于图例和描述。*     color: 柱子的颜色。*     highlightColor: 高亮时的颜色。*     barShadowColor: 柱子阴影的颜色。*     barWidth: 柱子的宽度，范围在 0.2 到 1.0 之间。

（3）BarData 是用于管理和组织柱状图（Bar Chart）中所有数据集（BarDataSet）的核心类。它负责将多个数据集整合在一起，并将其应用到图表中进行显示，可以设置柱子的宽度和间距。调用 barChart.invalidate() 就会刷新图表。

在这里插入图片描述

四、创建双柱状图(间距)

关于间距我们使用BarData 来设置。
在这里插入图片描述设置间距这里一定要注意，宽度和间距一定要匹配，不然就会出现位置对不上的问题。

   // 创建 BarDataval barData = BarData( dataSetAmount,dataSetQuantity).apply {val amount = 2//多少条柱，就写多少，这里我们是填充两条val groupSpace = 0.3f //柱状图组之间的间距val barWidth1 = (1f - groupSpace) / amountval barSpace = 0fbarWidth = barWidth1 // 设置柱状图宽度 // 设置柱子的宽度groupBars(0f, groupSpace, barSpace)//用于组之间的间距。}

五、折线图

5.1 XML

<com.github.mikephil.charting.charts.LineChartandroid:id="@+id/lineChart"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_margin="16dp" />

5.2 代码

整体的流程是差不多的，只不过控件换了。

import android.graphics.Color
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.github.mikephil.charting.charts.LineChart
import com.github.mikephil.charting.components.XAxis
import com.github.mikephil.charting.data.Entry
import com.github.mikephil.charting.data.LineData
import com.github.mikephil.charting.data.LineDataSet
import com.github.mikephil.charting.formatter.IndexAxisValueFormatter
import com.github.mikephil.charting.formatter.ValueFormatterclass MainActivity : AppCompatActivity() {private lateinit var lineChart: LineChartoverride fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContentView(R.layout.activity_main)// 初始化 LineChartlineChart = findViewById(R.id.lineChart)// 配置图表样式setupLineChart()// 生成 28 天的销售数据val salesData = generateSalesData()// 设置折线图数据setLineChartData(salesData)}/*** 配置 LineChart 的基本样式*/private fun setupLineChart() {// 基本配置lineChart.setDrawGridBackground(false) // 不绘制网格背景lineChart.description.isEnabled = false // 禁用描述lineChart.legend.isEnabled = true // 启用图例lineChart.setPinchZoom(true) // 启用捏合缩放lineChart.setDrawMarkers(true) // 启用数据点标记// 配置 X 轴val xAxis = lineChart.xAxisxAxis.position = XAxis.XAxisPosition.BOTTOM // X 轴显示在底部xAxis.setDrawGridLines(false) // 不绘制 X 轴网格线xAxis.granularity = 1f // 设置最小间隔为 1xAxis.labelCount = 28 // 显示 28 个标签xAxis.valueFormatter = IndexAxisValueFormatter(getXAxisLabels()) // 设置 X 轴标签// 配置左侧 Y 轴val leftAxis = lineChart.axisLeftleftAxis.setDrawGridLines(true) // 绘制 Y 轴网格线leftAxis.axisMinimum = 0f // Y 轴从 0 开始// 禁用右侧 Y 轴val rightAxis = lineChart.axisRightrightAxis.isEnabled = false}/*** 生成 28 天的模拟销售数据* @return List<Pair<Float, Float>>，Pair 的第一个值是售卖数量，第二个值是售卖金额*/private fun generateSalesData(): List<Pair<Float, Float>> {return List(28) { index ->Pair((50 + index * 2).toFloat(), (1000 + index * 50).toFloat())}}/*** 生成 X 轴标签（1 到 28 天）* @return List<String>，X 轴的标签列表*/private fun getXAxisLabels(): List<String> {return List(28) { index -> "Day ${index + 1}" }}/*** 设置折线图数据* @param salesData 28 天的销售数据*/private fun setLineChartData(salesData: List<Pair<Float, Float>>) {// 创建 Entry 列表val entriesQuantity = mutableListOf<Entry>() // 售卖数量val entriesAmount = mutableListOf<Entry>()  // 售卖金额// 遍历销售数据，转换为 EntrysalesData.forEachIndexed { index, data ->entriesQuantity.add(Entry(index.toFloat(), data.first))  // 售卖数量entriesAmount.add(Entry(index.toFloat(), data.second)) // 售卖金额}// 创建 LineDataSetval dataSetQuantity = LineDataSet(entriesQuantity, "售卖数量").apply {color = Color.BLUE // 设置折线颜色valueTextColor = Color.BLACK // 设置数值文字颜色valueTextSize = 12f // 设置数值文字大小lineWidth = 2f // 设置折线宽度setCircleColor(Color.BLUE) // 设置数据点颜色circleRadius = 4f // 设置数据点半径setDrawValues(true) // 显示数值valueFormatter = object : ValueFormatter() {override fun getFormattedValue(value: Float): String {return value.toInt().toString() // 格式化售卖数量}}}val dataSetAmount = LineDataSet(entriesAmount, "售卖金额").apply {color = Color.GREEN // 设置折线颜色valueTextColor = Color.BLACK // 设置数值文字颜色valueTextSize = 12f // 设置数值文字大小lineWidth = 2f // 设置折线宽度setCircleColor(Color.GREEN) // 设置数据点颜色circleRadius = 4f // 设置数据点半径setDrawValues(true) // 显示数值valueFormatter = object : ValueFormatter() {override fun getFormattedValue(value: Float): String {return value.toInt().toString() // 格式化售卖金额}}}// 创建 LineDataval lineData = LineData(dataSetQuantity, dataSetAmount)// 设置数据到 LineChartlineChart.data = lineDatalineChart.invalidate() // 刷新图表}
}