从 v6 迁移到 v7
本指南描述了将图表从 v6 迁移到 v7 所需的更改。
简介
这是将 @mui/x-charts
从 v6 升级到 v7 的参考指南。v6 和 v7 之间的更改主要是为了与其他 MUI X 包的版本匹配。预计不会有大的重大更改。
开始使用新版本
在 package.json
中,将图表包的版本更改为 ^7.0.0
。
-"@mui/x-charts": "^6.0.0",
+"@mui/x-charts": "^7.0.0",
更新 @mui/material
包
为了可以选择使用 @mui/material
的最新 API,包的对等依赖版本已更新为 ^5.15.14
。这只是次要版本的更改,因此不应导致任何重大更改。请将您的 @mui/material
包更新到此版本或更高版本。
重大更改
由于 v7
是一个主要版本,因此它包含影响公共 API 的更改。这些更改是为了保持一致性、提高稳定性和为新功能腾出空间而进行的。
删除旧版捆绑包
所有 MUI X 包都已删除对 IE 11 的支持。不再包含曾经支持 IE 11 等旧版浏览器的 legacy
捆绑包。
放弃对 Webpack 4 的支持
放弃对旧版浏览器的支持也意味着我们不再转换现代浏览器原生支持的某些功能——例如 Nullish Coalescing 和 Optional Chaining。
Webpack 4 不支持这些功能,因此如果您正在使用 Webpack 4,您需要自己转换这些功能或升级到 Webpack 5。
以下是如何在 Webpack 4 上使用 @babel/preset-env
预设转换这些功能的示例
// webpack.config.js
module.exports = (env) => ({
// ...
module: {
rules: [
{
test: /\.[jt]sx?$/,
- exclude: /node_modules/,
+ exclude: [
+ {
+ test: path.resolve(__dirname, 'node_modules'),
+ exclude: [path.resolve(__dirname, 'node_modules/@mui/x-charts')],
+ },
+ ],
},
],
},
});
重命名
类型
一些类型为了保持一致性而被重命名
v6 | v7 |
---|---|
ChartsTooltipSlotComponentProps |
ChartsTooltipSlotProps |
ChartsTooltipSlotsComponent |
ChartsTooltipSlots |
Props
为了与其他组件保持一致性,饼图的 onClick
prop 已重命名为 onItemClick
。此 prop 的行为保持不变。
动画
折线图现在默认启用动画。您可以使用 skipAnimation
prop 禁用它。有关更多信息,请参阅动画文档。