学习

Graphs · Jimmy Huang's Blog

对比点	MPAndroidChart	Compose 自绘
实现难度	较低	较高
功能完整度	高	需要自己实现
坐标轴	库自动处理	需要自己画或自己布局
动画	库内置	需要自己写
自定义自由度	受库 API 限制	很自由
Compose 兼容方式	需要 AndroidView	原生 Compose
适合场景	快速做复杂图表	简单图表或高度自定义 UI

对比点	Bar Chart	Pie Chart
表达重点	比较数值大小	表达占比
图形基础	矩形条	圆形扇区
Compose 实现	Row + Box + Text 即可	通常需要 Canvas
是否适合显示很多类别	比较适合	类别太多会难读
本周例子	步数 / 支出数值	支出占比

对比点	Row / Column / Box	Canvas
主要用途	布局排版	自定义绘图
适合画矩形条吗	适合	也可以，但没必要
适合画扇形吗	不适合	适合
难度	较低	较高
本周用途	Compose Bar Chart	Compose Pie Chart

kotlin

pluginManagement {
    repositories {
        google()
        mavenCentral()
        gradlePluginPortal()
    }
}

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

rootProject.name = "GraphLab"
include(":app")

kotlin

package com.example.graphlab

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.FilterChip
import androidx.compose.material3.FilterChipDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.viewinterop.AndroidView
import com.github.mikephil.charting.charts.BarChart
import com.github.mikephil.charting.charts.PieChart
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.data.PieData
import com.github.mikephil.charting.data.PieDataSet
import com.github.mikephil.charting.data.PieEntry
import com.github.mikephil.charting.formatter.IndexAxisValueFormatter
import com.github.mikephil.charting.formatter.ValueFormatter
import com.github.mikephil.charting.utils.ColorTemplate

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            MaterialTheme {
                Surface(modifier = Modifier.fillMaxSize()) {
                    LibraryGraphScreen()
                }
            }
        }
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun LibraryGraphScreen() {
    var selectedMode by remember { mutableStateOf("Pie Chart") }
    val modes = listOf("Pie Chart", "Bar Chart")

    Column(modifier = Modifier.padding(16.dp)) {
        Spacer(modifier = Modifier.height(46.dp))

        Text(
            text = "Data Visualisation with Charts",
            style = MaterialTheme.typography.headlineSmall
        )

        Spacer(modifier = Modifier.height(12.dp))

        Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
            modes.forEach { mode ->
                FilterChip(
                    selected = selectedMode == mode,
                    onClick = { selectedMode = mode },
                    label = {
                        Text(
                            text = mode,
                            color = if (selectedMode == mode) Color.White else Color.Black
                        )
                    },
                    colors = FilterChipDefaults.filterChipColors(
                        selectedContainerColor = Color(0xFF5A5D9D),
                        containerColor = Color(0xFFE0E0E0)
                    )
                )
            }
        }

        Spacer(modifier = Modifier.height(16.dp))

        when (selectedMode) {
            "Pie Chart" -> LibraryPieChartScreen()
            "Bar Chart" -> LibraryBarChartScreen()
        }
    }
}

@Composable
fun LibraryBarChartScreen() {
    val barEntries = listOf(
        BarEntry(0f, 1070f),
        BarEntry(1f, 4050f),
        BarEntry(2f, 3890f),
        BarEntry(3f, 5599f),
        BarEntry(4f, 2300f),
        BarEntry(5f, 4055f),
        BarEntry(6f, 3200f)
    )

    val barDataSet = BarDataSet(barEntries, "Steps")
    barDataSet.colors = ColorTemplate.COLORFUL_COLORS.toList()

    val barData = BarData(barDataSet)
    barData.barWidth = 0.8f

    AndroidView(
        modifier = Modifier.fillMaxSize(),
        factory = { context ->
            BarChart(context).apply {
                data = barData

                description.isEnabled = false

                setFitBars(true)

                xAxis.position = XAxis.XAxisPosition.BOTTOM
                xAxis.valueFormatter = IndexAxisValueFormatter(
                    listOf("Sun", "Mon", "Tues", "Wed", "Thurs", "Fri", "Sat")
                )
                xAxis.granularity = 1f
                xAxis.setDrawGridLines(false)

                axisRight.isEnabled = false

                animateY(4000)

                invalidate()
            }
        }
    )
}

@Composable
fun LibraryPieChartScreen() {
    val pieEntries = listOf(
        PieEntry(35f, "Bills"),
        PieEntry(50f, "Mortgage"),
        PieEntry(5f, "Petrol"),
        PieEntry(10f, "Food")
    )

    val pieDataSet = PieDataSet(pieEntries, "Pie Data Set")
    pieDataSet.colors = ColorTemplate.COLORFUL_COLORS.toList()
    pieDataSet.xValuePosition = PieDataSet.ValuePosition.INSIDE_SLICE
    pieDataSet.yValuePosition = PieDataSet.ValuePosition.INSIDE_SLICE
    pieDataSet.valueFormatter = PercentValueFormatter()
    pieDataSet.valueTextSize = 14f

    val pieData = PieData(pieDataSet)

    AndroidView(
        modifier = Modifier.fillMaxSize(),
        factory = { context ->
            PieChart(context).apply {
                data = pieData

                description.isEnabled = false

                centerText = "Expenses"
                setDrawCenterText(true)

                setEntryLabelTextSize(14f)
                setUsePercentValues(false)

                animateY(4000)

                invalidate()
            }
        }
    )
}

class PercentValueFormatter : ValueFormatter() {
    override fun getFormattedValue(value: Float): String {
        return "${value.toInt()}%"
    }
}

kotlin

val barEntries = listOf(
    BarEntry(0f, 1070f),
    BarEntry(1f, 4050f),
    BarEntry(2f, 3890f),
    BarEntry(3f, 5599f),
    BarEntry(4f, 2300f),
    BarEntry(5f, 4055f),
    BarEntry(6f, 3200f)
)

kotlin

package com.example.graphlab

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.widthIn
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.FilterChip
import androidx.compose.material3.FilterChipDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import java.util.Locale

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            MaterialTheme {
                Surface(modifier = Modifier.fillMaxSize()) {
                    ComposeGraphScreen()
                }
            }
        }
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ComposeGraphScreen() {
    var selectedMode by remember { mutableStateOf("Pie Chart") }
    val modes = listOf("Pie Chart", "Bar Chart")

    val data = mapOf(
        "Food" to 190.0,
        "Transport" to 80.0,
        "Shopping" to 170.0,
        "Entertainment" to 75.0,
        "Other" to 160.0
    )

    Column(modifier = Modifier.padding(16.dp)) {
        Spacer(modifier = Modifier.height(16.dp))

        Text(
            text = "Spending Analysis",
            style = MaterialTheme.typography.headlineSmall
        )

        Spacer(modifier = Modifier.height(12.dp))

        Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
            modes.forEach { mode ->
                FilterChip(
                    selected = selectedMode == mode,
                    onClick = { selectedMode = mode },
                    label = {
                        Text(
                            text = mode,
                            color = if (selectedMode == mode) Color.White else Color.Black
                        )
                    },
                    colors = FilterChipDefaults.filterChipColors(
                        selectedContainerColor = Color(0xFF5A5D9D),
                        containerColor = Color(0xFFE0E0E0)
                    )
                )
            }
        }

        Spacer(modifier = Modifier.height(16.dp))

        when (selectedMode) {
            "Pie Chart" -> ComposePieChart(data)
            "Bar Chart" -> ComposeBarChart(data)
        }
    }
}

@Composable
fun ComposeBarChart(data: Map<String, Double>) {
    if (data.isEmpty()) return

    val maxValue = 200.0

    val colors = listOf(
        Color(0xFF5A5D9D),
        Color(0xFF42A5F5),
        Color(0xFFFFCA28),
        Color(0xFF66BB6A),
        Color(0xFFAB47BC)
    )

    val labels = data.keys.toList()
    val values = data.values.toList()

    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(end = 16.dp),
        verticalArrangement = Arrangement.spacedBy(12.dp)
    ) {
        labels.forEachIndexed { index, label ->
            val barFraction = (values[index] / maxValue).toFloat().coerceIn(0f, 1f)

            Row(
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.spacedBy(8.dp),
                modifier = Modifier.fillMaxWidth()
            ) {
                Text(
                    text = label,
                    modifier = Modifier.widthIn(min = 90.dp, max = 160.dp),
                    fontSize = 14.sp,
                    maxLines = 1
                )

                Box(
                    modifier = Modifier
                        .weight(1f)
                        .height(24.dp)
                        .background(Color.LightGray)
                ) {
                    Box(
                        modifier = Modifier
                            .fillMaxWidth(barFraction)
                            .fillMaxHeight()
                            .background(colors[index % colors.size])
                    )
                }

                Text(
                    text = values[index].toInt().toString(),
                    modifier = Modifier.width(50.dp),
                    fontSize = 14.sp
                )
            }
        }
    }
}

@Composable
fun ComposePieChart(data: Map<String, Double>) {
    if (data.isEmpty()) return

    val total = data.values.sum()

    val colors = listOf(
        Color(0xFF5A5D9D),
        Color(0xFF42A5F5),
        Color(0xFFFFCA28),
        Color(0xFF66BB6A),
        Color(0xFFAB47BC)
    )

    val labels = data.keys.toList()
    val values = data.values.toList()

    val colorMap = labels.mapIndexed { index, label ->
        label to colors[index % colors.size]
    }.toMap()

    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        Box(modifier = Modifier.size(240.dp)) {
            Canvas(modifier = Modifier.fillMaxSize()) {
                var startAngle = -90f

                labels.forEach { label ->
                    val value = data[label] ?: 0.0
                    val sweepAngle = (value / total * 360f).toFloat()

                    drawArc(
                        color = colorMap[label] ?: Color.Gray,
                        startAngle = startAngle,
                        sweepAngle = sweepAngle,
                        useCenter = true
                    )

                    startAngle += sweepAngle
                }
            }
        }

        Spacer(modifier = Modifier.height(16.dp))

        Column(verticalArrangement = Arrangement.spacedBy(6.dp)) {
            labels.forEachIndexed { index, label ->
                val value = values[index]
                val percent = value / total * 100

                Row(verticalAlignment = Alignment.CenterVertically) {
                    Box(
                        modifier = Modifier
                            .size(12.dp)
                            .background(colorMap[label] ?: Color.Gray)
                    )

                    Spacer(modifier = Modifier.width(8.dp))

                    Text(
                        text = "$label:${value.toInt()} (${String.format(Locale.ENGLISH, "%.1f", percent)}%)",
                        fontSize = 14.sp,
                        color = Color.Black
                    )
                }
            }
        }
    }
}

Graphs

Overview

Goal

Graphs

Overview

Goal

Task 0: 创建 GraphLab 项目

Step 0.1：创建新 Android 项目

Step 0.2：先运行一次空项目

Task 1: 添加 MPAndroidChart 外部依赖

Step 1.1：打开 settings.gradle.kts

Step 1.2：添加 JitPack repository

Step 1.3：添加 MPAndroidChart dependency

Step 1.4：如果使用 Version Catalog，检查 libs.versions.toml

Step 1.5：验证 Gradle Sync 成功

Task 2: 使用 MPAndroidChart 创建 Pie Chart 和 Bar Chart

Step 2.1：替换 MainActivity.kt

Step 2.2：理解 LibraryGraphScreen 在做什么

Step 2.3：理解 FilterChip 在做什么

Step 2.4：理解 LibraryBarChartScreen 在做什么

Step 2.5：理解 AndroidView 在做什么

Step 2.6：理解 LibraryPieChartScreen 在做什么

Step 2.7：理解 PercentValueFormatter 在做什么

Task 3: 运行并验证 MPAndroidChart 图表

Step 3.1：运行 App

Step 3.2：切换到 Bar Chart

Task 4: 使用 Jetpack Compose 自己创建 Bar Chart 和 Pie Chart

Step 4.1：替换 MainActivity.kt 为 Compose 自绘版本

Step 4.2：理解 ComposeBarChart 在做什么

Step 4.3：理解 Compose Bar Chart 为什么不用 Canvas

Step 4.4：理解 ComposePieChart 为什么需要 Canvas

Step 4.5：理解角度计算

Step 4.6：理解 startAngle 的作用

Task 5: 运行并验证 Compose 自绘图表

Step 5.1：运行 Compose 自绘版本

Step 5.2：切换到 Compose Bar Chart

Summary

本周必须理解的知识点

1. MPAndroidChart 是什么

2. JitPack 是什么

3. AndroidView 是什么

4. Canvas 是什么

5. FilterChip 是什么

关键概念对比

MPAndroidChart vs Compose 自绘图表

Bar Chart vs Pie Chart

Row / Column / Box vs Canvas