# rn-svg-chart

> Used svg to draw all kinds of charts

Latest version **0.1.0** (published 2017-11-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install rn-svg-chart
pnpm add rn-svg-chart
yarn add rn-svg-chart
bun add rn-svg-chart
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2017-11-19 |
| First published | 2017-11-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | LiuChao |
| Maintainers | liusuboya |
| Keywords | charts, react-native, react-native-svg, ios, android, svg |

## Links

- npm: https://www.npmjs.com/package/rn-svg-chart
- Repository: https://github.com/congsuboya/react-native-svg-charts
- Homepage: https://github.com/congsuboya/react-native-svg-charts#readme
- Issues: https://github.com/congsuboya/react-native-svg-charts/issues
- npm.io page: https://npm.io/package/rn-svg-chart

## Dependencies (3)

- [react](https://npm.io/package/react.md) 16.0.0
- [react-native](https://npm.io/package/react-native.md) 0.50.3
- [react-native-svg](https://npm.io/package/react-native-svg.md) ^6.0.0

## 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

- 0.1.0 (latest) — 2017-11-19

## README

# rn-svg-chart

[![version](https://img.shields.io/npm/v/rn-svg-chart.svg)](https://www.npmjs.com/package/rn-svg-chart) [![downloads](https://img.shields.io/npm/dm/rn-svg-chart.svg)](https://www.npmjs.com/package/rn-svg-chart) [![license](https://img.shields.io/npm/l/rn-svg-chart.svg)](https://www.npmjs.com/package/rn-svg-chart)

使用Svg 画的各种图表，方便使用，会慢慢完善，现在动画欠缺，尽量用一个不怎么耗性能的动画方式实现。

[Check out the demo](https://github.com/congsuboya/react-native-svg-charts/tree/master/RNSvgCharts).

![](/image/111.gif)![](/image/222.gif) ![](/image/3333.gif)

### Installation


1. 通过`npm` 安装

    ```bash
    npm install rn-svg-chart --save
    ```
    
1. 通过`yarn` 安装

    ```bash
    yarn add rn-svg-chart
    ```


### 数据格式

参考的echarts的数据格式，有几点不同，一个是stack字段是否是堆叠图，valueInterval字段是分割线的个数，interWidth字段是柱形图之间的间隔。随着功能的完善，参数可能会有进一步的变化。

```javascript

{
    option: {
        xAxis: {
            type: 'category',
            // type: 'value',
            data: ['Mon', 'Tue', 'Wed', 'Thusssss', 'Fri', 'Sat', 'Sun', 'wqe', 'sdr', 'opu']
        },
        yAxis: {
            // type: 'category',
            type: 'value',
            data: ['Mon', 'Tue', 'Wed', 'Thusssss', 'Fri', 'Sat', 'Sun', 'wqe', 'sdr', 'opu']
        },
        series: [
            {
                name: '直接访问',
                type: 'bar',
                data: [10, 5, 2, 3, 10, 7, 6, 5, 2, 30,]
            },
            {
                name: '非直接访问',
                type: 'bar',
                data: [3, 4, 1, 4, 2, 8, 3, 3, 10, 7]
            }
        ],
        stack: false
    },
    valueInterval: 3,
    style: { height: 400, width: window.width },
    interWidth: 10
}

```



### 使用

```javascript

import React, { Component } from 'react';
import {
    View,
    Dimensions
} from 'react-native';

const { width, height } = Dimensions.get('window');
import {
    Bar
} from 'rn-svg-chart';

export default class DemoExample extends Component {
    render() {
        return (
           <View style={{ flex: 1, alignItems: 'center' }}>
                <Bar style={{ height: 230, width: width }} option={this.props.option} />
            </View>
        );
    }
}


DemoExample.defaultProps = {
    option: {
        ....
    },
    valueInterval: 3,
    style: { height: 400, width: width },
    interWidth: 10
}
```

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