native-f2charts
install
$ npm install native-f2charts --save
Usage
The Usage is complete consistent with F2charts
component props:
- option (object): The option for f2charts: 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.
;;; static title: `Line (Column) - Basic` ; { 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: 28 ; thisstate = data 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();` text: 'test' ; } { 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: 90 ; this } { return <View style=stylescontainer> <Text style=styleswelcome> Welcome to React Native F2charts </Text> <TouchableOpacity style=stylesbutton onPress=thischangeOption> <Text style=color: '#fff'>change state</Text> </TouchableOpacity> <F2charts option=thisstateoption height=300 width=330 datasource=thisstatedata/> </View> ; } const styles = StyleSheet; AppRegistry;
Example
run demo
cd native-f2-demo
npm install
npm start
IOS
Open the xcode project in the ios directory and click run
screenshots:
Android
Open the Android project in the android directory with Android Studio and click run.
screenshots:
License
native-f2charts is released under the MIT license.