Material-UI 图表仅在悬停后加载线条

Question

我正在尝试使用 Material UI Line Chart 在我的 NextJS 14 应用程序上显示一些数据。数据显示得很好，但图表仅在我将鼠标悬停在其上时呈现线条，而不是在页面加载时立即呈现。轴安装正确，但在鼠标悬停之前不会出现任何线条。

这是我加载图表的方式：

'use client';
import { LineChart } from '@mui/x-charts'
import React from 'react'

const Chart = () => {
  return (
    <div className='w-full h-full'>
        <LineChart
            xAxis={[{ data: [1, 2, 3, 5, 8, 10] }]}
            series={[
                {
                data: [2, 5.5, 2, 8.5, 1.5, 5],
                color: '#245BFF',
                },
            ]}
            disableAxisListener={true}
        />
    </div>
  )
}

export default Chart;

我尝试查看文档以查看是否缺少某个属性，但什么也没找到。

我还确保将： ['@mui/x-charts'] 添加到您的 next.config.js，如 MUI 设置文档

如果有人可以帮助我，我会非常感激！

Answer 1

这只是开发过程中的问题。在生产环境中我没有遇到任何问题。

我不知道确切的原因，但它是“clippath”，没有更新。它不占用全宽度，但悬停时它占用全宽度。