react-f2charts
install
$ npm install react-f2charts --save
Usage
The Usage is complete consistent with F2charts
component props:
- option (object): The option for f2: Documentation。
- width (number): The width of the chart. The default value is the outer container width.
- height (number): The height of the chart. The default value is 400.
;; { superprops; const data = time: '2016-08-08 00:00:00' tem: 10 time: '2016-08-08 00:10:00' tem: 22 time: '2016-08-08 00:30:00' tem: 20 time: '2016-08-09 00:35:00' tem: 26 time: '2016-08-09 01:00:00' tem: 20 time: '2016-08-09 01:20:00' tem: 26 time: '2016-08-10 01:40:00' tem: 28 time: '2016-08-10 02:00:00' tem: 20 time: '2016-08-10 02:20:00' tem: 40 ; thisstate = option : ` var data = ; var defs = { time: { type: 'timeCat', mask: 'MM/DD', tickCount: 3, range: [ 0, 1 ] }, tem: { tickCount: 5, min: 0 } }; /* 配置刻度文字大小,供PC端显示用(移动端可以使用默认值20px) */ chart.axis('tem', { label: { fontSize: 14 } }); chart.axis('time', { label: { fontSize: 14 } }); chart.source(data, defs); chart.line().position('time*tem'); chart.render();` data ; } { } { } { const option data = thisstate; return <div style= height: windowinnerHeight > <F2charts option=option height=300 width=330 datasource=data/> </div> ; }
Example
run demo
cd react-f2-demo
npm install
npm start
License
react-f2charts is released under the MIT license.