带有胜利图表的分段控制 React Native

问题描述

我有两个数据集。我想使用分段控制在使用 victory-native 的数据集之间进行更改。我已经实现了一个分段控件，它使用索引在数据集之间进行更改。如何使用 victory-native 在图表上可视化？我的目标是在用户与分段控件交互时在数据集之间切换并在图表上更新。

Data.ts

function getDataSetone() {
  return [
    {
      x: 1,y: 12,},{
      x: 2,y: 23,{
      x: 3,y: 32,{
      x: 4,{
      x: 5,y: 44,{
      x: 6,y: 31,{
      x: 7,y: 36,];
}

function getDataSetTwo() {
  return [
    {
      x: 1,y:12,y: 11,];
}

export const graphs = [
  {
    label: 'D',value: 1,data: (getDataSetone()),{
    label: 'W',value: 2,data: (getDataSetTwo()),] as const;

export type GraphIndex = 0 | 1;

Graph.tsx

const BUTTON_WIDTH = (width - 32) / graphs.length;

const Graph = (props: Props) => {
  const prevIoUs = useSharedValue<GraphIndex>(0);
  const current = useSharedValue<GraphIndex>(0);
  const transition = useSharedValue(0);

  const styles = getStyles();
  const tickValues = getTickValues();

  const style = useAnimatedStyle(() => ({
    transform: [{ translateX: withTiming(BUTTON_WIDTH * current.value) }],}));

  // segmented control mapping over indexes in graphs array in Data.ts
  const graPHPicker = graphs.map((graph,index) => {
    return (
      <TouchableWithoutFeedback
        key={graph.label}
        onPress={() => {
          prevIoUs.value = current.value;
          transition.value = 0;
          current.value = index as GraphIndex;
          transition.value = withTiming(1);
        }}
      >
        <Animated.View style={[styles1.labelContainer]}>
          <Text style={styles1.label}>{graph.label}</Text>
        </Animated.View>
      </TouchableWithoutFeedback>
    );
  })
  return (
    <View>
      <View style={styles1.selection}>
        <View style={StyleSheet.absoluteFill}>
          <Animated.View style={[styles1.backgroundSelection,style]} />
        </View>
        
      </View>

      <View style={{ marginTop: 90,marginLeft: 0 }}>
        <VictoryChart width={SELECTION_WIDTH} height={345}>
          <VictoryAxis
            scale="time"
            standalone={false}
            style={styles.axisYears}
            tickValues={tickValues}
            tickFormat={(x) => {
              return x.getDate();
            }}
          />
          <VictoryAxis
            dependentAxis
            domain={[0,100]}
            offsetX={55}
            orientation="left"
            standalone={false}
            style={styles.axisOne}
          />
          <VictoryLine
            animate={{
              onExit: {
                duration: 300,before: () => ({
                  _y: 0,}),}}
            containerComponent={
              <VictoryCursorContainer cursorLabel={() => <View>hi</View>} />
            }
            data={dataSetone} //???
            domain={{
              x: [
               1,7
              ],y: [0,100],}}
            interpolation="basis"
            scale={{ x: "time",y: "linear" }}
            standalone={true}
            style={styles.lineOne}
          />
          <VictoryBar
            containerComponent={<VictoryVoronoiContainer />}
            labelComponent={<VictoryTooltip />}
            labels={({ datum }) => datum.y}
            animate={{
              onExit: {
                duration: 300,}}
            data={dataSetTwo}
            domain={{
              x: [
                1,}}
            scale={{ x: "time",y: "linear" }}
            standalone={true}
            style={styles.lineTwo}
          />
        </VictoryChart>
      </View>
    </View>
  );
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）