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

【问题标题】：react-native-chart-kit Min and Max valuereact-native-chart-kit 最小值和最大值
【发布时间】：2021-05-03 18:27:06
【问题描述】：

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

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

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

谢谢

【问题讨论】：

标签： reactjs react-native jsx react-native-chart-kit

【解决方案1】：

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

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

【讨论】：

这不是将这些显示为图表上的实际数据点吗？

【解决方案2】：

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

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

上面给出的方法示例：

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 段，但将中间标签设为空字符串。

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

【讨论】：

这是个好主意，但它并不能解决高价值的问题。我发现另一种方法是必须包含一个包含高和低的数据，但问题是它会同时绘制两者，除非你关闭阴影，否则这是不可行的，我希望我们可以只关闭一个阴影行

【解决方案3】：

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

这是我用过的代码...

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

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案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>

【讨论】：