如何在 React Native 中使用 StackedAreaChart 添加 XAxis？

Question

我正在使用this React Native 包来制作StackedAreaChart。它工作正常，但我无法使用 date 标签添加 XAxis。

这是我的代码

const hardCodedData = [
        {
            month: new Date(2015, 0, 1),
            BackLeft: 3840,
            BackRight: 1920,
            FrontLeft: 960,
            FrontRight: 400,
        },
        {
            month: new Date(2015, 1, 1),
            BackLeft: 1600,
            BackRight: 1440,
            FrontLeft: 960,
            FrontRight: 400,
        },
        {
            month: new Date(2015, 2, 1),
            BackLeft: 640,
            BackRight: 960,
            FrontLeft: 3640,
            FrontRight: 400,
        },
        {
            month: new Date(2015, 3, 1),
            BackLeft: 3320,
            BackRight: 480,
            FrontLeft: 640,
            FrontRight: 400,
        },
    ]

const colors = ['#E8B2EE', '#47D1D9', '#8072FF', '#FE8C87']

    const keys = ['BackLeft', 'BackRight', 'FrontLeft', 'FrontRight']

    const svgs = [
        { onPress: () => alert('Back Left') },
        { onPress: () => alert('Back Right') },
        { onPress: () => alert('Front Left') },
        { onPress: () => alert('Front Right') },
    ]

    const Gradient = () =>
        map(hardCodedData, (d, i) => {
            //console.log("color: " + d.month)
            let key = 'gradient' + d.month;
            let color = colors[i];
            console.log("color: " + color)
            return (
                <Defs key={key}>
                    <LinearGradient id={key} x1={'0'} y={'0%'} x2={'0'} y2={'100%'}>
                        <Stop offset={'0%'} stopColor={ color } />
                        <Stop
                            offset={'100%'}
                            stopColor={'rgba(165, 125, 255, 0)'}
                        />
                    </LinearGradient>
                </Defs>
            );
        });

    let gradients = map(hardCodedData, d => {
        let fill = `url(#gradient${d.month})`;
        return fill;
    })

<StackedAreaChart
     style={{ height: 334, paddingVertical: 16 }}
     data={hardCodedData}
     keys={keys}
     colors={gradients}
     curve={shape.curveNatural}
     showGrid={false}
     svgs={svgs}
 >
     <Grid />
     <Line />
     <Gradient />
 </StackedAreaChart>

你能帮我解决这个问题吗？

编辑 在@Wiliam Brochensque Junior 的帮助下，我能够渲染 XAxis

 <XAxis
    style={{ backgroundColor: 'transparent' }}
    data={hardCodedData}
    formatLabel={(value, index) => hardCodedData[index].month.getDay().toString() + "-" + hardCodedData[index].month.getMonth().toString() + "-" + hardCodedData[index].month.getYear().toString()}
     contentInset={{ left: 18, right: 18 }}
     svg={{ fontSize: 20, fill: '#3A8F98' }}
 />

Answer 1

以this代码为例，可以如下：

import React from 'react'
import { StackedAreaChart, XAxis, Grid } from 'react-native-svg-charts'
import * as shape from 'd3-shape'
import { View } from 'react-native'

class AreaStackWithAxisExample extends React.PureComponent {
    render() {
        const data = [
            {
                month: new Date(2015, 0, 1),
                apples: 3840,
                bananas: 1920,
                cherries: 960,
                dates: 400,
            },
            {
                month: new Date(2015, 1, 1),
                apples: 1600,
                bananas: 1440,
                cherries: 960,
                dates: 400,
            },
            {
                month: new Date(2015, 2, 1),
                apples: 640,
                bananas: 960,
                cherries: 3640,
                dates: 400,
            },
            {
                month: new Date(2015, 3, 1),
                apples: 3320,
                bananas: 480,
                cherries: 640,
                dates: 400,
            },
        ]

        const colors = [
            'rgb(138, 0, 230, 0.8)',
            'rgb(173, 51, 255, 0.8)',
            'rgb(194, 102, 255, 0.8)',
            'rgb(214, 153, 255, 0.8)',
        ]
        const keys = ['apples', 'bananas', 'cherries', 'dates']

        return (
            <View style={{ flexDirection: 'row', height: 200 }}>
                <StackedAreaChart
                    style={{ flex: 1 }}
                    contentInset={{ top: 10, bottom: 10 }}
                    data={data}
                    keys={keys}
                    colors={colors}
                    curve={shape.curveNatural}
                >
                    <Grid />
                </StackedAreaChart>
                <XAxis
                    style={{ position: 'absolute', top: 0, bottom: 0 }}
                    data={StackedAreaChart.extractDataPoints(data, keys)}
                    contentInset={{ top: 10, bottom: 10 }}
                    svg={{
                        fontSize: 8,
                        fill: 'white',
                        stroke: 'black',
                        strokeWidth: 0.1,
                        alignmentBaseline: 'baseline',
                        baselineShift: '3',
                    }}
                />
            </View>
        )
    }
}

export default AreaStackWithAxisExample