React MUI 条形图着色

Question

我想创建一个条形图，其中每个类别（例如“Oral Ambalaj”、“Onkolotik”等）都有一个值。每个类别应以不同的颜色显示，并且所有类别应显示在同一 y 轴上。这里有一些图片。我想要

我想像第一张图片一样分割我的颜色和数据，但我没有。

import { BarChart } from '@mui/x-charts/BarChart';
import { BarSeriesType } from '@mui/x-charts/models';

const data = [2, 5, 3, 6, 8, 11, 8];
const categories = [
"Oral Ambalaj",
"Onkolotik",
"Görsel Kontrol",
"Oral Üretim",
"Steril Ambalaj",
"Steril Üretim",
"Diğer"
];
const colors = ['#FF5733', '#33FF57', '#3357FF', '#FF33A1', '#FF8F33', '#33FFF5', '#B833FF'];

// Series Tanımlaması
const series: BarSeriesType[] = categories.map((category, index) => ({
type: 'bar',
data: [data[index]],
color: colors[index % colors.length],
//label: categories[index],
}));

function CustomBarChart() {
return (
    <BarChart
    xAxis={[
        {
        id: "barCategories",
        data: categories,
        scaleType: "band",
        },
    ]}
    series={series}
    width={800}
    height={300}
    barLabel="value"
    />
);
}

export default CustomBarChart;

这是我的代码。提前非常感谢您。

Answer 1

您可以使用

axis[].colorMap

来代替。您还需要使用单个系列，而不是您正在使用的多个系列。

import * as React from 'react';
import { BarChart } from '@mui/x-charts/BarChart';
import { BarSeriesType } from '@mui/x-charts/models';

const data = [2, 5, 3, 6, 8, 11, 8];
const categories = [
  'Oral Ambalaj',
  'Onkolotik',
  'Görsel Kontrol',
  'Oral Üretim',
  'Steril Ambalaj',
  'Steril Üretim',
  'Diğer',
];
const colors = [
  '#FF5733',
  '#33FF57',
  '#3357FF',
  '#FF33A1',
  '#FF8F33',
  '#33FFF5',
  '#B833FF',
];

const series: BarSeriesType[] = [
  {
    type: 'bar',
    data,
  },
];

function CustomBarChart() {
  return (
    <BarChart
      xAxis={[
        {
          id: 'barCategories',
          data: categories,
          scaleType: 'band',
          colorMap: {
            type: 'ordinal',
            colors,
          },
        },
      ]}
      series={series}
      width={800}
      height={300}
      barLabel="value"
    />
  );
}

export default CustomBarChart;