首页 > 解决方案 > 在 react-native-chart-kit 中,如何显示具有 min-max 值或“fromZero”的折线图?

问题描述

嗨堆栈溢出社区,

我正在使用 expo 创建一个反应原生移动应用程序。我想使用库“react-native-chart-kit”显示用户输入数据的折线图。我需要在 Y 轴上显示具有最小值和最大值或从“零”开始的折线图。我的问题/阻碍是,

  1. 有没有办法让 Y 轴的最小值和最大值显示折线图?我已经尝试了“https://stackoverflow.com/questions/65961180/react-native-chart-kit-min-and-max-value”中的实现。它没有帮助我。

  2. 我需要从 0(Y 轴)显示折线图。但是如果我使用 react-native-chart-kit 的 prop "fromZero",数据点和线在 Android 中是分开显示的。下面是代码片段,

<LineChart
                data={{
                  labels: date,
                  datasets: [
                    {
                      data: systole,

                      strokeWidth: 2, // optional
                    },
                    {
                      data: diastole,
                      strokeWidth: 2, // optional
                    },
                  ],
                }}
                withShadow={false}
                width={Dimensions.get("window").width} // from react-native
                height={205}
                //yAxisLabel={"$"}

                chartConfig={{
                  //backgroundColor: '#e26a00',
                  backgroundGradientFrom: "white",
                  backgroundGradientTo: "white",

                  decimalPlaces: 2, // optional, defaults to 2dp
                  color: (opacity = 0) => `rgba(2, 34, 82, ${opacity})`,
                  style: {
                    borderRadius: 16,
                  },
                  useShadowColorFromDataSet: false,
                  propsForDots: {
                    r: "6",
                    strokeWidth: "2",
                    stroke: "#ffa726",
                  },
                }}
                withInnerLines={false}
                legend={["blut"]}
                bezier
                fromZero
                style={{
                  marginVertical: 5,
                  borderRadius: 16,
                }}
              />

折线图 - 数据点和线分开显示

任何帮助将不胜感激:)

标签: react-nativeminlinechartyaxisreact-native-chart-kit

解决方案


推荐阅读