Rechart：使用 React-Responsive 在打印预览中不显示条形图

Question

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

我正在尝试使用反应响应来调整字符的宽度：

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

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

有谁知道为什么会这样，我该如何解决这个问题？

Answer 1

条形图在打印预览中不可见的原因是它们是动画的并且在 SVG 中呈现。 Animations in an SVG do not start if a page is printed。相反，动画的初始状态被渲染。

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

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

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

Rechart：使用 React-Responsive 在打印预览中不显示条形图

Rechart: Bars not displaying on Print Preview with React-Responsive

javascript

css

reactjs

recharts