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

Question

我真的很喜欢 react-native-chart-kit 的整洁，但是我对它显示数据的方式有疑问。

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

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

谢谢

Answer 1

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

在图表上使用 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, 255, ${opacity})`,
          data: data.datasets,
        }}
        formatYLabel={() => yLabelIterator.next().value}
      />
    </View>
  );
};

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

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

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

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

Answer 2

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

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

Answer 3

我能够使用 getDotProps 和最小值、最大值作为数据集来做到这一点。你可以有一个回调函数来渲染点，索引和数据值在此函数中返回，你可以检查原始数据集中是否存在该值。因为原始数据集中永远不会存在最小值和最大值，因此返回 -1，您可以使用该逻辑使这些点透明。

示例：

 const chartData = [60, 62, 70, 73, 80];

 <LineChart
        data={{
          datasets: [
            {
              data: chartData,
            },
            {
              data: [50],
            },
            {
              data: [100],
            },
          ],
        }}
        getDotProps={(dataPoint, index) => {
          return {
            r: "6",
            strokeWidth: "2",
            stroke:
              chartData.indexOf(index) == -1
                ? `rgba(0, 0, 0, 0)` // make it transparent
                : 'red',
            fill:
              chartData.indexOf(index) == -1
                ? `rgba(0, 0, 0, 0)`  // make it transparent
                : 'red',
          };
        }}
  ......
  ......
 </LineChart>

Answer 4

我添加了一个新的数据集，其中有一个值是我希望它在图表上显示的高度值，我给它一个属性 withDots: false 来隐藏点，它是现在工作得很好。

这是我用过的代码...

datasets: [
        {
          data: [20, 50, 79], // my graph data
        },
        {
          data: [200], //highest graph value
          withDots: false, //a flage to make it hidden
        },
      ],

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

react-native-chart-kit Min and Max value

jsx

reactjs

react-native

react-native-chart-kit