通过在 Xasis 中显示 1 小时间隔的数据，Recharts 折线图显示奇怪

Question

我试图让它与这张图表相似，但它显示得很奇怪。

我需要像这张图片这样的结果

这是在 Stackbiltz 上运行的演示项目

x 轴显示从上午 9 点到下午 3 点（1 小时间隔），时间值数据间隔为 1 分钟，但在这样做之后，这条线很奇怪（可能太窄了）。 你有什么想法？

谢谢你的帮助。

Answer 1

数据变化太多，图形宽度至少900px才好看。

您可以尝试在 10 秒内更改一次数据，然后图表看起来也不错，宽度为 250 像素

let j = 0
  let value = parseFloat(getRandomNumber(980, 1050).toFixed(2))
  for (let i = 0; i < totalRange / (60 * 1000) - 1; i++) {

    if (j % 10 === 0) {
      value = parseFloat(getRandomNumber(980, 1050).toFixed(2))
    }
    const next = start.add(1, 'minutes').valueOf();

    arr.push({
      time: next,
      value,
    });
    j++
  }