На гистограмме с накоплением Recharts неверная нумерация XAxis

Я пишу приложение 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 до 1, когда она должна иметь минимум 0 и максимум 32. Я воспроизводил на JSFiddle, поэтому это не моя среда.

Я изучил то, что XAxis считает DataMax, и он считает, что это 1, поэтому ручная установка моего максимума не сработает, потому что тогда диаграммы не заполняют пространство.


reactjs recharts
person kbreezy04    schedule 07.07.2020    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Я думаю, что поддержка домена - это то, что вам нужно. https://recharts.org/en-US/api/XAxis#domain

person Benjamin Hawkins    schedule 07.07.2020
comment
Я попытался использовать опору домена, я могу изменить размер оси, но сами полосы по-прежнему имеют максимальное значение 1. Опора домена - это то, что я использовал для проверки значения DataMax и обнаружил, что оно равно 1. - person kbreezy04; 07.07.2020

arrow_upward
0
arrow_downward

Похоже, что использование stackOffset expand вызывает такое поведение. Он нормализовал данные до 1 и показывает дроби.

person kbreezy04    schedule 07.07.2020