NextJS14中Material-UI折线图仅hover后加载线条问题求助

以下是几种可行的解决方案，按优先级尝试：

1. 移除disableAxisListener属性 #

你设置的disableAxisListener={true}可能干扰了图表的初始渲染逻辑——这个属性原本用于禁用坐标轴交互监听，但在NextJS客户端组件的渲染流程中，会导致线条无法在页面加载时完成绘制。

修改后的代码：

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

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

export default Chart;

2. 明确容器的具体尺寸 #

如果父容器没有设置明确高度，w-full h-full可能无法让图表获取到正确的渲染尺寸，导致初始绘制失败。给容器设置固定高度（比如h-[400px]）或者内联样式，确保图表有足够的绘制空间。

3. 手动触发组件挂载后的重绘 #

如果上述方法无效，可能是NextJS的Hydration机制导致图表初始化不完整，可以通过useRef和useEffect手动触发重绘：

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

const Chart = () => {
  const chartRef = useRef(null);

  useEffect(() => {
    if (chartRef.current) {
      // 触发图表重绘
      chartRef.current.update();
    }
  }, []);

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

export default Chart;

内容的提问来源于stack exchange，提问作者Benzagon