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

Question

我真的很喜欢 react-native-chart-kit 的简洁性，但是我对它如何显示数据有疑问。

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

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

谢谢

Answer 1

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

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

Answer 2

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

• 使用fromZero图表上的道具；
• 使用表示您的自定义 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 3

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

这是我用过的代码...

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

Answer 4

我能够使用getDotProps和 min, max 作为数据集来做到这一点。您可以有一个回调函数来渲染点、索引和在此函数中返回的数据值，您可以检查该值是否存在于原始数据集中。因为原始数据集中永远不会存在最小值和最大值，因此返回 -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>