首页 > 解决方案 > ReactJS:导入数据后重新绘制图表不呈现线条

问题描述

我已经设法获取并渲染图表上的图。但是,这条线没有显示,我不知道为什么。这是我的代码:

从 API 获取数据

const [error, setError] = useState(null)
const [isLoaded, setIsLoaded] = useState(false)
const [data, setItems] = useState([])

useEffect(() => {
  fetch(
    'http://api.marketstack.com/v1/intraday?access_key=YOUR_ACCESS_KEY&symbols=AMC',
    {
      method: 'GET'
    }
  )
    .then(response => response.json())
    .then(result => {
      setItems(result.data)
      setIsLoaded(true)
      console.log(result)
    })
    .catch(err => {
      setError(error)
      console.error(err)
    })
}, [])

这是我的折线图代码

<LineChart
  width={900}
  height={400}
  data={data}
  margin={{ top: 5, right: 20, bottom: 5, left: 0 }}
>
  <XAxis dataKey='date' tickFormatter={formatXAxis} />
  <YAxis dataKey='close' />
  <CartesianGrid stroke='#ccc' strokeDasharray='5 5' />
  <Line
    type='monotone'
    dataKey='close'
    stroke='##D8A22D'
    activeDot={{ r: 8 }}
  />
  <Tooltip />
  <Legend />
</LineChart>

我检查了文件,我真的无法找出这到底是什么问题。非常感谢一些帮助!谢谢!

标签: reactjsdata-visualizationrecharts

解决方案


推荐阅读