Question

我正在组件中使用图表。加载时，CartesianGrid本身似乎会忽略图例，并一直延伸到顶部以填充整个高度。一秒钟后，其高度变为应有的高度（考虑到Legend具有其自身的高度，CartesianGrid会变短）。您可以在下面查看屏幕截图。 Initial Load Normal

如何确定初始高度，使其在加载时不会跳动？

这是代码。

<BarChart
            stackOffset="sign"
            width={isWindowSizeSmall ? 72 * (this.state.baseFontSize || 1) : 27 * (this.state.baseFontSize || 1)}
            height={isWindowSizeSmall ? 17 * (this.state.baseFontSize || 1) : 19 * (this.state.baseFontSize || 1)}
            data={this.state.spendingsData}
            margin={{ top: 0, left: 0, bottom: 0, right: 10 }}
            isAnimationActive={false}
          >
            <Legend
              align="center"
              verticalAlign="top"
              height={30}
              wrapperStyle={{
                paddingLeft: '10%',
              }}
            />
            <CartesianGrid strokeDasharray="7 7" vertical={false} />
            <XAxis
              strokeWidth={1.5}
              dataKey="name"
              interval={0}
              tick={{
                transform: 'translate(0, 8)',
                fontSize: '.7rem',
              }}
            />
            <YAxis strokeWidth={1.5} />
            <Tooltip
              content={({ payload }) => (
                <div className="tooltip">
                  <div className="month">
                    {momentTz(payload[0] && payload[0].payload.month, 'MM').format('MMMM')}
                  </div>
                  <div className="assigned">Revenue: ${parseInt(payload[0] && payload[0].payload.wage, 10)}</div>
                  <div className="unfilled">Expense: ${parseInt(payload[0] && payload[0].payload.fee, 10)}</div>
                  <div className="total">Total: ${parseInt(payload[0] && payload[0].payload.total, 10)}</div>
                </div>
                    )}
            />
            <ReferenceLine y={0} stroke="#000" />
            <Bar barSize={25} isAnimationActive={false} dataKey="fee" stackId="a" fill="#DC6C52" />
            <Bar barSize={25} isAnimationActive={false} dataKey="wage" stackId="a" fill="#5CA6FA" />
          </BarChart>

更改高度参数没有帮助。

图表高度在负载上跳跃

0 个答案: