Reaction-Native-Chart-Kit最小值和最大值 [英] react-native-chart-kit Min and Max value

问题描述

我真的很喜欢REACTIVE-Native-Chart-Kit的整洁，但是我对它显示数据的方式有问题。

它使用数据中的最低点作为底部，使用最高点作为顶部。可以选择从零开始，但是如果我想从5开始呢？顶部也是如此，如果我要显示范围从5到90怎么办？

我想知道是否有人对此图表了解得更多，或者是否使用过其他可以做这些事情的工具？

谢谢

推荐答案

解决方法是执行以下操作：

• 使用图表上的fromZero道具；
• 使用表示自定义y轴标签值的generator函数；
• 将标签生成器函数提供的结果传递给formatYLabel属性；
• 调整数据：从数据集中的每个数字中减去所需的最小标签值。

---

上面给出的方法示例：

const minValue = 5;
const maxValue = 90;

function* yLabel() {
  yield* [minValue, '', maxValue];
}

const d = [10, 5, 90, 30, 20, 10, 80];
const datapoints = d.map((datapoint) => datapoint - minValue - 1);

const data = {
  labels: ['Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
  datasets: [
    {
      data: datapoints,
    },
  ],
};

const CustomChart = () => {
  const screenWidth = Dimensions.get('window').width;
  const yLabelIterator = yLabel();

  return (
    <View>
      <LineChart
        data={data}
        segments={2}
        width={screenWidth}
        height={220}
        bezier
        fromZero
        chartConfig={{
          color: (opacity = 3) => `rgba(200, 255, 255, ${opacity})`,
          data: data.datasets,
        }}
        formatYLabel={() => yLabelIterator.next().value}
      />
    </View>
  );
};

减去数据集中每个元素的1是因为0在设置fromZero时包含在该范围内。

还请注意，图表的segments号在这里很重要。如果要有3个标签，则应该有2个段。

具有2标签(如上例所示)是该规则的例外情况。具有2标签和1段不起作用。示例中显示的解决方法是使用3标签和2段，但将中间标签设置为空字符串。

---

整体方法的一个警告是，您的数据数组中的值不能高于您的最大标签值。

这篇关于Reaction-Native-Chart-Kit最小值和最大值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！