如何在Jetpack Compose中创建半圆图表？

核心思路 #

半圆饼图本质是限制饼图的绘制范围为180度（半圆），通过调整drawArc的起始角度和扫过角度来实现，以下是具体实现步骤：

1. 定义数据类 #

先定义存储分片数据的类，包含数值和颜色：

data class PieSlice(
    val value: Float,
    val color: Color
)

2. 实现半圆饼图Composable #

使用Canvas绘制，核心是控制角度范围：

@Composable
fun SemiCirclePieChart(
    slices: List<PieSlice>,
    modifier: Modifier = Modifier,
    radius: Float = 150f,
    strokeWidth: Float = 30f
) {
    val totalValue = slices.sumOf { it.value.toDouble() }.toFloat()
    var currentAngle = 180f // 起始角度设为180度，对应底部，绘制上半圆

    Canvas(modifier = modifier) {
        slices.forEach { slice ->
            // 计算当前分片占半圆的角度（总范围180度）
            val sweepAngle = (slice.value / totalValue) * 180f
            drawArc(
                color = slice.color,
                startAngle = currentAngle,
                sweepAngle = sweepAngle,
                useCenter = false, // 环形效果设为false，实心扇形设为true
                topLeft = Offset(center.x - radius, center.y - radius),
                size = Size(radius * 2, radius * 2),
                style = Stroke(width = strokeWidth) // 环形宽度，实心可去掉此参数
            )
            currentAngle += sweepAngle
        }
    }
}

3. 使用示例 #

调用该Composable并传入测试数据：

@Composable
fun SemiCirclePieChartDemo() {
    val testSlices = listOf(
        PieSlice(30f, Color.Red),
        PieSlice(50f, Color.Blue),
        PieSlice(20f, Color.Green)
    )

    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        SemiCirclePieChart(
            slices = testSlices,
            modifier = Modifier.size(300.dp),
            radius = 120f,
            strokeWidth = 40f
        )
    }
}

关键调整说明 #

• 若要绘制下半圆，将currentAngle初始值改为0f即可
• 若要实心半圆饼图，将useCenter设为true，并移除style = Stroke(...)参数
• 可添加动画效果：用animateFloatAsState包裹sweepAngle的计算逻辑，实现分片展开的动画

内容的提问来源于stack exchange，提问作者Jhonny Luis