1

I have a BarChart from rechart:

http://recharts.org/#/en-US/api/BarChart

The problem I have is that the second bar of my chart does not render unless it is equal to the value of the first bar.

If you see the valuePost key of the data array, it wont show unless you set the value to 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')
);

Here's the fiddle:

http://jsfiddle.net/oqg00j2j/

4

1 回答 1

1

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

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 演示

于 2017-12-03T03:20:59.233 回答