1

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

http://recharts.org/

我试图通过使用反应响应来调整字符的宽度：

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

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

我使用这些组件来识别我是否处于打印模式并以不同的宽度呈现条形图：

像这样：

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>
)

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

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

4

1 回答 1

7

条在打印预览中不可见的原因是它们在 SVG 中进行了动画处理和渲染。如果打印页面，则 SVG 中的动画不会启动。而是渲染动画的初始状态。

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

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

( http://recharts.org/en-US/api/Bar#isAnimationActive )

于 2018-05-03T19:10:41.057 回答