Git Product home page Git Product logo

rnradarview's Introduction

描述

一个在ReactNative使用的雷达图组件

installation

npm install radar-view --save

Screenshot

image

Sample

export default class TestRadar extends React.Component {
    render() {
        let data = {
            title: 'aaa',
            max: 100,
            data: [
                {k: '在的', v: 20, desc: '这是一'},
                {k: '吃的', v: 40, desc: '这是一'},
                {k: '阿法', v: 60, desc: '这是一'},
                {k: '东东', v: 80, desc: '这是一'},
                {k: '啊', v: 100, desc: '这是一'},
                {k: 'AB', v: 60, desc: '这是一'},
                {k: 'C/D', v: 20, desc: '这是一'},
            ],
            compare: [
                {k: '在的', v: 30, desc: 'a'},
                {k: '吃的昂发', v: 30, desc: 'v'},
                {k: '阿德法', v: 30, desc: 'c'},
                {k: '东东', v: 30, desc: 'd'},
                {k: '啊', v: 70, desc: 'e'},
                {k: 'AB', v: 60, desc: 'e'},
                {k: 'gg', v: 80, desc: 'e'},
            ]
        };


        // 所有的参数都是可选
        return <RadarView
            size={200}
            radarData={data}
            drawTitle={true}
            drawSubTitle={true}
            // renderTitle={this._renderTitle}
            radarStyle={{
                radarPadding: 40,
                titlePadding: 16,

                borderWidth: 1,
                borderColor: '#999999',
                borderFillColor: '#ffffff',

                spiderColor: '#dddddd',
                spiderLineCount: 3,
                spiderWidth: 1,
                drawVSpiderLine: false,

                radarBorderColor: '#ff0000',
                radarFillColor: '#ff0000aa',
                radarBorderWidth: 1,

                compareRadarBorderColor: '#cccccc',
                compareRadarFillColor: '#cccccccc',
                compareRadarBorderWidth: 1,

                titleSize: 10,
                titleColor: '#333333',
                subTitleSize: 8,
                subTitleColor: '#999999',

            }}/>
    }

    _renderTitle = (x, y, index) => {
        let font = "normal " + scale(12) + "px Helvetica";
        y = y - scale(12) / 2;
        return <ART.Group>
        <ART.Text
            key={index}
            strokeWidth={1}
            fill={'#ff0000'}
            font={font}
            alignment="center"
            fontWeight="normal"
            x={x}
            y={y}>
            sss
        </ART.Text>
        </ART.Group>
    }
}

API

rnradarview's People

Contributors

xiaofanqingzjj avatar

Stargazers

 avatar  avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.