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)
}
相关推荐
2501_915918414 小时前
uni-app 项目 iOS 上架踩坑经验总结 从证书到审核的避坑指南
android·ios·小程序·https·uni-app·iphone·webview
游戏开发爱好者84 小时前
iOS 上架 uni-app 流程全解析,从打包到发布的完整实践
android·ios·小程序·https·uni-app·iphone·webview
雨白9 小时前
实现双向滑动的 ScalableImageView(上)
android
木头左9 小时前
结合机器学习的Backtrader跨市场交易策略研究
人工智能·机器学习·kotlin
Y40900110 小时前
数据库基础知识——聚合函数、分组查询
android·数据库
没有了遇见14 小时前
Android 原生定位(替代高德 / 百度等三方定位)<终极版本>
android
2501_9160088915 小时前
iOS 抓包工具有哪些?全面盘点主流工具与功能对比分析
android·ios·小程序·https·uni-app·iphone·webview
2501_9159214315 小时前
iOS混淆工具实战 视频流媒体类 App 的版权与播放安全保护
android·ios·小程序·https·uni-app·iphone·webview
CYRUS_STUDIO16 小时前
LLVM 全面解析:NDK 为什么离不开它?如何亲手编译调试 clang
android·编译器·llvm
CYRUS_STUDIO16 小时前
静态分析神器 + 动态调试利器:IDA Pro × Frida 混合调试实战
android·逆向