渲染条形图与不同的颜色反应原生

Question

我想创建条形图，每个条形图的颜色与x轴值不同。我从react-native-svg-charts尝试过barChart。

Answer 1

您可以使用 react-native-svg-charts 模块使用 BarChart 创建每个条形图具有不同颜色的条形图。我刚刚使用以下代码创建了一个不同颜色的条形图： -

您可以使用以下各种不同的svg颜色提供数据： -

    const data1 = [ 14, -1, 100, -95, -94, -24, -8, 85, -91, 35, -53, 53, -78, 66, 96, 33, -26, -32, 73, 8 ]
    .map((value) => ({ value }))
    const data2 = [ 24, 28, 93, 77, -42, -62, 52, -87, 21, 53, -78, -62, -72, -6, 89, -70, -94, 10, 86, 84 ]
        .map((value) => ({ value }))

    const barData = [
        {
            data: data1,
            svg: {
                fill: 'rgb(134, 65, 244)',
            },
        },
        {
            data: data2,
            svg: {
                fill: 'red',
            },
        },
    ]

然后你可以在条形图中使用这个条形数据，这样就可以得到2个不同颜色的条形图，如红色和蓝色。

        <BarChart
            yAccessor={({ item }) => item.value}
            style={{ height: 200 }}
            data={ barData }
            svg={{ fill: 'green' }}
            contentInset={{ top: 30, bottom: 30 }}
        >
            <Grid/>
        </BarChart>

如果您还有任何问题，请告诉我。 您甚至可以在此link上的 react-native-svg-charts 示例中找到此示例。