如何使用 Material UI 和 Devexpress 在 React 中创建条形图？

Material UI 是一个流行的 CSS 库，我们可以用它来设计 React 应用程序的样式。它包含各种预先设计样式的 React 组件，我们可以通过将它们导入到代码中来直接在应用程序中使用它们。,‘dx-react-chart-material-ui’是Devexpress的一个NPM包，可以连接devexpress的material-ui和‘dx-react-chart’库。 “dx-react-chart”用于创建图表，Material UI 用于设置图表样式。,用户可以执行以下命令在React应用程序中安装Material UI。,登录后复制,此外，执行以下命令来安装 Devexpress NPM 包。,登录后复制,用户可以按照以下语法使用 Devexpress 创建条形图。,登录后复制,在上面的语法中，我们使用了 DevExpress 的“Chart”、“BarSeries”和“Title”组件。 “Chart”组件显示图表，“BarSeries”组件显示条形图，“Title”组件显示标题。,在下面的示例中，我们从 Material UI 导入了“Paper”组件。此外，我们还从“devexpress”NPM 包中导入了所需的组件。,我们还定义了包含图表数据的 data[] 数组。它包含水果的名称和价格。我们创建一个简单的条形图来比较水果价格。在输出中，用户可以观察条形图。,登录后复制,在下面的示例中，我们演示了如何创建并排条形图。该数据包含根据颜色的材料名称和价格。,该图表包含单一材料的一系列 3 个条形图，每个条形图代表不同的颜色。我们使用“Barseries”组件为每种材料创建一个条形。此外，我们还设置了组件的标题。,在输出中，用户可以观察并排的条形图，每个条形根据颜色比较不同材料的价格。,登录后复制,在下面的示例中，我们演示了如何创建堆积条形图。我们根据各州准备了人口、车辆、房屋和商店数据，以创建条形图。,在下面的示例中，我们演示了如何创建堆积条形图。我们根据各州准备了人口、车辆、房屋和商店数据，以创建条形图。,登录后复制,我们学习了使用 Devexpress 和 Material UI 库来创建和设计图表。 Devexpress NPM 包是 Material UI 和 Devexpress 图表库之间的桥梁。此外，我们在本教程中学习了创建各种类型的条形图。,以上就是如何使用 Material UI 和 Devexpress 在 React 中创建条形图？的详细内容，更多请关注www.92cms.cn其它相关文章！