如何使用Vico条形图库为条形图中的每一列设置不同的颜色？

Question

我正在使用 Vico 条形图库在 Compose 中设计条形图。

目前，我的代码如下所示，并且每列显示相同的颜色。

CartesianChartHost(
      chart = rememberCartesianChart(
        rememberColumnCartesianLayer(
          ColumnCartesianLayer.ColumnProvider.series(
            rememberLineComponent(
              color = Color(0xFF00B7C2),
              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()
    )

我可以为每列设置不同的颜色吗？

Answer 1

您可以进行一些更改来为每个列实现不同的颜色。这是我的例子

// Define colors
val columnColors = listOf(
    Color(0xFF00B7C2),
    Color(0xFFFF6B6B),
    Color(0xFF4CAF50),
    Color(0xFFFFEB3B),
    // Add more colors as needed
)

CartesianChartHost(
    chart = rememberCartesianChart(
        rememberColumnCartesianLayer(
            // Use indexBasedProvider instead of series
            ColumnCartesianLayer.ColumnProvider.indexBasedProvider { index ->
                rememberLineComponent(
                    color = columnColors[index % columnColors.size],
                    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()
)