# native-f2charts

> f2charts for react-native

Latest version **1.0.6** (published 2018-02-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install native-f2charts
pnpm add native-f2charts
yarn add native-f2charts
bun add native-f2charts
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2018-02-27 |
| First published | 2018-02-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 622.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | becarchal |
| Maintainers | becarchal |
| Keywords | react-native, f2charts, chart, charts |

## Links

- npm: https://www.npmjs.com/package/native-f2charts
- Repository: https://github.com/becarchal/native-f2charts
- Homepage: https://github.com/becarchal/native-f2charts#readme
- Issues: https://github.com/becarchal/native-f2charts/issues
- npm.io page: https://npm.io/package/native-f2charts

## Dependencies (1)

- [@antv/f2](https://npm.io/package/@antv/f2.md) 3.0.3

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 1.0.6 (latest) — 2018-02-27
- 1.0.5 — 2018-02-27
- 1.0.4 — 2018-02-27
- 1.0.3 — 2018-02-27
- 1.0.2 — 2018-02-27
- 1.0.1 — 2018-02-23
- 1.0.0 — 2018-02-12
- 0.4.0 — 2018-02-12

## README

# native-f2charts

[![NPM Version](https://img.shields.io/npm/v/native-f2charts.svg?style=flat)](https://www.npmjs.org/package/native-f2charts)
  [![npm](https://img.shields.io/npm/dm/native-f2charts.svg?style=flat)](https://www.npmjs.org/package/native-f2charts)
  [![License](http://img.shields.io/npm/l/native-f2charts.svg?style=flat)](https://raw.githubusercontent.com/becarchal/native-f2charts/master/LICENSE.md)
  
## install

$ npm install native-f2charts --save

## Usage

The Usage is complete consistent with F2charts

component props:

* *option* (object): The option for f2charts: [Documentation](https://antv.alipay.com/zh-cn/f2/3.x/index.html)。 
* *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. 


```js
import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity
} from 'react-native';
import F2charts from 'native-f2charts';

export default class App extends Component {
  static navigationOptions = ({ navigation }) => ({
    title: `Line (Column) - Basic`,
  });
  constructor(props) {
    super(props);
    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 }
    ];
    this.state = {
      data,
      option : `
        var data = ${JSON.stringify(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'
    };
  }

  changeOption() {
    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.setState({
      data,
      option : `
        var data = ${JSON.stringify(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();`,
    })
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native F2charts
        </Text>
        <TouchableOpacity style={styles.button} onPress={this.changeOption.bind(this)}>
          <Text style={{color: '#fff'}}>change state</Text>
        </TouchableOpacity>
        <F2charts option={this.state.option} height={300} width={330} datasource={this.state.data}/>
        </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 30,
  },
  button: {
    backgroundColor: '#d9534f',
    padding: 8,
    borderRadius: 4,
    marginBottom: 20
  }
});

AppRegistry.registerComponent('app', () => app);

```



##Example

*run demo*

```
cd native-f2-demo
npm install
npm start
```

### IOS

Open the xcode project in the ios directory and click run

screenshots：
<img src="https://github.com/becarchal/native-f2charts/blob/master/native-f2-demo/gitImage/demoIOS.png"/>

### Android

Open the Android project in the android directory with Android Studio and click run.

screenshots：
<img src="https://github.com/becarchal/native-f2charts/blob/master/native-f2-demo/gitImage/demoAndroid.png"/>

## License

native-f2charts is released under the MIT license.

---
_Source: https://npm.io/package/native-f2charts · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._