Javascript 如何更改Recharts中每个条的颜色？

我的一页上有一个条形图。它从其他页面传递的道具中获取数据。我有一个条形图显示了三个不同的数据段。一个显示“正确”，另一个显示“不正确”，最后一个显示“总计”。我想每个酒吧的颜色都不一样。我尝试过使用手机功能，但无法使其正常工作。我还尝试更改了每一条数据的名称，但没有成功。不幸的是，没有太多的文档可供检索。有人有什么想法吗

import React from 'react';
import {
    ResponsiveContainer, BarChart, Bar, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend,
} from 'recharts';

export default class GameChart extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            axes: [
                { primary: true, type: 'ordinal', position: 'left' },
                { position: 'bottom', type: 'linear', stacked: true }
            ],
            series: {
                type: 'bar'
            },
            chartData: [
                {
                    name: 'Correct',
                    total: 0,
                },
                {
                    name: 'Incorrect',
                    total: 0,
                },
                {
                    name: 'Total',
                    total: 0,
                },
            ],
            chartLayout: {
                title: 'Math Game Results',
                yaxis: {
                    showticklabels: false
                },
            }
        }
    }

    componentDidUpdate(prevProps) {
        if (prevProps.chartData.totalCounter !== this.state.chartData[2].total) {
            let tempState = this.state;
            tempState.chartData = [
                {
                    name: 'Correct',
                    total: this.props.chartData.correctCounter,
                },
                {
                    name: 'Incorrect',
                    total: this.props.chartData.incorrectCounter,
                },
                {
                    name: 'Total',
                    total: this.props.chartData.totalCounter,
                },
            ];
            this.setState(tempState);
        }
    }

    render () {
        return (
            <div>
                {
                    (this.state.chartData[2].total > 0) ?
                        (<ResponsiveContainer width="95%" height={225}>
                            <BarChart
                                data={this.state.chartData.slice()}
                                layout="vertical" barCategoryGap={5}
                                margin={{top: 5, right: 30, left: 20, bottom: 5,}}
                            >
                                <XAxis
                                    type="number"
                                    stroke="#000000"
                                />
                                <YAxis
                                    type="category"
                                    stroke="#000000"
                                    dataKey="name"
                                />
                                <Tooltip
                                    wrapperStyle={{ width: 100, backgroundColor: '#ccc' }}
                                    formatter={function(name) {return `${name}`}}
                                />
                                <Bar
                                    dataKey="total"
                                    fill="#00a0fc"
                                    stroke="#000000"
                                    strokeWidth={1}
                                />
                            </BarChart>
                        </ResponsiveContainer>
                        ):
                        (null)
                }
            </div>
        );
    }
}

从“React”导入React；
进口{
响应容器、条形图、条形图、单元格、X轴、Y轴、CartesianGrid、工具提示、图例、，
}来自‘雷查特’；
导出默认类GameChart扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
轴线：[
{primary:true，类型：'ordinal'，位置：'left'}，
{位置：'bottom'，类型：'linear'，堆叠：true}
],
系列：{
类型：'bar'
},
图表数据：[
{
名称：'正确'，
总数：0，
},
{
名称：'不正确'，
总数：0，
},
{
名称：'总计'，
总数：0，
},
],
图表布局：{
标题：“数学游戏结果”，
亚克斯：{
显示标签：false
},
}
}
}
componentDidUpdate（prevProps）{
if（prevProps.chartData.totalCounter！==this.state.chartData[2].total）{
让tempState=this.state；
tempState.chartData=[
{
名称：'正确'，
总计：this.props.chartData.correctCounter，
},
{
名称：'不正确'，
总计：this.props.chartData.incorrectCounter，
},
{
名称：'总计'，
总计：this.props.chartData.totalCounter，
},
];
这个.setState（tempState）；
}
}
渲染（）{
返回(
{
（this.state.chartData[2]。总计>0）？
(
):
（空）
}
);
}
}

这是当前设置的图片。正如您所看到的，每个条都有相同的颜色。

---

好的，多亏@c0m1t，我才让它工作起来。我所要做的就是列出一个国家级以上的颜色列表

import React from 'react';
import {
    BarChart, Bar, XAxis, Cell, YAxis, Tooltip, ResponsiveContainer,
} from 'recharts';

const barColors = ["#1f77b4", "#ff7f0e", "#2ca02c"]

export default class Example extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            chartData: [
                {
                    name: "Correct",
                    total: this.props.chartData.correctCounter
                },
                {
                    name: "Incorrect",
                    total: this.props.chartData.incorrectCounter
                },
                {
                    name: "Total",
                    total: this.props.chartData.totalCounter
                }
            ]
        }
    }

    render() {
        return (
            <ResponsiveContainer width="95%" height={450}>
                <BarChart
                    data={this.state.chartData.slice()}
                    margin={{ top: 20, right: 20, left: 20, bottom: 5, }}
                    data={this.state.chartData}
                >
                <XAxis
                    dataKey="name"
                    stroke="#000000"
                />
                <YAxis
                    stroke="#000000"
                />
                <Tooltip
                    wrapperStyle={{ width: 100, backgroundColor: '#ccc' }}
                    formatter={function(total) {return `${total}`}}
                />
                <Bar
                    dataKey="total"
                    fill="#00a0fc"
                    stroke="#000000"
                    strokeWidth={1}
                >
                    {
                        this.state.chartData.map((entry, index) => (
                            <Cell key={`cell-${index}`} fill={barColors[index % 20]} />
                        ))
                    }
                </Bar>
                </BarChart>
            </ResponsiveContainer>
        );
    }
}

从“React”导入React；
进口{
条形图、条形图、X轴、单元格、Y轴、工具提示、响应容器、，
}来自‘雷查特’；
常量条颜色=[“#1f77b4”、“#ff7f0e”、“#2ca02c”]
导出默认类示例扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
图表数据：[
{
姓名：“正确”，
总计：this.props.chartData.correctCounter
},
{
名称：“不正确”，
总计：this.props.chartData.incorrectCounter
},
{
名称：“总计”，
总计：this.props.chartData.totalCounter
}
]
}
}
render（）{
返回(
{
this.state.chartData.map（（条目，索引）=>(
))
}
);
}
}

---

这对您有帮助吗？这是关于条形图的形状，但我认为在

条形图

组件内部，您可以指定每个

单元格

@c0m1t的填充颜色，我一直在看同一个示例。我认为这绝对是正确的，我只是不知道如何映射我的数据，因为它不是一个像他们那样的列表。您是否尝试过将

this.state.chartData.map（（条目，索引）放入=>

作为

Bar

组件的孩子？看到这个@c0m1t我得到了它！在发布之前，我想我的颜色列表放错了位置，所以React无法阅读。我会发布答案，谢谢你的帮助！