1
我有一個條形圖從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')
);
這裏的小提琴:
是下面的答案的工作? –