在 React Native 上构建自定义图表

Question

手头的任务：

到目前为止我学到了很多：

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

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

Answer 1

所以我会采取的方法是使外环成为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',
    width: 200,
    marginBottom: 5,
  },
  text: {
    fontSize: 20,
  },
});

---

这个例子没有做什么：

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

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

---

外观：