我正在try 使用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 setup documentation指定的['@mui/x-charts'] to your next.config.js

如果有人能帮我一把,我真的很感激!

推荐答案

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

我不知道确切的原因,但它是"clip路径",即不更新.它没有占据全宽度,但在悬停时它占据全宽度.

Typescript相关问答推荐

在控制器中使用@ DeliverGuards时实现循环依赖项时未定义的依赖项

如何将单元测试中的私有订阅变量设置为空(或未定义)?

将对象属性路径描述为字符串数组的类型

如何在函数参数中使用(或模仿)`success`的行为?

是否可以根据嵌套属性来更改接口中属性的类型?

找不到带名称的管道''

TypeScript Page Routing在单击时不呈现子页面(React Router v6)

无法绑定ngModel.条件ngSwitchCase中的错误

如何使用Zod使一个基于其他字段值的字段为必填字段?

接口中函数的条件参数

ANGLE独立组件布线错误:没有ActivatedRouting提供程序

如何避免推断空数组

如何在NX工作区项目.json中设置类似angular.json的两个项目构建配置?

如何合并两个泛型对象并获得完整的类型安全结果?

正确使用相交类型的打字集

从route.参数获取值.订阅提供";无法读取未定义";的属性

为什么TypeScrip不能解析对象析构中的赋值?

可以';t使用t正确地索引对象;联合;索引类型

传入类型参数<;T>;变容函数

数据库中的表请求返回如下日期:2023-07-20T21:39:00.000Z 我需要将此数据格式化为 dd/MM/yyyy HH:mm