我正在尝试使用（我认为）使用

Question

我没有造型问题，而是要显示这样的数据。每种产品都有一个条和标签。

我尝试了许多不同的格式将数据传递到图表并配置传奇标签，但是我最接近的只是这样：

但是，有两个问题。显然，不匹配的颜色，但实际上它显示了9个bar，其中只有6个是

null

，因此只有每个“类别”之一。意味着数据看起来像：

const seriesData = [
  { data: [4550, null, null], label: "Corona" },
  { data: [null, 3775, null], label: "Vodka Bull" },
  { data: [null, null, 3247], label: "Gin Tonic" },
];

如何正确设置barchar组件，以便每个产品在传奇中都有一个条和标签？

您有9个bar的原因是因为您内部有3个系列和3个项目。为了解决此问题，我们可以这样更新类似的系列数组，在每个

data

数组中只保留一个值：

const seriesData = [ { label: 'Corona', data: [ 4550 ] }, 
{ label: 'Vodka Bull', data: [ 3775 ] }, 
{ label: 'Gin Tonic', data: [ 3247 ] } ]

Answer 1

<BarChart>

：

tooltip={{ trigger: 'item' }}

这就是所有更新的外观：
BarChart

如果有帮助，我的完整代码是我的完整代码：

export default function BarDemo() {

  return (
    <Box sx={{ width: '100%' }}>
      <BarChart
        layout="horizontal"
        tooltip={{ trigger: 'item' }}
        height={300}
        series={series}
        yAxis={[{ data: " ", scaleType: 'band', hideTooltip: true }]}
      />
      </Box>
  );
}

const highlightScope = {
  highlight: 'series',
} as const;


const series = [
  {
    label: 'Corona',
    data: [
      4550
    ],
  },
  {
    label: 'Vodka Bull',
    data: [
      3775
    ],
  },
  {
    label: 'Gin Tonic',
    data: [
      3247
    ],
  },
].map((s) => ({ ...s, highlightScope }));