在Recharts的BarChartStackedBySign中,我想比较在条形图上表示该实体的当年和上一年的给定实体。
问题在于,如果通过两个不同的对象提供,则重新将图表视为不同的实体。
在共享的小提琴中,我们可以看到每个水果在x轴上代表两次,我希望每个水果在x轴上代表一次,而当年的数据在+ y轴上代表,而前一年的数据在- y轴。
小提琴链接-https://jsfiddle.net/59ugdj1t/
const {BarChart, Bar, ReferenceLine, XAxis, YAxis, CartesianGrid, Tooltip, Legend} = Recharts;
// Data for current year
const data1 = [
{name: 'Apple', men: 4000, women: 2400},
{name: 'Orange', men: 2000, women: 2000},
{name: 'Kiwi', men: 1000, women: 1400},
];
// Data for previous year
const data2 = [
{name: 'Apple', men: -3000, women: -2000},
{name: 'Orange', men: -1000, women: -1000},
{name: 'Kiwi', men: -2000, women: -400},
];
const data = data1.concat(data2);
const SimpleBarChart = React.createClass({
render () {
return (
<BarChart width={600} height={300} data={data} stackOffset="sign"
margin={{top: 5, right: 30, left: 20, bottom: 5}}>
<CartesianGrid strokeDasharray="3 3"/>
<XAxis dataKey="name"/>
<YAxis/>
<Tooltip/>
<Legend />
<ReferenceLine y={0} stroke='#000'/>
<Bar dataKey="men" fill="#8884d8" stackId="stack" />
<Bar dataKey="women" fill="#82ca9d" stackId="stack" />
</BarChart>
);
}
})
ReactDOM.render(
<SimpleBarChart />,
document.getElementById('container')
);