2016-05-11 3 views
1

私は動的な幅を持つLineChartを作成しようとしていますが、最初の値しか取得しません。react-chartjsで動的な幅を持つLineChartを作成するには?

<LineChart data = {this.state.dataLine} options = {{}} width={this.state.widthChart} height = "250" /> 
+0

あなたはインラインスタイルを設定しようとしたことがありますか? https://facebook.github.io/react/tips/inline-styles.html –

+0

幅はコンポーネントLineChartの小道具であり、問​​題は状態が変化したときに再レンダリングされます。最新のLineChartには小道具の再描画がありますそのトリガメソッドは、グラフを破棄して再レンダリングします... –

答えて

0

私は1つが反応し-chartjsでこれを達成するかどうかはわかりませんが、それは反応し-VIS、似ている非常に簡単です。複数のチェックのために

import React from 'react'; 

import { 
    XAxis, 
    YAxis, 
    FlexibleWidthXYPlot, 
    HorizontalGridLines, 
    LineSeries 
} from 'react-vis'; 

export default class Example extends React.Component { 
    render() { 
    return (
     <FlexibleWidthXYPlot 
     height={300}> 
     <HorizontalGridLines /> 
     <YAxis /> 
     <XAxis /> 
     <LineSeries data={myData}/> 
     </FlexibleWidthXYPlot> 
    ); 
    } 
} 

ここhttp://uber.github.io/react-vis/#/documentation/api-reference/flexible-plots

関連する問題