如何在图表中禁用 LineChart 的动画？

Question

我试图以这种方式禁用动画：

<ResponsiveContainer width="99%" height={300}>
    <LineChart isAnimationActive={false}
               animationDuration={0}
               height={300} width={400}
               data={chartData}>
        ...
    </LineChart>
</ResponsiveContainer>

但它不起作用

Answer 1

您需要在行级别禁用动画。

<ResponsiveContainer width="99%" height={300}>
    <LineChart height={300} width={400} data={chartData}>
        <Line type="monotone" isAnimationActive={false} dataKey="pv" />
        <Line type="monotone" isAnimationActive={false} dataKey="uv" />
    </LineChart>
</ResponsiveContainer>

查看此JSFiddle 以查看示例。