javascript - ReChart 不渲染多个 Bars

Question

我有一个来自 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')
);

这是 fiddle :

http://jsfiddle.net/oqg00j2j/

Answer 1

您的 Axes 需要指定它们将要呈现的数据

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