反应本机SVG饼图-在中心显示总计

时间:2019-12-07 22:39:51

标签: react-native react-native-svg-charts

我正在为我们的组织构建一个新的移动应用程序,该应用程序将使用饼图显示员工的生产情况。我一直想做的一件事情是在饼图的中心(今天只有空白)显示应用程序的总数。我搜寻了Internet的深度,但似乎无法找到解决方案。请注意,这是我做过的第一个移动和反应应用程序。如您在我之前的问题/答案中所见,非常熟悉asp.net和MVC。

这是我当前正在使用的代码。

        <View style={styles.container}>
        <PieChart style={{ height: 250 }} data={pieData} />
        <Text
            onLayout={({
                nativeEvent: {
                    layout: { width },
                },
            }) => {}}
            style={{
                position: 'absolute',
                textAlign: 'center',
                alignItems: 'center',
                justifyContent: 'center',
            }}
        >
            Hello
        </Text>
        <View style={{ alignItems: 'center', paddingTop: 10 }}>
            <View>
                {props.data.map((s, idx) => legendItem(s, colors[idx]))}
            </View>
        </View>
    </View>

我刚刚添加了Hello文本作为占位符,以说明我想从何处开始使用它,但是它只是将其呈现在与饼图顶部相同的高度上,但现在左对齐

关于如何既将文本Hello置于PieChart的中心,又可能计算数据值的任何想法?

0 个答案:

没有答案