如何在React Native中创建多折线图?

时间:2020-06-22 18:16:28

标签: react-native

我正在尝试在简单的本机移动应用程序中创建多折线图。 我尝试了各种库,但多折线图不起作用。 我是新来的。请帮忙。

1 个答案:

答案 0 :(得分:1)

你可以使用“react-native-char-kit” 只需提供多个数据集,就可以实现多折线图。

<LineChart
    bezier
    withHorizontalLabels={false}
    withVerticalLabels={false}
    data={{
        labels: [' jan', ' feb', ' mar', ' apr', ' june', ' july'],
        datasets: [
                            
                    {
                                data: [10, -4, 6, -8, 80, 20],
                                strokeWidth: 2,
                    },
                    {
                                data: [5,8,6,9,8,2,-2],
                                strokeWidth: 2,
                    },
                ],
        legend: ['car', 'bike'],
        }}
        width={Dimensions.get('window').width - 16}
        height={200}
        chartConfig={{
                        backgroundColor: '#1cc910',
                        backgroundGradientFrom: '#eff3ff',
                        backgroundGradientTo: '#efefef',
                        decimalPlaces: 2,
                        color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
                        style: {
                            borderRadius: 16,
                        },
                    }}
        style={{
                borderRadius: 16,
            }}
                />