如何为Victory Native条形图的每个柱子设置独立颜色？

问题 #

希望为Victory Native条形图的每个柱子设置独立颜色，通过柱子的索引对应colorMap数组中的颜色。当前直接在style.data.fill中设置colorMap未达到预期效果，求具体实现方法。

附现有代码：

const colorMap = [
    '#851b48',
    '#96324d',
    '#a64851',
    '#b75f56',
    '#c8765a',
    '#d88c5f',
];

<VictoryChart
    domainPadding={40}
    padding={{ bottom: 40, top: 10, right: 0, left: 0 }}
    width={Dimensions.get('screen').width - 48}
>
    <VictoryBar
        animate={{
            duration: 2000,
            onLoad: { duration: 1000 },
        }}
        barWidth={16}
        data={data}
        horizontal
        labelComponent={<VictoryLabel dy={-16} x={-8} />}
        labels={data => {
            return `${data.datum.variety} ${Math.round(
                data.datum.count, // animation causes slight rounding issues
            )}`;
        }}
        style={{
            labels: {
                fontSize: 10,
            },
            data: { fill: colorMap },
        }}
        x={x}
        y={y}
    />
    <VictoryAxis dependentAxis offsetY={55} />
</VictoryChart>

解决方法 #

VictoryBar不支持直接将颜色数组赋值给style.data.fill，需要通过动态函数绑定颜色来实现，以下两种方案任选其一：

方案1：预处理数据绑定颜色 #

给原数据的每个项添加color字段，对应colorMap里的颜色：

// 按索引匹配颜色，取模避免索引越界
const coloredData = data.map((item, index) => ({
    ...item,
    color: colorMap[index % colorMap.length]
}));

然后修改VictoryBar的样式配置，读取数据项的color字段：

<VictoryBar
    // 其他属性保持不变
    data={coloredData}
    style={{
        labels: { fontSize: 10 },
        data: { fill: ({ datum }) => datum.color }
    }}
/>

方案2：直接通过索引匹配（无需修改原数据） #

在fill的函数中直接通过柱子的索引获取对应颜色：

<VictoryBar
    // 其他属性保持不变
    style={{
        labels: { fontSize: 10 },
        data: { 
            fill: ({ index }) => colorMap[index % colorMap.length] 
        }
    }}
/>

核心逻辑 #

Victory组件支持将样式属性设置为函数，函数会接收当前数据项的datum（数据内容）和index（索引）参数，通过这两个参数就能动态返回对应颜色，实现每个柱子独立配色的效果。

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