React Native Gifted Charts - 有没有办法调整数据点标签组件，使它们留在屏幕内？

Question

我正在使用折线图组件来显示随时间变化的值。我用数据标签表示最大和最小值，如下所示： 重叠数据标签

如您所见，如果数据标签位于屏幕边缘，则会重叠并且无法读取。 我不能简单地获取第一个和最后一个索引并调整这些索引的数据标签，因为第二个到最后一个、第三个到最后一个等也将重叠屏幕边缘，并且数据点的数量是可变的，所以我不能只是硬编码值。

这里我尝试使标签不可见，然后使用handleLayout测量数据点标签的位置，然后使用Redux保存该位置。

            export const DataPointLabelComponentLayoutSetter = (value: number, isMax: boolean, currencyType: string) => {
    const handleLayout = (event: LayoutChangeEvent) => {
        event.persist(); // Prevent the event from being reused
        event.currentTarget?.measure((x, y, width, height, pageX, pageY) => {
            if (isMax === true) {
                store.dispatch(setCoinGraphDataLabelPropsMax({ x, y, width, height, pageX, pageY, value, isMax }));
            } else if (isMax === false) {
                store.dispatch(setCoinGraphDataLabelPropsMin({ x, y, width, height, pageX, pageY, value, isMax }));
            }
        });
    };

    return (
        <View style={[styles.labelContainer, { opacity: 0 }]} onLayout={handleLayout}>
            {!isMax && <MaterialIcons name="keyboard-arrow-up" color={"white"} size={10} />}
            <Text style={styles.labelText}>{convertToCurrencyFormat(value, currencyType)}</Text>
            {isMax && <MaterialIcons name="keyboard-arrow-down" color={"white"} size={10} />}
        </View>
    );
};

然后我将其发送到顶部的辅助标签，该标签调整远离屏幕边缘的位置，但这是有问题的，有时不会更新位置 - 我想这与 Redux 有关，但它已经感觉很hacky所以我对它不起作用并不感到惊讶。

    const dataLabelPropsMax = useSelector((state: RootState) => state.coinGraphDataLabelProps?.coinGraphDataLabelPropsMax);
    const dataLabelPropsMin = useSelector((state: RootState) => state.coinGraphDataLabelProps?.coinGraphDataLabelPropsMin);

    return (
        <View style={styles.container}>
            <LineChart
                ...
            />
            {dataLabelPropsMax && dataLabelPropsMin && (
                <>
                    <DataPointLabelComponent currencyType={currencyType} dataPointLabelProps={dataLabelPropsMax} />
                    <DataPointLabelComponent currencyType={currencyType} dataPointLabelProps={dataLabelPropsMin} />
                </>
            )}
        </View>
    );

如何解决这个问题？

Answer 1

即使数据点的数量是可变的，您也可以获得第一个和最后一个（或前几个和最后几个）索引。

前几个索引始终是 0,1,2...
最后几个索引将始终是

data.length-1

、

data.length-2

、

data.length-3

...

一旦获得所需的索引，您就可以有条件地将其数据点标签向左或向右移动以避免截断。