ichart for react-native
Switch branches/tags
Nothing to show
Clone or download
雷东升
Latest commit 3c16a8d Dec 18, 2015
Permalink
Failed to load latest commit information.
lib first commit Dec 9, 2015
.gitignore modify app version Dec 9, 2015
LICENSE Initial commit Dec 9, 2015
README.md modified README.md Dec 18, 2015
index.js first commit Dec 9, 2015
package.json modified package.json Dec 18, 2015

README.md

react-native-ichart

ichart for react-native

based on ichart: https://github.com/wanghetommy/ichartjs


Install

$ npm i react-native-ichart --save

Usage

init a new project with the name "IchartExample", and place the following codes into index.ios.js, then you can see the demo.

'use strict';
 
import React from 'react-native';
import IChart from 'react-native-ichart';
 
const {
    View,
    Component,
    AppRegistry
} = React;
 
const styles = {
    ichart: {
        width: 320,
        height: 240
    }
};

export default class IchartExample extends Component {
    renderChart() {
        var data = [{
            name: '北京',
            value: [-9, 1, 12, 20, 26, 30, 32, 29, 22, 12, 0, -6],
            color: '#1f7e92',
            line_width: 3
        }];
        var chart = new iChart.LineBasic2D({
            render: 'canvas-container',
            data: data,
            title: '北京2012年平均温度情况',
            width: 300,
            height: 200,
            coordinate: {
                height: '90%',
                background_color: '#f6f9fa'
            },
            sub_option: {
                hollow_inside: false, //设置一个点的亮色在外环的效果
                point_size: 16
            },
            labels: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"]
        });
        chart.draw();
    }
    render() {
        return (
            <View>
                <IChart
                    render={this.renderChart}
                    style={styles.ichart}
                />
            </View>
        )
    }
}

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

LICENSE