【React Native】做了一个简约的雷达图组件

import React from 'react';
import { View, StyleSheet } from 'react-native';
import PropTypes from 'prop-types';
 
const Radar = ({ data, maxValue, segments }) => {
  // 计算单个扇区的角度
  const anglePerSegment = 360 / segments;
 
  // 渲染每个扇区
  const renderSegment = (value, index) => {
    const angle = anglePerSegment * index;
    const radius = (value / maxValue) * 50; // 假设最大半径为50
    // 使用三角函数计算扇区的起点和终点坐标
    const startX = Math.cos(angle * Math.PI / 180) * radius;
    const startY = Math.sin(angle * Math.PI / 180) * radius;
    const endX = Math.cos((angle + anglePerSegment) * Math.PI / 180) * radius;
    const endY = Math.sin((angle + anglePerSegment) * Math.PI / 180) * radius;
 
    return (
      <View
        key={index}
        style={[
          styles.segment,
          {
            left: startX + 50, // 中心点坐标为(50, 50)
            top: startY + 50,
            borderTopWidth: 1,
            borderRightWidth: 1,
            borderColor: 'black',
            borderStyle: 'solid',
            width: Math.abs(endX - startX),
            height: Math.abs(endY - startY),
          },
        ]}
      />
    );
  };
 
  return (
    <View style={styles.container}>
      {data.map(renderSegment)}
    </View>
  );
};
 
Radar.propTypes = {
  data: PropTypes.arrayOf(PropTypes.number).isRequired,
  maxValue: PropTypes.number.isRequired,
  segments: PropTypes.number.isRequired,
};
 
const styles = StyleSheet.create({
  container: {
    width: 100,
    height: 100,
    position: 'relative',
  },
  segment: {
    position: 'absolute',
  },
});
 
export default Radar;

这个代码实例提供了一个简单的雷达图组件，它接收data、maxValue和segments三个属性。data是一个数组，包含了需要显示的数值；maxValue是数据中的最大值，用于计算扇区的最大半径；segments是雷达图的分段数量。每个数值对应一个分段，并根据其大小绘制对应的扇区。这个例子使用了React Native的StyleSheet来定义内部样式，并使用PropTypes来校验传入的属性。