Question

我有来自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/

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

ReChart不会渲染多个条形图

1 个答案: