Kotlin，jetpack compose，Android，MPAndroidChart，折线图示例

复制代码

dependencies {
     implementation("com.github.PhilJay:MPAndroidChart:v3.1.0")

}

复制代码

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()
        maven { url = uri("https://jitpack.io") }
    }
}


package com.example.mychart

import android.graphics.Paint
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.example.mychart.ui.theme.MyChartTheme
import android.graphics.Color
import android.view.ViewGroup
import android.view.ViewGroup.LayoutParams.MATCH_PARENT
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp
import androidx.compose.ui.viewinterop.AndroidView
import com.github.mikephil.charting.charts.LineChart
import com.github.mikephil.charting.components.XAxis
import com.github.mikephil.charting.components.YAxis
import com.github.mikephil.charting.data.*
import com.github.mikephil.charting.utils.ColorTemplate


class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            MyChartTheme {
                LineChartScreen()
            }
        }
    }
}
@Composable
// 定义一个名为 LineChartScreen 的函数，用于展示折线图界面
fun LineChartScreen() {
    // 使用 Column 布局来垂直排列子组件
    Column(modifier = Modifier.fillMaxSize().padding(16.dp)) {
        // 添加一个文本组件，显示标题 "Jetpack Compose + MPAndroidChart 折线图示例"
        Text(text = "Jetpack Compose + MPAndroidChart 折线图示例")
        // 添加一个垂直间距，高度为 16.dp
        Spacer(modifier = Modifier.height(16.dp))
        // 添加一个折线图视图组件
        LineChartView()
    }
}

/*
在 Jetpack Compose 中，AndroidView 是一个用于将传统 Android View 组件嵌入到 Compose UI 树中的关键工具。以下是其核心用法详解：

一、基础用法
1. 基本语法
kotlin
AndroidView(
    factory = { context -> // 创建 View 实例
        TextView(context).apply {
            text = "传统 TextView"
        }
    },
    modifier = Modifier.fillMaxWidth(), // 布局修饰符
    update = { view -> // 更新逻辑（可选）
        view.setTextColor(Color.RED)
    }
)
2. 参数解析
参数  作用
factory 创建 View 实例的函数（必填）
modifier    控制布局（尺寸、位置等）
update  当重组（Recomposition）时触发的更新回调，用于动态修改 View 属性
 */

@Composable
fun LineChartView() {
    // 获取当前上下文
    val context = LocalContext.current

    // 使用 AndroidView 在 Compose 中嵌入原生视图
    AndroidView(
        // 设置视图的修饰符，使其填满父布局的宽度并固定高度为300dp
        modifier = Modifier.fillMaxWidth().height(300.dp),
        // 创建 LineChart 视图的工厂函数
        factory = { ctx ->
            // 创建 LineChart 实例，LineChart 是 MPAndroidChart 库中用于绘制折线图的核心组件
            LineChart(ctx).apply {
                // 设置布局参数，使其宽高都为 MATCH_PARENT
                layoutParams = ViewGroup.LayoutParams(MATCH_PARENT, MATCH_PARENT)
                // 设置背景颜色为白色
                setBackgroundColor(Color.WHITE)

                // 禁用描述文本
                description.isEnabled = false

                // 启用触摸手势
                setTouchEnabled(true)

                // 启用缩放和拖动
                isDragEnabled = true
                setScaleEnabled(true)
                setPinchZoom(true)

                // 配置 X 轴
                xAxis.apply {
                    // 设置 X 轴位置在底部
                    position = XAxis.XAxisPosition.BOTTOM
                    // 设置 X 轴文本颜色为黑色
                    textColor = Color.BLACK
                    // 不绘制网格线
                    setDrawGridLines(false)
                    // 绘制轴线条
                    setDrawAxisLine(true)
                }

                // 配置 Y 轴（左侧）
                axisLeft.apply {
                    // 设置 Y 轴文本颜色为黑色
                    textColor = Color.BLACK
                    // 绘制网格线
                    setDrawGridLines(true)
                }

                // 关闭 Y 轴右侧
                axisRight.isEnabled = false

                // 设置数据
                data = generateLineData()
            }
        }
    )
}

// 生成折线图数据
// 定义一个函数 generateLineData，用于生成折线图数据
/*
LineData
├── List<ILineDataSet>  // 数据集集合（支持多折线）
├── ValueFormatter      // 数值格式化器
├── float               // 数值文字大小
├── int                 // 数值文字颜色
└── boolean             // 是否绘制数值
 */
fun generateLineData(): LineData {
    // 创建一个可变的 Entry 列表，用于存储数据点,Entry 是 MPAndroidChart 库中的一个类，用于表示折线图上的一个数据点
    val entries = mutableListOf<Entry>()

    // 假设有 10 个数据点
    for (i in 0..9) {
        val value = (Math.random() * 100).toFloat() // 随机生成 0-100 的数据
        entries.add(Entry(i.toFloat(), value))
    }
/*
LineDataSet 是 MPAndroidChart 库中管理单条折线数据及样式的核心类，其对象结构可分为 数据层、样式层 和 行为层 三大部分
 */
    val dataSet = LineDataSet(entries, "示例折线")
    dataSet.apply {
        color = ColorTemplate.COLORFUL_COLORS[0]
        setCircleColor(ColorTemplate.COLORFUL_COLORS[1])
        valueTextColor = Color.BLACK
        lineWidth = 2f
        circleRadius = 4f
        setDrawValues(true)
        setDrawCircles(true)
    }

    return LineData(dataSet)
}