Question

我正在编写React应用，并且试图使用Recharts在堆叠的条形图中显示一些信息。我有以下内容：

const {BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer} = Recharts;
const data = [
      {name: "TEST", first: 9, next: 1, last: undefined, lastest: 1},
      {name: "RETEST", first: 6, next: 12, last: 12, lastest: 2}
];
const StackedBarChart = React.createClass({
    render () {
    return (
        <ResponsiveContainer height={500} width="100%">
                <BarChart
                    data={data}
                    margin={{
                        top: 20,
                        right: 30,
                        left: 20,
                        bottom: 5,
                    }}
                    layout={'vertical'}
                    stackOffset="expand"
                >
                    <YAxis type="category" dataKey="name" />
                    <XAxis type="number" />
                    <Tooltip contentStyle={{ backgroundColor: 'black' }} labelStyle={{ color: 'white' }} />
                    <Legend />
                    <Bar dataKey="first" stackId="a" fill="#FFFFB0" />
                    <Bar dataKey="next" stackId="a" fill="#FFFF00" />
                    <Bar dataKey="last" stackId="a" fill="#ED4337" />
                    <Bar dataKey="lastest" stackId="a" fill="#90EE90" />
                </BarChart>
            </ResponsiveContainer>
    );
  }
})

ReactDOM.render(
  <StackedBarChart />,
  document.getElementById('container')
);

这显示了我想要的方式，但是X轴在应为0的低点和32的最大值时仅从0-1开始。我在JSFiddle上进行了复制，因此它不是我的环境。

我查看了XAxis认为是DataMax的东西，并且认为它是1，因此手动设置我的最大值将不起作用，因为这样图表将无法填充空间。

Answer 1

我认为领域支柱就是您想要的。 https://recharts.org/en-US/api/XAxis#domain

Answer 2

看起来使用stackOffset扩展会导致此行为。将该数据归一化为1并显示分数。

图表堆积的条形图没有正确的XAxis编号

2 个答案: