在React Native上构建自定义图表

如何解决在React Native上构建自定义图表

手头的任务：

到目前为止我已经学到了很多东西：

1. 来自[https://github.com/JesperLekland/react-native-svg-charts-examples][2]的饼图

在这里，我将整个饼分成1个值的50个单位，以获取分割条效果。我可以根据上面显示的图像传递颜色。 但是，如何添加内部线（红色和绿色）和内部数据呢？ 任何帮助将不胜感激！

解决方法

所以我要采取的方法是使外圈成为PieChart（就像您已经做过的一样），但使内圈成为ProgressCircle（https://github.com/JesperLekland/react-native-svg-charts#progresscircle）作为该组件自然看起来像图片中的内圈。您可以将其backgroundColor道具更改为红色，并将其progressColor道具更改为绿色。

import {PieChart,ProgressCircle} from 'react-native-svg-charts';
import Svg,{Text as SvgText,ForeignObject} from 'react-native-svg';
import Icon from 'react-native-vector-icons/FontAwesome5';

// ...

class CustomPieChart extends React.PureComponent {
  render() {
    const data = Array.apply(null,Array(50)).map(Number.prototype.valueOf,1);

    // Change to whatever your fill function looks like...
    const getFill = (index) => {
      if (index > 30) return 'purple';
      if (index > 20) return 'blue';
      if (index > 10) return 'green';
      return 'red';
    };

    const pieData = data.map((value,index) => ({
      value,svg: {
        fill: getFill(index),},key: `pie-${index}`,}));

    return (
      <PieChart innerRadius="90%" style={styles.pieChart} data={pieData}>
        <ProgressCircle
          style={styles.progressCircle}
          progress={0.7}
          backgroundColor="red"
          progressColor="green">
          <ForeignObject x={-100} y={-100}>
            <View style={styles.progressCircleContentContainer}>
              <Text style={{...styles.text,color: 'green',marginBottom: 5}}>
                Active
              </Text>
              <View
                style={{
                  ...styles.progressCircleContentView,width: 110,}}>
                <Icon name="heartbeat" size={30} color="red" />
                <Text style={styles.text}>72 BPM</Text>
              </View>
              <View style={styles.progressCircleContentView}>
                <Icon name="shoe-prints" size={30} color="red" />
                <Text style={styles.text}>4,565</Text>
                <Icon name="bolt" size={30} color="red" />
                <Text style={styles.text}>45 min</Text>
              </View>
              <View style={styles.progressCircleContentView}>
                <Icon name="fire-alt" size={30} color="red" />
                <Text style={styles.text}>1,856</Text>
                <Icon name="glass-whiskey" size={30} color="red" />
                <Text style={styles.text}>Active</Text>
              </View>
              <View style={{...styles.progressCircleContentView,width: 150}}>
                <Icon name="moon" size={30} color="red" />
                <Text style={styles.text}>6 hr 10 min</Text>
              </View>
            </View>
          </ForeignObject>
        </ProgressCircle>
      </PieChart>
    );
  }
}

const styles = StyleSheet.create({
  pieChart: {
    height: 300,progressCircle: {
    height: 250,marginTop: 25,progressCircleContentContainer: {
    alignItems: 'center',width: 200,height: 200,transform: [],progressCircleContentView: {
    flexDirection: 'row',justifyContent: 'space-between',marginBottom: 5,text: {
    fontSize: 20,});

---

此示例不执行的操作：

• 在圆圈上添加背景阴影
• 在外圆的外部添加图标

自定义形状是由react-native-svg内部使用的库react-native-svg-charts制成的。您可以在这里阅读其文档：https://github.com/react-native-community/react-native-svg 。

---

外观：