我想用不同的颜色为A，B，C绘制我的柱状图，但我有3个相同颜色的柱状图，即黑色，我猜这是在fill字段问题中。如果我只绘制一个柱状图，那么它将以正确的颜色打印，但当它超过1时，它将全部为黑色。我使用recharts
有什么想法吗？

export default function Overview() {
    const { ratingBar } = graphs ?? {}
    const COLORS = {
        'A': 'red',
        'B': 'green',
        'C': 'orange',
    }
    function ratingGraph() {
        const data = ratingBar
        return ({
            graph: {
                type: 'bar',
                showTooltip: true,
                showXAxis: true,
                showYAxis: true,
                showLegend: true,
                container: {
                    data,
                },
                bars: [
                    {
                        dataKey: 'count',
                        fill: COLORS[data.map((m) => m.title)],
                    }
                ],
                xaxis: {
                    dataKey: 'title',
                    tick: { style: { fontSize: '.9rem' } },
                },
                yaxis: {
                    dataKey: 'count',
                    domain: [0, 100],
                },
            },
        }).graph
    }
    return (
        <div >
            {...ratingGraph()}
        </div>
    )
}

下面是我的api数据：

{
    "ratingBar": [
        {
            "title": "A",
            "count": 2
        },
        {
            "title": "B",
            "count": 48
        },
        {
            "title": "C",
            "count": 78
        }
    ]
}