如何用Vico柱状图库为Compose柱状图的每个柱子设不同颜色？

当然可以实现每个柱子显示不同颜色，核心是把原来的ColumnProvider.series替换为ColumnProvider.perIndex，这个方法允许你根据柱子的索引返回对应的样式组件，从而实现颜色差异化。

修改后的代码示例：

CartesianChartHost(
    chart = rememberCartesianChart(
        rememberColumnCartesianLayer(
            // 替换为perIndex，根据索引返回不同样式
            ColumnCartesianLayer.ColumnProvider.perIndex { index ->
                rememberLineComponent(
                    // 根据索引设置不同颜色，可自定义颜色规则
                    color = when(index) {
                        0 -> Color(0xFF00B7C2)
                        1 -> Color(0xFFF7931E)
                        2 -> Color(0xFF3B5998)
                        else -> Color(0xFF9B59B6)
                    },
                    thickness = 8.dp,
                    shape = CorneredShape.rounded(topLeftPercent = 50, topRightPercent = 50),
                )
            },
            columnCollectionSpacing = 16.dp,
            rangeProvider = rangeProvider
        ),
        startAxis = VerticalAxis.rememberStart(),
        bottomAxis = HorizontalAxis.rememberBottom(
            valueFormatter = getBottomAxisValueFormatter(
                chartType = chartType, daysInMonth = daysInMonth
            ),
            itemPlacer = remember {
                HorizontalAxis.ItemPlacer.aligned(spacing = 1, addExtremeLabelPadding = true)
            },
        ),
        marker = rememberMarker(),
        decorations = listOf(rememberComposeHorizontalLine(target))
    ), model = model, modifier = modifier
        .padding(8.dp)
        .fillMaxSize()
)

关键说明 #

• perIndex方法会为每个柱子的索引调用传入的lambda，你可以在这里根据索引、数据值等自定义颜色逻辑
• 颜色规则可灵活调整：比如从预先定义的颜色列表中循环取值（colorList[index % colorList.size]），或者根据数据大小动态分配颜色

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