react-native-charts-wrapper——RedarChart

参数详解

import React from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  processColor
} from 'react-native';
import update from 'immutability-helper';

import {RadarChart} from 'react-native-charts-wrapper';


class RadarChartScreen extends React.Component {

  constructor() {
    super();

    this.state = {
      data: {},
      legend: {
        enabled: true,//是否显示左下角指示器
        textSize: 14,//左下角指示器字大小
        form: 'CIRCLE',//左下角指示器图标大小'SQUARE'，'CIRCLE'
        wordWrapEnabled: true,//??
      }
    };
  }

  componentDidMount() {
    this.setState(
      update(this.state, {
        data: {
          $set: {
            dataSets: [{
              //雷达图的上的数据与xAxis上的属性一一对应
              values: [{value: 120}, {value: 110}, {value: 105}, {value: 115}, {value: 110}],
                //图左下角指示器的名称
              label: 'DS 1',
              config: {
                //图左下角指示器图表颜色、绘制图的边框颜色
                color: processColor('#000'),
                //是否对绘制图填充颜色
                drawFilled: true,
                  //绘制图填充的颜色
                fillColor: processColor('#000'),
                  //填充颜色透明度
                fillAlpha: 100,
                  //绘制图边框宽度
                lineWidth: 2
              }
            },
            //     {
            //   values: [{value: 115}, {value: 100}, {value: 105}, {value: 110}, {value: 120}],
            //   label: 'DS 2',
            //   config: {
            //     color: processColor('#C0FF8C'),
            //
            //     drawFilled: true,
            //     fillColor: processColor('#C0FF8C'),
            //     fillAlpha: 150,
            //     lineWidth: 1.5
            //   }
            // }, {
            //   values: [{value: 105}, {value: 115}, {value: 121}, {value: 110}, {value: 105}],
            //   label: 'DS 3',
            //   config: {
            //     color: processColor('#8CEAFF'),
            //
            //     drawFilled: true,
            //     fillColor: processColor('#8CEAFF')
            //   }
            // }
              ],
          }
        },
        xAxis: {
          $set: {
            //雷达图五个角上的属性名称
            valueFormatter: ['身高', '体重', '年龄', '性格', '爱好']
          }
        }
      })
    );
  }

  handleSelect(event) {
    let entry = event.nativeEvent
    if (entry == null) {
      this.setState({...this.state, selectedEntry: null})
    } else {
      this.setState({...this.state, selectedEntry: JSON.stringify(entry)})
    }

    console.log(event.nativeEvent)
  }

  render() {
    return (
      <View style={{flex: 1}}>

        <View style={{height:80}}>
          <Text> selected entry</Text>
          <Text> {this.state.selectedEntry}</Text>
        </View>

        <View style={styles.container}>
          <RadarChart
            style={styles.chart}
            data={this.state.data}
            xAxis={this.state.xAxis}//外围五个点显示数据，drawLabels:false表示不显示
            yAxis={{drawLabels:false}}//显示雷达网每一圈代表的数值
            chartDescription={{text: 'sdcsdsdcds'}}//右下角对图标的描述
            legend={this.state.legend}//左下角指示器
            drawWeb={true}//绘制雷达图

            webLineWidth={2}//雷达图指示线的宽度
            webLineWidthInner={1}//雷达图绘制线的宽度
            webAlpha={255}//雷达图透明度0-255
            webColor={processColor("red")}//雷达图指示线的颜色
            webColorInner={processColor("green")}//雷达图绘制线的颜色

            skipWebLineCount={0}//每隔几条显示一条指示线
            onSelect={this.handleSelect.bind(this)}
            onChange={(event) => console.log(event.nativeEvent)}
          />
        </View>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF'
  },
  chart: {
    flex: 1
  }
});

export default RadarChartScreen;