react-native-chart-kit 最小值和最大值

问题描述

我真的很喜欢 react-native-chart-kit 是多么简洁，但是我在它如何显示数据方面遇到了问题。

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

我想知道是否有人更了解这个图表或使用过其他可以做这些事情的东西？

谢谢

解决方法

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

在图表上使用 fromZero 道具；
使用 generator 函数来表示您的自定义 y 轴标签值；
将标签生成器函数给出的结果传递给 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,${opacity})`,data: data.datasets,}}
        formatYLabel={() => yLabelIterator.next().value}
      />
    </View>
  );
};

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

另请注意，图表中 segments 的数量在这里很重要。如果您想拥有 3 标签，您应该拥有 2 段。

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

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

添加额外的数据集，每个数据集一个值（您要显示的最小值和最大值）

<LineChart
    data={{
        datasets: [
          {
            data: [3,4,6,7] // dataset
          },{
            data: [1] // min
          },{
            data: [10] // max
          },}}
/>

jsx jsx react-native react-native-chart-kit reactjs reactjs