Блог

Здравствуйте, я пытаюсь создать страницу wep, используя библиотеку react и rechart. Я сделал простой график, такой как этот.

моя цель — 1.to сделайте цвет полосы каждого графика другим(чтобы цвет яблока, винограда, дыни и апельсина был другим) и 2.покажите, что означает каждый столбец. Например, если я нарисую колонку «яблоко» синим цветом, руководство появится так же, как «подсчет» на изображении выше

     const data = [
  { team: "apple", count: 15 },
  { team: "grape", count: 32 },
  { team: "melon", count: 28 },
  { team: "orange", count: 14 },
  
];

export default function App() {
  return (
    <BarChart
      width={330}
      height={200}
      data={data}
      margin={{
        top: 5,
        right: 30,
        left: 20,
        bottom: 5
      }}
    >
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="team" />
      <YAxis />
      <Tooltip />
      <Legend />
      <Bar dataKey="count" fill="#82ca9d" />
    </BarChart>
  );
}
 

Данные и столбцы могут быть изменены, поэтому я должен найти способ получить их автоматически.
Можете ли вы сказать мне, как это сделать? или еще одна хорошая библиотека для использования?
Спасибо.