在react-native-gifted-chart LineChart中的某个索引上更改pointerLable样式

Question

折线图

正如您在提供的图像上看到的，我有一个来自 react-native-gifted-chart 的带有指针标签的折线图。 我的问题是，当我想在图表末端可视化一个pointerLabel时，标签会根据图表的大小进行裁剪。 有办法解决这个问题吗？或者获取指针的索引来改变标签样式？

这是我的代码：

const CarboChart = ({ graphData, period }) => {

    const customDataPoint = () => {
        return (
            <Block style={styles.customDataPoint}/>
        );
    };

    const pointerLabelComponent = (items) => {
        return (
            <Block>
                <Block style={styles.PointerLabelDate}>
                    <Text style={styles.PointerLabelDateText}>{items[0].date}</Text>
                </Block>
                <Block style={styles.PonterLabelValue}>
                    <Text style={styles.PonterLabelValueText}>{items[0].value + ' g'}</Text>
                </Block>
            </Block>
        );
    };

    const maxDataPoint = Math.max(...graphData.map(item => item.value));

    const data = graphData.map((item, index) => {

        // position of dataPoints labels on the chart
        let shiftX, shiftY;
        if (index === 0) { shiftX = 30, shiftY = 0 } //first
        else if (index === graphData.length - 1) { shiftX = -15, shiftY = 0 } //last
        else if (index === Math.floor(graphData.length / 2)) { shiftX = 30, shiftY = 0 } //middle
        else if (item.value === maxDataPoint) { shiftX = 10, shiftY = 20 } //max

        if (index === 0 || index === graphData.length - 1 || index === graphData.length / 2 || item.value === maxDataPoint) {
            return {
                ...item,
                customDataPoint: customDataPoint,
                dataPointLabelComponent: () => {
                    return (
                        <Block key={index} style={styles.dotContent}>
                            <Text style={styles.dotContentText}>{item.value} g</Text>
                        </Block>
                    );
                },
                dataPointLabelShiftY: shiftY,
                dataPointLabelShiftX: shiftX,
            };
        } else {
            return { ...item, hideDataPoint: true };
        }
    });

    const dataWithLabels = data.map((item, index) => {
        if (period === 'lastWeek') {
            if (index === 1 || index === 3 || index === 5) {
                return {
                    ...item,
                    label: item.date,
                };
            } else {
                return item;
            }
        } else {
            return item;
        }
    });

    return (
        <Block style={styles.container}>
            <LineChart
                data={dataWithLabels}
                curved
                curveType={1}
                initialSpacing={7}
                maxValue={maxDataPoint + 200}

                width={Dimensions.get('window').width - 40}
                height={170}
                spacing={period === 'lastWeek' ? Dimensions.get('window').width - 338 : period === 'lastTwoWeeks' ? Dimensions.get('window').width / 17.7 : Dimensions.get('window').width / 40}
                disableScroll

                // animation
                isAnimated
                animationDuration={1000}

                // axis
                noOfSections={6}
                xAxisThickness={0}
                /* xAxisColor="rgba(157, 208, 48, 0.5)" */
                xAxisLabelTextStyle={styles.AxisLabels}

                yAxisThickness={0}
                /* yAxisLabelWidth={0} */
                yAxisTextStyle={styles.AxisLabels}
                yAxisLabelSuffix=" g"

                // grid
                showVerticalLines
                verticalLineUptoDataPoint={true}
                verticalLinesColor="rgba(157, 208, 48, 0.5)"
                hideRules  //hide vertical dotted lines
                /* rulesType="solid"
                rulesColor="rgba(157, 208, 48, 0.5)"
                rulesLength={Dimensions.get('window').width - 60} */

                // lineStyle
                color="rgba(157, 208, 48, 1)"
                startFillColor={COLORS.CLEARGREEN}
                startOpacity={0}
                endFillColor={COLORS.CLEARGREEN}
                endOpacity={0}

                // labels on chart press
                pointerConfig={{
                    pointerStripHeight: 110,
                    pointerStripColor: COLORS.DARKGREEN,
                    pointerStripWidth: 2,
                    pointerColor: COLORS.DEFAULT,
                    pointerBorderColor: COLORS.DARKGREEN,
                    pointerLabelWidth: 60,
                    pointerLabelHeight: 40,
                    shiftPointerLabelX: -20,
                    shiftPointerLabelY: -37,
                    focusEnabled: true,
                    pointerLabelComponent: pointerLabelComponent
                }}
            />
        </Block>
    );
};

我尝试检索按下的pointerLabel的索引，以将不同的位置样式应用于图表两端的位置样式，但我无法获取索引

Answer 1

pointerLabelComponent

现在接受 3 个参数 -

items

、

secondaryDataItem

和

pointerIndex

。 您可以放置第一个和最后一个pointerLabelComponents，这样它们就不会溢出图表区域。第一个和最后一个pointerLabelComponents 可以使用

pointerIndex

参数来标识。

此功能已在 1.4.23 版本的

react-native-gifted-charts

中添加。请使用最新版本的库。