ReChart不呈现多条
我有一个条形图从rechart:ReChart不呈现多条
http://recharts.org/#/en-US/api/BarChart
我的问题是,我的图表的第二杆不呈现,除非它是等于第一值酒吧。
如果您看到的数据阵列的valuePost关键,它不会显示,除非你将该值设置为3
const {BarChart,ResponsiveContainer,Text, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend} = Recharts; const rows = [
{"name":"Me comparo con las demás personas.","valuePre":0,"valuePost":0},
{"name":"Todas las anteriores.","valuePre":0,"valuePost":0},
{"name":"Me critíco a mi mismo","valuePre":0,"valuePost":0},
{"name":"Me felicito a mí mismo (a) por mis logros.","valuePre":3,"valuePost":2}]
const SimpleBarChart = React.createClass({
render() {
return (
<div className="question">
<div className="question-container">
<ResponsiveContainer width="100%" height="100%">
<BarChart
layout="vertical" data={rows}
margin={{top: 5, right: 30, left: 20, bottom: 5}}
>
<YAxis axisLine={false} tickLine={false} dataKey="name" type="category">
</YAxis>
<Bar
dataKey="valuePre"
fill="#00a0dc"
label={<Text scaleToFit={true} verticalAnchor="middle" />}
/>
<Bar
dataKey="valuePost"
fill="#c7c7c7"
label={<Text verticalAnchor="middle" />}
/>
</BarChart>
</ResponsiveContainer>
</div>
</div>
);
}
})
ReactDOM.render(
<SimpleBarChart />,
document.getElementById('container')
);
这里的小提琴:
http://jsfiddle.net/oqg00j2j/
回答:
你轴需要指定他们将要呈现的数据
GITHUB:https://github.com/recharts/recharts/issues/90
您只需更改Axis
标签即可。查看JSFiddle。
<YAxis type="category"
axisLine={false}
tickLine={false}
dataKey="name" type="category"
/>
<XAxis type="number" />
RECHARTS DEMO
以上是 ReChart不呈现多条 的全部内容, 来源链接: utcz.com/qa/259260.html