2017-10-24 19 views
0

私はCSS部分で試してみましたが、それが= {本当}があるRechartsでアニメーションの時間を遅くするには?

isAnimationActiveを動作しません私はrechartsでアニメーションを遅くしようとしていたが、私はそれについてどんな考えを取得できませんでした。..

アニメーションを有効にする isAnimationActive = {偽}

は、これは私のコード

で、アニメーション はアニメーション時間を処理するために、とにかくそこで無効にすることです0
const {LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend} = Recharts; 
const data = [ 
     {name: 'Page A', uv: 4000, pv: 2400, amt: 2400}, 
     {name: 'Page B', uv: 3000, pv: 1398, amt: 2210}, 
     {name: 'Page C', uv: 2000, pv: 9800, amt: 2290}, 
     {name: 'Page D', uv: 2780, pv: 3908, amt: 2000}, 
     {name: 'Page E', uv: 1890, pv: 4800, amt: 2181}, 
     {name: 'Page F', uv: 2390, pv: 3800, amt: 2500}, 
     {name: 'Page G', uv: 3490, pv: 4300, amt: 2100}, 
]; 
const SimpleLineChart = React.createClass({ 
    render() { 
    return (
     <LineChart width={600} height={300} data={data} 
      margin={{top: 5, right: 30, left: 20, bottom: 5}}> 
     <XAxis dataKey="name"/> 
     <YAxis yAxisId="left" /> 
     <YAxis yAxisId="right" orientation="right" /> 
     <CartesianGrid strokeDasharray="3 3"/> 
     <Tooltip/> 
     <Legend /> 
     <Line yAxisId="left" type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{r: 8}}/> 
     <Line yAxisId="right" type="monotone" dataKey="uv" stroke="#82ca9d" /> 
     </LineChart> 
    ); 
    } 
}) 

ReactDOM.render(
    <SimpleLineChart />, 
    document.getElementById('container') 
); 

recharts Js fiddle link

+0

ある 'animationDuration'はあなたがここに必要なものです。 –

+0

ありがとうございます。タン – Gopinath

答えて

0

Soutionが

let duration = 1000; 
animationDuration={duration} 
関連する問題