使 BarChart 响应 MUI-X 和 React

Question

我正在尝试使此条形图具有响应能力，目前它具有固定的高度（500x200px）。该文档非常模糊，并说将 BarChart 包装在 ResponsiveChartContainer 中，但我尝试以各种可能的方式执行此操作，但它要么使整个图表消失，要么给我带来错误。有人知道如何正确执行此操作吗？

import React from 'react';
import { BarChart } from '@mui/x-charts';

interface HighlightCounts {
    [key: string]: number;
}

interface MyBarChartComponentProps {
    counts: HighlightCounts;
}

class MyBarChartComponent extends React.Component<MyBarChartComponentProps> {
    render() {
        const { counts } = this.props;

        const xAxisConfig = {
            tickLabelInterval: (value: any, index: any) => Number.isInteger(value), // only full numbers bc these are counts
            valueFormatter: (value: any) => value.toFixed(0),
            label:'Votes'
        };

        // Transform the highlightCounts object into an array suitable for the BarChart
        const dataset = Object.entries(counts).map(([name, value]) => ({
            name,
            value
        }));

        return (
            <BarChart
                dataset={dataset}
                yAxis={[{ scaleType: 'band', dataKey: 'name' }]}
                xAxis={[xAxisConfig]}
                series={[
                    {
                        color:'#DBF881',
                        dataKey: 'value',
                        valueFormatter: (value) => `${value} votes`
                    }
                ]}
                width={500}
                height={200}
                layout="horizontal"
                borderRadius={5}
                margin={{ left: 75 }}
                sx={{
                    "& .MuiChartsAxis-left .MuiChartsAxis-tickLabel, & .MuiChartsAxis-bottom .MuiChartsAxis-tickLabel, &.MuiChartsAxis-tick, .MuiChartsAxis-label": {
                        strokeWidth: "0.4",
                        fill: "#fff"
                    },
                    "& .MuiChartsAxis-left .MuiChartsAxis-line, & .MuiChartsAxis-bottom .MuiChartsAxis-line, .MuiChartsAxis-tick": {
                        stroke: "#fff",
                        strokeWidth: 0.4,
                    }
                }}
            />
        );
    }
}

export default MyBarChartComponent;

这就是它的样子： [2]：https://i.sstatic.net/koRsEWb8.png

Answer 1

尝试在

BarPlot

中使用

ResponsiveChartContainer

就像

<ResponsiveChartContainer
  width={500}
  height={300}
  series={[{ data: uData, label: 'uv', type: 'bar' }]}
  xAxis={[{ scaleType: 'band', data: xLabels }]}
>
  <BarPlot />
</ResponsiveChartContainer>

参考这个。