визуализировать гистограмму с разными цветами в реагировать родной

Question

Я хочу создать гистограмму, каждый цвет которой имеет разные цвета со значениями оси X.Я пробовал barChart из response-native-svg-charts .

Answer 1

Вы можете создать столбчатую диаграмму, имеющую каждый столбец разного цвета, с помощью модуля реагировать-нативные svg-диаграммы , используя 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>

Дайте мне знать, если у вас все еще есть проблемы.Вы даже можете найти этот пример на примерах response-native-svg-charts по этой ссылке .