Question

我有一些与reCharts反应的条形图：

我试图通过使用react-responsive来调整char的宽度：

https://www.npmjs.com/package/react-responsive

const Print = props => <Responsive {...props} query="print" />;
const Desktop = props => <Responsive {...props} minWidth={1224} />;

我使用这些组件来识别Im是否处于打印模式并使用不同的宽度渲染BarChart：

像这样：

return (
    <div className="question">
        <div className="question-container">
            <Desktop>
                <div className="question__title-container">
                    <h2 className="question__title">
                        <span className="question__title question__title--ordinal">{ordinal}</span>
                        {questionName}
                    </h2>
                    <div className="question__legend-container">
                        <div className="question__legend-container-text">
                            <span className="question__legend-container question__legend-title">
                                RESULTADOS
                            </span>
                            <span className="question__legend-container question__legend-count">
                                {count}
                            </span>
                        </div>
                        <div className="question__legend-container-color-blue">

                        </div>
                    </div>

                </div>
                <BarChart maxBarSize={1650} barGap={10} width={1700} height={barHeight} layout="vertical" data={rows}
                          margin={{top: 5, right: 30, left: 20, bottom: 5}}>
                    <Tooltip/>
                    <XAxis type="number" />
                    <YAxis  fontSize={12} axisLine={false} tickLine={false} width={400} dataKey="name" type="category"/>
                    <Bar  minPointSize={10} label={{ fill: '#979797', fontSize: 20, position: "right" }} dataKey="result" fill="#00a0dc" />
                </BarChart>
            </Desktop>
            <Print>
                <div className="question__title-container">
                    <h2 className="question__title">
                        <span className="question__title question__title--ordinal">{ordinal}</span>
                        {questionName}
                    </h2>
                    <div className="question__legend-container">
                        <div className="question__legend-container-text">
                            <span className="question__legend-container question__legend-title">
                                RESULTADOS
                            </span>
                            <span className="question__legend-container question__legend-count">
                                {count}
                            </span>
                        </div>
                        <div className="question__legend-container-color-blue">

                        </div>
                    </div>

                </div>
                <BarChart maxBarSize={800} barGap={10} width={800} height={barHeight} layout="vertical" data={rows}
                          margin={{top: 5, right: 30, left: 20, bottom: 5}}>
                    <Tooltip/>
                    <XAxis type="number" />
                    <YAxis  fontSize={12} axisLine={false} tickLine={false} width={400} dataKey="name" type="category"/>
                    <Bar  minPointSize={10} label={{ fill: '#979797', fontSize: 20, position: "right" }} dataKey="result" fill="#00a0dc" />
                </BarChart>
            </Print>

        </div>
    </div>
)

图表在浏览器上呈现完美。但是当我使用打印预览模式时，我看不到条形图。

有谁知道为什么会发生这种情况，我该如何解决这个问题？

Answer 1

在打印预览中看不到条形的原因是它们在SVG中被动画化并呈现。 Animations in an SVG do not start if a page is printed。而是渲染动画的初始状态。

在Recharts中，条形图默认为动画;它们从0开始，然后扩展以匹配它们所代表的数据。由于动画不会在打印时渲染，因此我们只能看到条形没有高度的起点。

要在打印预览中渲染条形，您可以将道具isAnimationActive={false}添加到<Bar>组件内的<Print>组件。这将禁用动画。

（http://recharts.org/en-US/api/Bar#isAnimationActive）

Rechart：条形图不显示在具有React-Responsive的打印预览中

1 个答案: