如何用Kotlin Compose绘制基础折线图？是否有标准实现方式？

当然可行，而且不需要依赖第三方包——用Compose自带的Canvas组件就能实现你的需求，这就是官方支持的轻量标准方案，完全能满足简陋基础的折线图需求。

实现步骤（极简版） #

• 准备数据：先定义简单的数据类存储坐标点

data class Point(val x: Float, val y: Float)

• 用Canvas绘制核心逻辑：
  先做坐标转换（Compose Canvas原点在左上角，需映射数据到绘制区域），再按需绘制坐标轴、折线和数据点：

@Composable
fun BasicLineChart(points: List<Point>, modifier: Modifier = Modifier) {
    Canvas(modifier = modifier.fillMaxSize()) {
        // 预留边距避免内容贴边
        val padding = 30f
        val drawableWidth = size.width - 2 * padding
        val drawableHeight = size.height - 2 * padding

        // 获取数据极值用于坐标映射
        val maxX = points.maxOfOrNull { it.x } ?: 1f
        val minX = points.minOfOrNull { it.x } ?: 0f
        val maxY = points.maxOfOrNull { it.y } ?: 1f
        val minY = points.minOfOrNull { it.y } ?: 0f

        // 绘制坐标轴（可按需删除）
        drawLine(
            color = Color.Black,
            start = Offset(padding, size.height - padding),
            end = Offset(size.width - padding, size.height - padding),
            strokeWidth = 2f
        )
        drawLine(
            color = Color.Black,
            start = Offset(padding, padding),
            end = Offset(padding, size.height - padding),
            strokeWidth = 2f
        )

        // 绘制折线
        if (points.size >= 2) {
            val path = Path().apply {
                points.forEachIndexed { index, point ->
                    // 数据坐标转Canvas坐标（Y轴反转适配Canvas向下增长的特性）
                    val canvasX = padding + ((point.x - minX) / (maxX - minX)) * drawableWidth
                    val canvasY = size.height - padding - ((point.y - minY) / (maxY - minY)) * drawableHeight

                    if (index == 0) moveTo(canvasX, canvasY) else lineTo(canvasX, canvasY)
                }
            }
            drawPath(path, color = Color.Blue, strokeWidth = 2f, style = Stroke())
        }

        // 绘制数据点（可按需删除）
        points.forEach { point ->
            val canvasX = padding + ((point.x - minX) / (maxX - minX)) * drawableWidth
            val canvasY = size.height - padding - ((point.y - minY) / (maxY - minY)) * drawableHeight
            drawCircle(color = Color.Red, center = Offset(canvasX, canvasY), radius = 4f)
        }
    }
}

• 调用示例：

@Composable
fun ChartDemo() {
    val samplePoints = listOf(
        Point(0f, 0f),
        Point(1f, 2f),
        Point(2f, 1f),
        Point(3f, 3f),
        Point(4f, 2.5f)
    )
    BasicLineChart(points = samplePoints, modifier = Modifier.fillMaxSize().padding(16.dp))
}

补充说明 #

• 这个实现完全基于Compose官方API，无任何第三方依赖，是标准的轻量绘制方案
• 你可以根据需求删减代码，比如去掉坐标轴、简化点的样式，完全符合“简陋也可接受”的要求
• 若后续需要图例、动画、交互等复杂功能，再考虑引入成熟的Compose图表库即可

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