Recharts - 如何解决图形缩放问题？答案

【问题标题】：Recharts - How to fix graph scaling issue?Recharts - 如何解决图形缩放问题？
【发布时间】：2021-03-05 18:08:41
【问题描述】：

在 React 应用程序中（使用 Next.js），我正在尝试使用 recharts http://recharts.org/en-US/api/LineChart 实现图形功能。我的代码如下，

/index.js

const formatDate = (value) => {
  return moment.unix(value).format('HH:MM A DD MM, YYYY')
}

const weeklyData = [
  { date: formatDate(1613619000), price: '1200.00' },
  { date: formatDate(1613617200), price: '1300.83' },
  { date: formatDate(1613615400), price: '1250.23' },
  { date: formatDate(1613611800), price: '500.55' },
  { date: formatDate(1613608200), price: '1600.23' },
  { date: formatDate(1613606400), price: '1850.93' },
  { date: formatDate(1613604600), price: '1750.23' },
  { date: formatDate(1613599200), price: '650.23' },
]

<LineChart
  width={900}
  height={250}
  data={data}
  margin={{
    top: 5,
    right: 30,
    left: 20,
    bottom: 5,
  }}
>
  <Tooltip content={<CustomTooltip />} cursor={false} />
  <Line type="monotone" dataKey="price" stroke="#4ec6f4" label="Shruthi" />
</LineChart>

/tooltip.js

const CustomTooltip = ({ active, payload, label }) => {
 if (active && payload && payload.length) {
   return (
     <div className="tooltip">
      <p className="tooltipLabel">{`$${payload[0].payload?.price}`}</p>
      <p className="tooltipDesc">{`${payload[0]?.payload?.date}`}</p>
     </div>
   )
  }
  return null
}

CustomTooltip.propTypes = {
 type: PropTypes.string,
 payload: PropTypes.array,
 label: PropTypes.string,
}

export default CustomTooltip

现在YAxis 被限制为 1000，并且图形（缩放）正在显示开箱即用且不可见。图表应该显示在我设置的容器中。这里的价格不固定，可以像123456.88 或者更多。在所有情况下，我该如何解决这个问题？

【问题讨论】：

标签： reactjs user-interface graph next.js recharts

【解决方案1】：

尝试将价格类型转换为数字或使用不带单引号的值。

注意：如果可能，请发布完整代码以获得更好的响应

【讨论】：