javascript - ReChart不会渲染多个条形图

我有一个来自图表的BarChart：

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