使用 React Table 返回第一个值重新绘制 dataMax

Question

我正在构建一个简单的 React 应用程序，它从 API 中提取数据，使用 React Table 来组织数据，并将 Recharts 连接到图表。

我正在尝试绘制两个字段 - "UnitPrice" 和 "District"。并非 JSON 中的所有对象都包含 "UnitPrice"。当我将轴域设置为 domain={[0, 'dataMax']} 时，图形总是 returns 第一个非零值作为 dataMax。

我试过编写如下所示的一些函数来替换 dataMax 但没有成功。

const MaxY = ({ UnitPrice, i }) => {
  let max;
  for (i = 0; i < UnitPrice.length; i++) {
    if (UnitPrice[i] > max) {
      max = UnitPrice[i];
    }
  }
  return max;
};

我也尝试删除不包含 UnitPrice 或重复 District 值但失败的项目。我是否需要重新映射与 React Table 分开的数据才能正常工作？

Answer 1

如果将 NaN 提供给 domain 属性的第二个元素，这似乎是 Recharts 的默认行为，或者它是 Recharts 内部计算 dataMax 的结果。

如果 JSON 将 UnitPrice 编码为字符串，这通常会发生。如果是这种情况，请将其解析为整数。

虽然我不能肯定地说，考虑到 Recharts 似乎不处理字符串到整数的转换，您可能不想删除任何没有 UnitPrice 的元素- 或提供默认数值。如果不这样做，Recharts 可能会计算一个 NaN 作为最大 Y 值，这将导致它的回退行为。

使用 React Table 返回第一个值重新绘制 dataMax

Recharts dataMax with React Table returning first value

javascript

reactjs

graph

react-table

recharts