在react-native-chart-kit中，如何显示带有最小-最大值或“fromZero”的折线图？

Question

Stack Overflow 社区您好，

我正在使用 expo 创建一个 React Native 移动应用程序。我想使用“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,
                }}
              />

任何帮助将不胜感激:)

Answer 1

我还找不到任何可以做到这一点的功能。但您可以在显示屏上欺骗系统：

1. 在数据集中添加 2 个其他对象，1 个表示最小值，1 个表示最大值
2. 在每个对象中，指定

   withDots: false

   以隐藏单个点。

代码：

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

        strokeWidth: 2, // optional
      },
      {
        data: diastole,
        strokeWidth: 2, // optional
      },
      {
        data: [0], // minimum
        withDots: false,
      },
      {
        data: [1000], // maximum
        withDots: false,
      },
    ],
  }}
/>

Answer 2

将这两项相加即可得到最小值、最大值

'fromZero' 将最小值设置为 0

'fromNumber' 设置最大值，在我的例子中是 100

fromZero
fromNumber={100}